commit 85c6239e3bd15cc8d5dbdb46e2088125c0683207 Author: Matthias Kretschmann Date: Wed May 10 01:55:44 2017 +0200 🥃 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..97008e5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +yarn.lock \ No newline at end of file diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..8dec8c3 --- /dev/null +++ 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, + } +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0645b2e --- /dev/null +++ b/LICENSE @@ -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. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..83abedd --- /dev/null +++ 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)) \ No newline at end of file diff --git a/hyper-mac-pro.png b/hyper-mac-pro.png new file mode 100644 index 0000000..3d6d883 Binary files /dev/null and b/hyper-mac-pro.png differ diff --git a/index.js b/index.js new file mode 100644 index 0000000..4c9fdae --- /dev/null +++ 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) +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c35dd26 --- /dev/null +++ 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 ", + "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" + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..131e52b --- /dev/null +++ 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; +}