Harmonize menu bar and settings in sidebar (#2263)

The web app has settings/keyboard shortcuts/about items in the navigation bar but those are absent from Electron. Electron already provides access to the settings through the OS menu but it's confusing to jump between the web and the electron app to discover those items are missing in one place. In this PR we stop hiding the settings and other items in the navigation sidebar when running in Electron. The Electron OS menu has also been missing "Empty Trash" and "Sign Out" as the native apps have. "Sign Out" is particularly convenient to have there and its absence makes logging-out particularly inconvenient. As a result of the overall state refactor in the app we're adding those menu items to make it more convenient again.
Automattic · Aug 6, 2020 · 93f6da7 · 93f6da7
1 parent a87d55b
commit 93f6da7
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 38 deletions.
diff --git a/desktop/menus/mac-app-menu.js b/desktop/menus/mac-app-menu.js
@@ -21,6 +21,13 @@ const buildMacAppMenu = (isAuthenticated) => {
     { role: 'hide' },
     { role: 'hideothers' },
     { role: 'unhide' },
+    ...(isAuthenticated
+      ? [
+          { type: 'separator' },
+          menuItems.emptyTrash(isAuthenticated),
+          menuItems.signout(isAuthenticated),
+        ]
+      : []),
     { type: 'separator' },
     { role: 'quit' },
   ];

diff --git a/desktop/menus/menu-items.js b/desktop/menus/menu-items.js
@@ -16,6 +16,14 @@ const checkForUpdates = {
   click: updater.pingAndShowProgress.bind(updater),
 };
 
+const emptyTrash = (isAuthenticated) => {
+  return {
+    label: '&Empty Trash',
+    visible: isAuthenticated,
+    click: appCommandSender({ action: 'emptyTrash' }),
+  };
+};
+
 const preferences = (isAuthenticated) => {
   return {
     label: 'P&references…',
@@ -28,8 +36,20 @@ const preferences = (isAuthenticated) => {
   };
 };
 
+const signout = (isAuthenticated) => {
+  return {
+    label: '&Sign Out',
+    visible: isAuthenticated,
+    click: appCommandSender({
+      action: 'logout',
+    }),
+  };
+};
+
 module.exports = {
   about,
   checkForUpdates,
+  emptyTrash,
   preferences,
+  signout,
 };
diff --git a/lib/navigation-bar/index.tsx b/lib/navigation-bar/index.tsx
@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import onClickOutside from 'react-onclickoutside';
 
-import { isElectron } from '../utils/platform';
 import ConnectionStatus from '../connection-status';
 import NavigationBarItem from './item';
 import TagList from '../tag-list';
@@ -91,42 +90,38 @@ export class NavigationBar extends Component<Props> {
           </div>
         </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.props.showKeyboardShortcuts}
-              >
-                Keyboard Shortcuts
-              </button>
-            </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__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.props.showKeyboardShortcuts}
+          >
+            Keyboard Shortcuts
+          </button>
+        </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>
       </div>
     );
   }

diff --git a/lib/state/electron/middleware.ts b/lib/state/electron/middleware.ts
@@ -5,10 +5,18 @@ import * as S from '../';
 export const middleware: S.Middleware = ({ dispatch, getState }) => {
   window.electron.receive('appCommand', (command) => {
     switch (command.action) {
+      case 'emptyTrash':
+        dispatch(actions.ui.emptyTrash());
+        return;
+
       case 'exportNotes':
         dispatch(actions.data.exportNotes());
         return;
 
+      case 'logout':
+        dispatch({ type: 'LOGOUT' });
+        return;
+
       case 'printNote':
         window.print();
         return;