diff --git a/app/config-default.js b/app/config-default.js index 66db6c4deee1..8d1072a1a6c7 100644 --- 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 index 6a7e8be03603..6aab2b5db462 100644 --- 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 (
1 && 'windowHeaderWithBorder')} style={{borderColor}} > - - - + { + hambMenu && + + + + } {title} - - - - - - - - - + { + winCtrls && +
+ + + + + + + + + +
+ } } { 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 index 3dd247878f6b..ccf4770eedad 100644 --- 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 index 3566aae1cecd..4084dfb9848f 100644 --- 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;