Add option to hide menu bar (#1215)

Closes #293 Based on #1216 This adds an option to auto-hide the menu bar on Windows/Linux Electron. The option will be in Settings ▸ Display. screen shot 2019-02-21 at 23 26 17 We have to be careful not to get the user stuck in a situation where they can't bring back the menu bar, so we'll show the Settings button and footer links in the Navigation Bar when auto-hide is enabled.
Automattic · Oct 16, 2019 · 6f8005a · 6f8005a
1 parent 7e6c067
commit 6f8005a
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 35 deletions.
diff --git a/desktop/app.js b/desktop/app.js
@@ -109,6 +109,11 @@ module.exports = function main() {
       });
     });
 
+    ipcMain.on('setAutoHideMenuBar', function(event, autoHideMenuBar) {
+      mainWindow.setAutoHideMenuBar(autoHideMenuBar || false);
+      mainWindow.setMenuBarVisibility(!autoHideMenuBar);
+    });
+
     mainWindowState.manage(mainWindow);
 
     mainWindow.webContents.on('new-window', function(event, linkUrl) {

diff --git a/lib/app.jsx b/lib/app.jsx
@@ -68,6 +68,7 @@ function mapDispatchToProps(dispatch, { noteBucket }) {
         'setNoteDisplay',
         'setMarkdown',
         'setAccountName',
+        'toggleAutoHideMenuBar',
         'toggleFocusMode',
         'toggleSpellCheck',
       ]),
@@ -145,6 +146,7 @@ export const App = connect(
 
     componentDidMount() {
       ipc.on('appCommand', this.onAppCommand);
+      ipc.send('setAutoHideMenuBar', this.props.settings.autoHideMenuBar);
       ipc.send('settingsUpdate', this.props.settings);
 
       this.props.noteBucket
@@ -435,7 +437,9 @@ export const App = connect(
           {isDevConfig && <DevBadge />}
           {isAuthorized ? (
             <div className={mainClasses}>
-              {state.showNavigation && <NavigationBar />}
+              {state.showNavigation && (
+                <NavigationBar isElectron={isElectron()} />
+              )}
               <AppLayout
                 isFocusMode={settings.focusModeEnabled}
                 isNavigationOpen={state.showNavigation}
@@ -470,6 +474,7 @@ export const App = connect(
             closeDialog={this.props.actions.closeDialog}
             dialogs={this.props.appState.dialogs}
             isElectron={isElectron()}
+            isMacApp={isMacApp}
           />
         </div>
       );

diff --git a/lib/dialog-renderer/index.jsx b/lib/dialog-renderer/index.jsx
@@ -13,6 +13,7 @@ export const DialogRenderer = props => {
     closeDialog,
     dialogs,
     isElectron,
+    isMacApp,
   } = props;
 
   const renderDialog = dialog => {
@@ -40,6 +41,7 @@ export const DialogRenderer = props => {
           dialog={dialog}
           requestClose={closeThisDialog}
           isElectron={isElectron}
+          isMacApp={isMacApp}
           {...appProps}
         />
       </Modal>
@@ -56,6 +58,7 @@ DialogRenderer.propTypes = {
   closeDialog: PropTypes.func.isRequired,
   dialogs: PropTypes.array.isRequired,
   isElectron: PropTypes.bool.isRequired,
+  isMacApp: PropTypes.bool.isRequired,
 };
 
 export default DialogRenderer;
diff --git a/lib/dialogs/settings/index.jsx b/lib/dialogs/settings/index.jsx
@@ -26,6 +26,7 @@ export class SettingsDialog extends Component {
     dialog: PropTypes.shape({ title: PropTypes.string.isRequired }),
     onSignOut: PropTypes.func.isRequired,
     isElectron: PropTypes.bool.isRequired,
+    isMacApp: PropTypes.bool.isRequired,
     onSetWPToken: PropTypes.func.isRequired,
     requestClose: PropTypes.func.isRequired,
     settings: PropTypes.object.isRequired,
@@ -118,7 +119,14 @@ export class SettingsDialog extends Component {
   };
 
   render() {
-    const { buckets, dialog, requestClose, settings } = this.props;
+    const {
+      buckets,
+      dialog,
+      isElectron,
+      isMacApp,
+      requestClose,
+      settings,
+    } = this.props;
     const { analyticsEnabled } = this.props.appState.preferences;
 
     return (
@@ -132,7 +140,11 @@ export class SettingsDialog extends Component {
               this.onToggleShareAnalyticsPreference
             }
           />
-          <DisplayPanel buckets={buckets} />
+          <DisplayPanel
+            buckets={buckets}
+            isElectron={isElectron}
+            isMacApp={isMacApp}
+          />
           <ToolsPanel />
         </TabPanels>
       </Dialog>

diff --git a/lib/dialogs/settings/panels/display.jsx b/lib/dialogs/settings/panels/display.jsx
@@ -15,7 +15,10 @@ const DisplayPanel = props => {
   const {
     actions,
     activeTheme,
+    autoHideMenuBar,
     buckets: { noteBucket },
+    isElectron,
+    isMacApp,
     lineLength,
     loadNotes,
     noteDisplay,
@@ -108,16 +111,32 @@ const DisplayPanel = props => {
         <Item title="Light" slug="light" />
         <Item title="Dark" slug="dark" />
       </SettingsGroup>
+
+      {isElectron && !isMacApp && (
+        <SettingsGroup
+          title="Menu Bar"
+          slug="autoHideMenuBar"
+          activeSlug={autoHideMenuBar ? 'autoHide' : ''}
+          description="When set to auto-hide, press the Alt key to toggle."
+          onChange={actions.toggleAutoHideMenuBar}
+          renderer={ToggleGroup}
+        >
+          <Item title="Hide Automatically" slug="autoHide" />
+        </SettingsGroup>
+      )}
     </Fragment>
   );
 };
 
 DisplayPanel.propTypes = {
   actions: PropTypes.object.isRequired,
   activeTheme: PropTypes.string.isRequired,
+  autoHideMenuBar: PropTypes.bool,
   buckets: PropTypes.shape({
     noteBucket: PropTypes.object.isRequired,
   }),
+  isElectron: PropTypes.bool.isRequired,
+  isMacApp: PropTypes.bool.isRequired,
   lineLength: PropTypes.string.isRequired,
   loadNotes: PropTypes.func.isRequired,
   loadTags: PropTypes.func.isRequired,
@@ -130,6 +149,7 @@ DisplayPanel.propTypes = {
 const mapStateToProps = ({ settings }) => {
   return {
     activeTheme: settings.theme,
+    autoHideMenuBar: settings.autoHideMenuBar,
     lineLength: settings.lineLength,
     noteDisplay: settings.noteDisplay,
     sortIsReversed: settings.sortReversed,

diff --git a/lib/navigation-bar/index.jsx b/lib/navigation-bar/index.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import onClickOutside from 'react-onclickoutside';
@@ -18,7 +18,9 @@ export class NavigationBar extends Component {
   static displayName = 'NavigationBar';
 
   static propTypes = {
+    autoHideMenuBar: PropTypes.bool,
     dialogs: PropTypes.array.isRequired,
+    isElectron: PropTypes.bool.isRequired,
     isOffline: PropTypes.bool.isRequired,
     onAbout: PropTypes.func.isRequired,
     onOutsideClick: PropTypes.func.isRequired,
@@ -65,6 +67,8 @@ export class NavigationBar extends Component {
 
   render() {
     const {
+      autoHideMenuBar,
+      isElectron,
       isOffline,
       onAbout,
       onSettings,
@@ -91,29 +95,35 @@ export class NavigationBar extends Component {
         <div className="navigation-bar__tags theme-color-border">
           <TagList />
         </div>
-        <div className="navigation-bar__tools theme-color-border">
-          <NavigationBarItem
-            icon={<SettingsIcon />}
-            label="Settings"
-            onClick={onSettings}
-          />
-        </div>
-        <div className="navigation-bar__footer">
-          <button
-            type="button"
-            className="navigation-bar__footer-item theme-color-fg-dim"
-            onClick={this.onHelpClicked}
-          >
-            Help &amp; Support
-          </button>
-          <button
-            type="button"
-            className="navigation-bar__footer-item theme-color-fg-dim"
-            onClick={onAbout}
-          >
-            About
-          </button>
-        </div>
+
+        {(!isElectron || autoHideMenuBar) && (
+          <Fragment>
+            <div className="navigation-bar__tools theme-color-border">
+              <NavigationBarItem
+                icon={<SettingsIcon />}
+                label="Settings"
+                onClick={onSettings}
+              />
+            </div>
+            <div className="navigation-bar__footer">
+              <button
+                type="button"
+                className="navigation-bar__footer-item theme-color-fg-dim"
+                onClick={this.onHelpClicked}
+              >
+                Help &amp; Support
+              </button>
+              <button
+                type="button"
+                className="navigation-bar__footer-item theme-color-fg-dim"
+                onClick={onAbout}
+              >
+                About
+              </button>
+            </div>
+          </Fragment>
+        )}
+
         <div className="navigation-bar__sync-status theme-color-fg-dim theme-color-border">
           <SyncStatus isOffline={isOffline} unsyncedNoteIds={unsyncedNoteIds} />
         </div>
@@ -122,7 +132,8 @@ export class NavigationBar extends Component {
   }
 }
 
-const mapStateToProps = ({ appState: state }) => ({
+const mapStateToProps = ({ appState: state, settings }) => ({
+  autoHideMenuBar: settings.autoHideMenuBar,
   dialogs: state.dialogs,
   isOffline: state.isOffline,
   selectedTag: state.tag,

diff --git a/lib/navigation-bar/style.scss b/lib/navigation-bar/style.scss
@@ -50,13 +50,6 @@
   color: $studio-gray-80;
 }
 
-.is-electron {
-  .navigation-bar__tools,
-  .navigation-bar__footer {
-    display: none;
-  }
-}
-
 .navigation-bar__footer-item {
   margin-right: 10px;
 

diff --git a/lib/state/settings/actions.js b/lib/state/settings/actions.js
@@ -1,3 +1,7 @@
+import { getIpcRenderer } from '../../utils/electron';
+
+const ipc = getIpcRenderer();
+
 export const setFontSize = fontSize => ({
   type: 'setFontSize',
   fontSize,
@@ -83,3 +87,14 @@ export const toggleSpellCheck = () => (dispatch, getState) => {
     spellCheckEnabled: !getState().settings.spellCheckEnabled,
   });
 };
+
+export const toggleAutoHideMenuBar = () => (dispatch, getState) => {
+  const newValue = !getState().settings.autoHideMenuBar;
+
+  ipc.send('setAutoHideMenuBar', newValue);
+
+  dispatch({
+    type: 'setAutoHideMenuBar',
+    autoHideMenuBar: newValue,
+  });
+};
diff --git a/lib/state/settings/reducer.js b/lib/state/settings/reducer.js
@@ -2,6 +2,7 @@ import { clamp } from 'lodash';
 
 export const initialState = {
   accountName: null,
+  autoHideMenuBar: false,
   focusModeEnabled: false,
   fontSize: 16,
   lineLength: 'narrow',
@@ -19,6 +20,8 @@ function reducer(state = initialState, action) {
   switch (action.type) {
     case 'setAccountName':
       return { ...state, accountName: action.accountName };
+    case 'setAutoHideMenuBar':
+      return { ...state, autoHideMenuBar: action.autoHideMenuBar };
     case 'setFocusMode':
       return { ...state, focusModeEnabled: action.focusModeEnabled };
     case 'setFontSize':