[Win/Linux] Add config options for the window controls and the 🍔 menu

vercel · Nov 10, 2016 · 325b90b · 325b90b
1 parent f3314bb
commit 325b90b
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 34 deletions.
diff --git a/app/config-default.js b/app/config-default.js
@@ -27,6 +27,16 @@ module.exports = {
     // custom css to embed in the terminal window
     termCSS: '',
 
+    // set to `true` if you're using a Linux set up
+    // that doesn't shows native menus
+    // default: `false` on Linux, `true` on Windows (ignored on macOS)
+    showHamburgerMenu: '',
+
+    // set to `false` if you want to hide the minimize, maximize and close buttons
+    // additionally, set to `'left'` if you want them on the left, like in Ubuntu
+    // default: `true` on windows and Linux (ignored on macOS)
+    showWindowControls: '',
+
     // custom padding (css format, i.e.: `top right bottom left`)
     padding: '12px 14px',
 

diff --git a/lib/components/header.js b/lib/components/header.js
@@ -98,6 +98,23 @@ export default class Header extends Component {
     clearTimeout(this.clickTimer);
   }
 
+  getWindowHeaderConfig() {
+    const {showHamburgerMenu, showWindowControls} = this.props;
+    const ret = {
+      hambMenu: process.platform === 'win32', // show by default on windows
+      winCtrls: !this.props.isMac // show by default on windows and linux
+    };
+    if (!this.props.isMac) { // allow the user to override the defaults if not on macOS
+      if (showHamburgerMenu !== '') {
+        ret.hambMenu = showHamburgerMenu;
+      }
+      if (showWindowControls !== '') {
+        ret.winCtrls = showWindowControls;
+      }
+    }
+    return ret;
+  }
+
   template(css) {
     const {isMac} = this.props;
     const props = getTabsProps(this.props, {
@@ -112,6 +129,8 @@ export default class Header extends Component {
       // if there's only one tab we use its title as the window title
       title = props.tabs[0].title;
     }
+    const {hambMenu, winCtrls} = this.getWindowHeaderConfig();
+    const left = winCtrls === 'left';
     return (<header
       className={css('header', isMac && 'headerRounded')}
       onClick={this.handleHeaderClick}
@@ -122,31 +141,39 @@ export default class Header extends Component {
           className={css('windowHeader', props.tabs.length > 1 && 'windowHeaderWithBorder')}
           style={{borderColor}}
           >
-          <svg
-            className={css('shape', 'hamburgerMenu')}
-            onClick={this.handleHamburgerMenuClick}
-            >
-            <use xlinkHref="./dist/assets/icons.svg#hamburger-menu"/>
-          </svg>
+          {
+            hambMenu &&
+            <svg
+              className={css('shape', (left && 'hamburgerMenuRight') || 'hamburgerMenuLeft')}
+              onClick={this.handleHamburgerMenuClick}
+              >
+              <use xlinkHref="./dist/assets/icons.svg#hamburger-menu"/>
+            </svg>
+          }
           <span className={css('appTitle')}>{title}</span>
-          <svg
-            className={css('shape', 'minimizeWindow')}
-            onClick={this.handleMinimizeClick}
-            >
-            <use xlinkHref="./dist/assets/icons.svg#minimize-window"/>
-          </svg>
-          <svg
-            className={css('shape', 'maximizeWindow')}
-            onClick={this.handleMaximizeClick}
-            >
-            <use xlinkHref="./dist/assets/icons.svg#maximize-window"/>
-          </svg>
-          <svg
-            className={css('shape', 'closeWindow')}
-            onClick={this.handleCloseClick}
-            >
-            <use xlinkHref="./dist/assets/icons.svg#close-window"/>
-          </svg>
+          {
+            winCtrls &&
+            <div className={css('windowControls', left && 'windowControlsLeft')}>
+              <svg
+                className={css('shape', left && 'minimizeWindowLeft')}
+                onClick={this.handleMinimizeClick}
+                >
+                <use xlinkHref="./dist/assets/icons.svg#minimize-window"/>
+              </svg>
+              <svg
+                className={css('shape', left && 'maximizeWindowLeft')}
+                onClick={this.handleMaximizeClick}
+                >
+                <use xlinkHref="./dist/assets/icons.svg#maximize-window"/>
+              </svg>
+              <svg
+                className={css('shape', left && 'closeWindowLeft')}
+                onClick={this.handleCloseClick}
+                >
+                <use xlinkHref="./dist/assets/icons.svg#close-window"/>
+              </svg>
+            </div>
+          }
         </div>
       }
       { this.props.customChildrenBefore }
@@ -200,28 +227,39 @@ export default class Header extends Component {
       shape: {
         width: '10px',
         height: '10px',
-        position: 'fixed',
         WebkitAppRegion: 'no-drag',
         color: 'white',
         shapeRendering: 'crispEdges'
       },
 
-      hamburgerMenu: {
+      hamburgerMenuLeft: {
+        position: 'fixed',
         top: '10px',
         left: '10px'
       },
 
-      closeWindow: {
+      hamburgerMenuRight: {
+        position: 'fixed',
+        top: '10px',
         right: '10px'
       },
 
-      maximizeWindow: {
-        right: '35px'
+      windowControls: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '60px',
+        height: '10px',
+        position: 'fixed',
+        right: '10px'
       },
 
-      minimizeWindow: {
-        right: '60px'
-      }
+      windowControlsLeft: {left: '10px'},
+
+      closeWindowLeft: {order: 1},
+
+      minimizeWindowLeft: {order: 2},
+
+      maximizeWindowLeft: {order: 3}
     };
   }
 

diff --git a/lib/containers/header.js b/lib/containers/header.js
@@ -35,7 +35,9 @@ const HeaderContainer = connect(
       activeMarkers: state.ui.activityMarkers,
       borderColor: state.ui.borderColor,
       backgroundColor: state.ui.backgroundColor,
-      maximized: state.ui.maximized
+      maximized: state.ui.maximized,
+      showHamburgerMenu: state.ui.showHamburgerMenu,
+      showWindowControls: state.ui.showWindowControls
     };
   },
   dispatch => {

diff --git a/lib/reducers/ui.js b/lib/reducers/ui.js
@@ -22,6 +22,8 @@ import {values} from '../utils/object';
 
 const allowedCursorShapes = new Set(['BEAM', 'BLOCK', 'UNDERLINE']);
 const allowedBells = new Set(['SOUND', false]);
+const allowedHamburgerMenuValues = new Set([true, false]);
+const allowedWindowControlsValues = new Set([true, false, 'left']);
 
 // Populate `config-default.js` from this :)
 const initial = Immutable({
@@ -79,7 +81,9 @@ const initial = Immutable({
   modifierKeys: {
     altIsMeta: false,
     cmdIsMeta: false
-  }
+  },
+  showHamburgerMenu: '',
+  showWindowControls: ''
 });
 
 const reducer = (state = initial, action) => {
@@ -171,6 +175,14 @@ const reducer = (state = initial, action) => {
             ret.modifierKeys = config.modifierKeys;
           }
 
+          if (allowedHamburgerMenuValues.has(config.showHamburgerMenu)) {
+            ret.showHamburgerMenu = config.showHamburgerMenu;
+          }
+
+          if (allowedWindowControlsValues.has(config.showWindowControls)) {
+            ret.showWindowControls = config.showWindowControls;
+          }
+
           return ret;
         })());
       break;