├── .gitignore
├── LICENSE.md
├── README.md
├── icons
├── close.svg
├── close_hover.svg
├── maximize.svg
├── maximize_hover.svg
├── minimize.svg
└── minimize_hover.svg
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Kristoffer Vestergaard
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Hyper-mac-controls! [![npm-version][npm-badge]][npm-link]
2 |
3 | A plugin that makes the close, minimize and maximize buttons look like the macOS window controls. This plugin is tested in both linux and windows.
4 |
5 | ![hyper-mac-controls][screenshot]
6 |
7 | ### Install
8 |
9 | **Hyper store**:
10 | Install using `hyper i hyper-mac-controls`
11 |
12 | **Manually**:
13 | 1. Open Hyper preferences (or edit them manually at `~/.hyper.js` with your editor).
14 | 2. Update your list of plugins to include hyper-mac-controls, like so:
15 | ```javascript
16 | plugins: [
17 | 'hyper-mac-controls'
18 | ],
19 | ```
20 | 3. Reload (`Ctrl+Shift+R`) or restart Hyper
21 |
22 | ### Config
23 |
24 | It makes use of `showWindowControls` to determine where to place the controls. To move the controls to the left side, change your config to the following:
25 | ```javascript
26 | module.exports = {
27 | config: {
28 | ...
29 | showWindowControls: 'left',
30 | ...
31 | }
32 | }
33 | ```
34 |
35 | **Flip controls**
36 | Default value is `true`
37 |
38 | ```javascript
39 | module.exports = {
40 | config: {
41 | ...
42 | hyperMacControls: {
43 | flipped: true,
44 | }
45 | ...
46 | }
47 | }
48 | ```
49 |
50 | ### Changelog
51 | **1.2.0**
52 | - Fixed issue with latest version of HyperJS
53 |
54 | **1.1.2**
55 | - Add flipped versions again (see config option above)
56 |
57 | **1.1.0**
58 | - Update to work with Hyper 2.0
59 | - Remove flipped versions (they are on my todo)
60 | - Remove package specific config options and make use of `showWindowControls` instead.
61 |
62 | **1.0.4**
63 | - Add left and right-flipped options
64 |
65 | ### License
66 |
67 | MIT © [krve][author]
68 |
69 | [screenshot]: https://cloud.githubusercontent.com/assets/5139119/21655977/766986e0-d2bc-11e6-8182-fd48c55c4416.png
70 | [npm-badge]: https://img.shields.io/npm/v/hyper-mac-controls.svg?style=flat-square
71 | [npm-link]: https://www.npmjs.com/package/hyper-mac-controls
72 | [author]: https://github.com/krve
73 |
--------------------------------------------------------------------------------
/icons/close.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
152 |
153 |
--------------------------------------------------------------------------------
/icons/close_hover.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
162 |
--------------------------------------------------------------------------------
/icons/maximize.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
152 |
--------------------------------------------------------------------------------
/icons/maximize_hover.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
162 |
--------------------------------------------------------------------------------
/icons/minimize.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
152 |
--------------------------------------------------------------------------------
/icons/minimize_hover.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
166 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const isWin = process.platform === 'win32';
4 | let dirname = __dirname;
5 |
6 | if (isWin == true) {
7 | dirname = dirname.replace(/\\/g, '/');
8 | }
9 |
10 | exports.decorateConfig = (config) => {
11 | const pluginConfig = Object.assign({
12 | flipped: true,
13 | }, config.hyperMacControls);
14 |
15 | const windowControls = config.showWindowControls;
16 |
17 | if (windowControls === false) {
18 | return config;
19 | }
20 |
21 | let isLeft = windowControls === 'left';
22 |
23 | return Object.assign({}, config, {
24 | css: `
25 | ${config.css || ''}
26 | .header_windowHeader {
27 | height: 22px;
28 | left: ${isLeft ? '57px' : '0'};
29 | width: calc(100% - 56px);
30 | }
31 | .header_windowControls {
32 | display: none;
33 | }
34 | .header_appTitle {
35 | margin-left: -56px;
36 | }
37 | .mac_header {
38 | position: fixed;
39 | top: 0;
40 | ${isLeft ? 'left: 0;' : 'right: 0;'}
41 | height: 22px;
42 | width: 56px;
43 | }
44 | .mac_actions {
45 | position: absolute;
46 | left: 0;
47 | right: 0;
48 | bottom: 0;
49 | top: 0;
50 | }
51 | .mac_header .mac_close,
52 | .mac_header .mac_minimize,
53 | .mac_header .mac_maximize {
54 | width: 12px;
55 | height: 12px;
56 | border-radius: 50%;
57 | position: absolute;
58 | top: 5px;
59 | background-position: -6px;
60 | }
61 | .mac_header .mac_close {
62 | background-color: #f25056;
63 | background-image: url('${dirname}/icons/close.svg');
64 | left: ${pluginConfig.flipped ? '5px' : '40px'};
65 | }
66 | .mac_header .mac_close:hover {
67 | background-image: url('${dirname}/icons/close_hover.svg');
68 | }
69 | .mac_header .mac_minimize {
70 | background-color: #fac536;
71 | background-image: url('${dirname}/icons/minimize.svg');
72 | left: 23px;
73 | }
74 | .mac_header .mac_minimize:hover {
75 | background-image: url('${dirname}/icons/minimize_hover.svg');
76 | }
77 | .mac_header .mac_maximize {
78 | background-color: #39ea49;
79 | background-image: url('${dirname}/icons/maximize.svg');
80 | left: ${pluginConfig.flipped ? '40px' : '5px'};
81 | }
82 | .mac_header .mac_maximize:hover {
83 | background-image: url('${dirname}/icons/maximize_hover.svg');
84 | }
85 | `
86 | })
87 | };
88 |
89 | exports.decorateHeader = (Hyper, { React }) => {
90 | return class extends React.Component {
91 | constructor(props) {
92 | super(props);
93 |
94 | this.state = {
95 | maximized: false
96 | }
97 |
98 | this.props = props;
99 | this.maximizeApp = this.maximizeApp.bind(this);
100 | }
101 |
102 | maximizeApp() {
103 | if (this.state.maximized == true) {
104 | this.props.unmaximize()
105 | this.state.maximized = false;
106 | } else {
107 | this.props.maximize()
108 | this.state.maximized = true;
109 | }
110 | }
111 |
112 | render() {
113 | return (
114 | React.createElement(Hyper, Object.assign({}, this.props, {
115 | customChildren: React.createElement('div', { className: 'mac_header' },
116 | React.createElement('div', { className: 'mac_actions' },
117 | React.createElement('span', { className: 'mac_close', onClick: this.props.close }),
118 | React.createElement('span', { className: 'mac_minimize', onClick: this.props.minimize }),
119 | React.createElement('span', { className: 'mac_maximize', onClick: this.maximizeApp })
120 | )
121 | ),
122 | }))
123 | )
124 | }
125 | };
126 | };
127 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hyper-mac-controls",
3 | "version": "1.2.0",
4 | "description": "Hyper mac-like window controls on linux or windows",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/krve/hyper-mac-controls.git"
9 | },
10 | "keywords": [
11 | "hyper",
12 | "hyperterm",
13 | "hyper-plugin",
14 | "hyperterm-plugin",
15 | "plugin",
16 | "mac"
17 | ],
18 | "author": "Kristoffer ",
19 | "license": "MIT"
20 | }
21 |
--------------------------------------------------------------------------------