🥃 initial commit

2024-12-03 14:34:31 +01:00 · 2017-05-10 01:55:44 +02:00 · 2017-05-10 01:55:44 +02:00 · 85c6239e3b
commit 85c6239e3b
8 changed files with 387 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules
+yarn.lock
--- a/.stylelintrc
+++ b/.stylelintrc
@ -0,0 +1,128 @@
+{
+  "rules": {
+    "at-rule-empty-line-before": [ "always", {
+      except: [
+        "blockless-after-same-name-blockless",
+        "first-nested",
+      ],
+      ignore: ["after-comment"],
+    } ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "comment-empty-line-before": [ "always", {
+      except: ["first-nested"],
+      ignore: ["stylelint-commands"],
+    } ],
+    "comment-no-empty": true,
+    "comment-whitespace-inside": "always",
+    "custom-property-empty-line-before": [ "always", {
+      except: [
+        "after-custom-property",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-duplicate-properties": [ true, {
+      ignore: ["consecutive-duplicates-with-different-values"],
+    } ],
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": [ "always", {
+      except: [
+        "after-declaration",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-whitespace-after": "always",
+    "indentation": 4,
+    "keyframe-declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "rule-empty-line-before": [ "always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"],
+    } ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "shorthand-property-no-redundant-values": true,
+    "string-no-newline": true,
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  }
+}
--- a/22
+++ b/22
@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Matthias Kretschmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.
+
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# hyper-mac-pro
+
+> Cause you deserve native & pro. Tab style for [Hyper](https://hyper.is/) inspired by Apple's pro apps on macOS.
+
+![Screenshot](hyper-mac-pro.png)
+
+This has only been tested on macOS and is not guaranteed to work on other operating systems.
+
+## Usage
+
+Install by adding `hyper-mac-pro` to the `plugins` property in your `~/.hyper.js`. If you're using [hpm](https://github.com/zeit/hpm):
+
+```bash
+hpm install hyper-mac-pro
+```
+
+## Contribute
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device (make sure that it's located in `~/.hyper-plugins/local`)
+2. Add `hyper-mac-pro` to the `localPlugins` property within `~/.hyper.js`
+3. Restart Hyper
+
+Install dependencies with `npm install` and hack away. Run the tests using `npm test`. Running tests will happen automatically before every commit.
+
+## Author
+
+- Matthias Kretschmann ([@kremalicious](https://twitter.com/kremalicious))
--- a/hyper-mac-pro.png
+++ b/hyper-mac-pro.png
--- a/index.js
+++ b/index.js
@ -0,0 +1,47 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+
+let styles = ''
+
+try {
+    styles = fs.readFileSync(path.join(__dirname, 'styles.css'), 'utf8')
+} catch (err) {
+    throw err
+}
+
+exports.decorateConfig = config => Object.assign({}, config, {
+    css: (config.css || '') + styles
+})
+
+// Fix native fullscreen titlebar
+exports.decorateBrowserOptions = defaults => Object.assign({}, defaults, {
+    transparent: false
+})
+
+// Tabs/no tabs body class
+exports.getTabsProps = (parentProps, props) => {
+    const bodyClasses = document.body.classList
+
+    if (props.tabs.length <= 1) {
+        bodyClasses.add('no-tabs')
+    } else {
+        bodyClasses.remove('no-tabs')
+    }
+
+    return Object.assign({}, parentProps, props)
+}
+
+// Fullscreen body class
+exports.mapHyperState = (state, map) => {
+    const bodyClasses = document.body.classList
+
+    if (window.innerHeight === screen.height) {
+        bodyClasses.add('fullscreen')
+    } else {
+        bodyClasses.remove('fullscreen')
+    }
+
+    return Object.assign({}, state, map)
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,42 @@
+{
+  "name": "hyper-mac-pro",
+  "version": "1.0.0",
+  "description": "Tab style for Hyper inspired by Apple's pro apps on macOS",
+  "license": "MIT",
+  "author": "Matthias Kretschmann <m@kretschmann.io>",
+  "main": "index.js",
+  "scripts": {
+    "test": "xo && stylelint *.css",
+    "precommit": "npm run test"
+  },
+  "files": [
+    "index.js",
+    "styles.css"
+  ],
+  "repository": "kremalicious/hyper-mac-pro",
+  "xo": {
+    "esnext": true,
+    "space": 4,
+    "semicolon": false,
+    "globals": [
+      "document",
+      "window",
+      "screen"
+    ]
+  },
+  "keywords": [
+    "hyper",
+    "hyperterm",
+    "theme",
+    "ui",
+    "native",
+    "mac",
+    "dark",
+    "pro"
+  ],
+  "devDependencies": {
+    "husky": "^0.13.1",
+    "xo": "^0.17.1",
+    "stylelint": "^7.10.1"
+  }
+}
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,119 @@
+:root {
+    --tab-height: 34px;
+    --tab-gradient: linear-gradient(to bottom, #898989 0%, #676767 100%);
+    --tab-gradient-hover: linear-gradient(to bottom, #777 0%, #595959 100%);
+    --tab-gradient-inactive: linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 100%);
+    --tab-border-color: #5e5e5e;
+    --tab-text-color: #030303;
+    --tab-text-color-inactive: #363636;
+}
+
+.hyper_main { border: none; }
+
+.header_header {
+    top: 0;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #cfcfcf;
+}
+
+.tabs_nav {
+    background: var(--tab-gradient-inactive);
+    height: var(--tab-height);
+    line-height: var(--tab-height);
+}
+
+.no-tabs .tabs_nav {
+    background: var(--tab-gradient);
+}
+
+.tabs_list {
+    max-height: var(--tab-height);
+}
+
+.fullscreen .tabs_list {
+    margin-left: 0;
+}
+
+.tabs_nav .tab_tab {
+    background: var(--tab-gradient-inactive);
+    border-left: 1px solid var(--tab-border-color) !important;
+    border-bottom: 0;
+    transition: background .25s ease-out;
+}
+
+.no-tabs .tabs_nav .tab_tab {
+    background: var(--tab-gradient);
+}
+
+.tabs_nav .tab_text,
+.tabs_nav .tabs_title {
+    height: var(--tab-height);
+    color: var(--tab-text-color-inactive);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .1);
+    transition: .25s ease-out;
+}
+
+.tabs_nav .tabs_title,
+.fullscreen .tabs_nav .tab_text {
+    font-size: 13px;
+}
+
+.tabs_nav .tabs_title,
+.tabs_nav .tabs_list .tab_active .tab_text {
+    color: var(--tab-text-color);
+}
+
+.tabs_nav .tab_tab.tab_first:not(.tab_active) {
+    border-left: 0 !important;
+}
+
+.tabs_nav .tab_tab.tab_first:not(.tab_active):hover {
+    box-shadow: -1px 0 0 var(--tab-border-color);
+}
+
+.tabs_nav .tab_tab:not(.tab_active):hover {
+    background: var(--tab-gradient-hover);
+}
+
+.tabs_nav .tabs_list .tab_active {
+    background: var(--tab-gradient);
+}
+
+.tabs_nav .tabs_list .tab_active .tab_text {
+    transition: none;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .15);
+    z-index: 1;
+}
+
+.tabs_nav .tabs_borderShim {
+    display: none;
+}
+
+.tabs_nav .tabs_list .tab_icon {
+    z-index: 2;
+    right: auto;
+    left: 7px;
+    top: 11px;
+    color: var(--tab-text-color);
+    border-radius: 3px;
+    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .15));
+}
+
+.tabs_nav .tabs_list .tab_icon:hover {
+    color: var(--tab-text-color);
+    padding: 4px;
+    background-color: #676767;
+    filter: none;
+}
+
+.tabs_nav .tabs_list .tab_icon:active {
+    transition: none;
+    background-color: #5e5e5e;
+}
+
+.terms_terms {
+    margin-top: var(--tab-height);
+    border-top: 1px solid #181818;
+}