Add option to show/hide keyboard shortcut hints on sidebar (#305)

package.json

@@ -29,10 +29,10 @@
     "blueimp-md5": "2.16.0",
     "cheerio": "1.0.0-rc.3",
     "classnames": "2.2.6",
-    "darkreader": "4.9.14",
     "date-fns": "2.14.0",
+    "darkreader": "4.9.15",
     "download": "8.0.0",
-    "electron-context-menu": "2.1.0",
+    "electron-context-menu": "2.2.0",
     "electron-is-dev": "1.2.0",
     "electron-settings": "4.0.2",
     "electron-updater": "4.3.3",

public/libs/preferences.js

@@ -58,6 +58,7 @@ const defaultPreferences = {
   rememberLastPageVisited: false,
   shareWorkspaceBrowsingData: false,
   sidebar: true,
+  sidebarShortcutHints: true,
   spellcheck: true,
   spellcheckLanguages: ['en-US'],
   swipeToNavigate: true,

src/components/dialog-preferences/index.js

@@ -202,6 +202,7 @@ const Preferences = ({
   rememberLastPageVisited,
   shareWorkspaceBrowsingData,
   sidebar,
+  sidebarShortcutHints,
   spellcheck,
   spellcheckLanguages,
   swipeToNavigate,
@@ -355,6 +356,22 @@ const Preferences = ({
               </ListItemSecondaryAction>
             </ListItem>
             <Divider />
+            <ListItem>
+              <ListItemText
+                primary="Show keyboard shortcut hints on sidebar"
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  edge="end"
+                  color="primary"
+                  checked={sidebarShortcutHints}
+                  onChange={(e) => {
+                    requestSetPreference('sidebarShortcutHints', e.target.checked);
+                  }}
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+            <Divider />
             <ListItem>
               <ListItemText
                 primary="Show navigation bar"
@@ -1254,6 +1271,7 @@ Preferences.propTypes = {
   rememberLastPageVisited: PropTypes.bool.isRequired,
   shareWorkspaceBrowsingData: PropTypes.bool.isRequired,
   sidebar: PropTypes.bool.isRequired,
+  sidebarShortcutHints: PropTypes.bool.isRequired,
   spellcheck: PropTypes.bool.isRequired,
   spellcheckLanguages: PropTypes.arrayOf(PropTypes.string).isRequired,
   swipeToNavigate: PropTypes.bool.isRequired,
@@ -1295,6 +1313,7 @@ const mapStateToProps = (state) => ({
   rememberLastPageVisited: state.preferences.rememberLastPageVisited,
   shareWorkspaceBrowsingData: state.preferences.shareWorkspaceBrowsingData,
   sidebar: state.preferences.sidebar,
+  sidebarShortcutHints: state.preferences.sidebarShortcutHints,
   spellcheck: state.preferences.spellcheck,
   spellcheckLanguages: state.preferences.spellcheckLanguages,
   swipeToNavigate: state.preferences.swipeToNavigate,

src/components/main/workspace-selector.js

@@ -37,18 +37,31 @@ const styles = (theme) => ({
     opacity: 1,
   },
   avatar: {
-    height: 32,
-    width: 32,
+    height: 36,
+    width: 36,
     background: theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white,
     borderRadius: 4,
     color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white),
-    lineHeight: '32px',
+    lineHeight: '36px',
     textAlign: 'center',
     fontWeight: 500,
     textTransform: 'uppercase',
     border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
     overflow: 'hidden',
   },
+  avatarLarge: {
+    height: 44,
+    width: 44,
+    lineHeight: '44px',
+  },
+  avatarPicture: {
+    height: 36,
+    width: 36,
+  },
+  avatarPictureLarge: {
+    height: 44,
+    width: 44,
+  },
   transparentAvatar: {
     background: 'transparent',
     border: 'none',
@@ -58,10 +71,6 @@ const styles = (theme) => ({
     background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
     color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black),
   },
-  avatarPicture: {
-    height: '100%',
-    width: '100%',
-  },
   shortcutText: {
     marginTop: 2,
     marginBottom: 0,
@@ -85,6 +94,7 @@ const WorkspaceSelector = ({
   onContextMenu,
   order,
   picturePath,
+  sidebarShortcutHints,
   transparentBackground,
 }) => (
   <div
@@ -103,16 +113,25 @@ const WorkspaceSelector = ({
       <div
         className={classNames(
           classes.avatar,
+          !sidebarShortcutHints && classes.avatarLarge,
           transparentBackground && classes.transparentAvatar,
           id === 'add' && classes.addAvatar,
         )}
       >
         {id !== 'add' ? (
-          <img alt="Icon" className={classes.avatarPicture} src={picturePath ? `file://${picturePath}` : defaultIcon} draggable={false} />
+          <img
+            alt="Icon"
+            className={classNames(
+              classes.avatarPicture,
+              !sidebarShortcutHints && classes.avatarPictureLarge,
+            )}
+            src={picturePath ? `file://${picturePath}` : defaultIcon}
+            draggable={false}
+          />
         ) : '+'}
       </div>
     </Badge>
-    {(id === 'add' || order < 9) && (
+    {sidebarShortcutHints && (id === 'add' || order < 9) && (
       <p className={classes.shortcutText}>{id === 'add' ? 'Add' : `${window.process.platform === 'darwin' ? '⌘' : 'Ctrl'} + ${order + 1}`}</p>
     )}
   </div>
@@ -138,11 +157,13 @@ WorkspaceSelector.propTypes = {
   onContextMenu: PropTypes.func,
   order: PropTypes.number,
   picturePath: PropTypes.string,
+  sidebarShortcutHints: PropTypes.bool.isRequired,
   transparentBackground: PropTypes.bool,
 };
 
 const mapStateToProps = (state, ownProps) => ({
   badgeCount: state.workspaceMetas[ownProps.id] ? state.workspaceMetas[ownProps.id].badgeCount : 0,
+  sidebarShortcutHints: state.preferences.sidebarShortcutHints,
 });
 
 export default connectComponent(