Add shortcuts sidebar to preferences page/dialog (#158)

2025-12-06 02:30:47 -08:00 · 2020-03-13 04:47:54 -05:00 · 2020-03-13 04:47:54 -05:00 · 3154378444
commit 3154378444
parent 20e032f22e
4 changed files with 601 additions and 500 deletions
--- a/PRIVACY.md
+++ b/PRIVACY.md
@ -19,7 +19,7 @@ Our websites use:
 * [Basin](https://usebasin.com/privacy) for form submissions.
 * [Cloudflare](https://www.cloudflare.com/privacypolicy/) for CDN and domain management.
 * [Google Tag Manager](https://support.google.com/analytics/answer/6004245?hl=en) and [Google Analytics](https://support.google.com/analytics/answer/6004245?hl=en) for analytics.
-* [Mailchimp](https://mailchimp.com/) newsletter.
+* [Mailchimp](https://mailchimp.com/) for newsletter.

 ---

--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@ -28,7 +28,7 @@
              Store
            </a>
            <div class="navbar-item has-dropdown is-hoverable">
-              <a class="navbar-link" href="/products">
+              <a class="navbar-link" href="https://atomery.com/products">
                Products
              </a>

--- a/public/windows/preferences.js
+++ b/public/windows/preferences.js
@ -14,7 +14,7 @@ const create = () => {
  const attachToMenubar = getPreference('attachToMenubar');

  win = new BrowserWindow({
-    width: 500,
+    width: 760,
    height: 600,
    resizable: false,
    maximizable: false,
--- a/src/components/preferences/index.js
+++ b/src/components/preferences/index.js
@ -1,18 +1,29 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';

 import Button from '@material-ui/core/Button';
 import Divider from '@material-ui/core/Divider';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import Paper from '@material-ui/core/Paper';
 import Switch from '@material-ui/core/Switch';
 import Typography from '@material-ui/core/Typography';

+import BuildIcon from '@material-ui/icons/Build';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import CodeIcon from '@material-ui/icons/Code';
+import LanguageIcon from '@material-ui/icons/Language';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import SecurityIcon from '@material-ui/icons/Security';
+import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt';
+import WidgetsIcon from '@material-ui/icons/Widgets';

 import { TimePicker } from '@material-ui/pickers';

@ -64,6 +75,16 @@ const styles = (theme) => ({
    overflow: 'hidden',
    whiteSpace: 'nowrap',
  },
+  sidebar: {
+    position: 'fixed',
+    width: 200,
+    color: theme.palette.text.primary,
+  },
+  inner: {
+    width: '100%',
+    maxWidth: 500,
+    float: 'right',
+  },
 });

 const getThemeString = (theme) => {
@ -195,9 +216,87 @@ const Preferences = ({
  unreadCountBadge,
  updaterInfo,
  updaterStatus,
-}) => (
+}) => {
+  const sections = {
+    general: {
+      text: 'General',
+      Icon: WidgetsIcon,
+      ref: useRef(),
+    },
+    notifications: {
+      text: 'Notifications',
+      Icon: NotificationsIcon,
+      ref: useRef(),
+    },
+    languages: {
+      text: 'Languages',
+      Icon: LanguageIcon,
+      ref: useRef(),
+    },
+    downloads: {
+      text: 'Downloads',
+      Icon: CloudDownloadIcon,
+      ref: useRef(),
+    },
+    privacy: {
+      text: 'Privacy & Security',
+      Icon: SecurityIcon,
+      ref: useRef(),
+    },
+    system: {
+      text: 'System',
+      Icon: BuildIcon,
+      ref: useRef(),
+    },
+    updates: {
+      text: 'Updates',
+      Icon: SystemUpdateAltIcon,
+      ref: useRef(),
+    },
+    advanced: {
+      text: 'Advanced',
+      Icon: CodeIcon,
+      ref: useRef(),
+    },
+    reset: {
+      text: 'Reset',
+      Icon: RotateLeftIcon,
+      ref: useRef(),
+    },
+    miscs: {
+      text: 'Miscellaneous',
+      Icon: MoreHorizIcon,
+      ref: useRef(),
+    },
+  };
+
+  return (
    <div className={classes.root}>
-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+      <div className={classes.sidebar}>
+        <List dense>
+          {Object.keys(sections).map((sectionKey, i) => {
+            const {
+              Icon, text, ref, hidden,
+            } = sections[sectionKey];
+            if (hidden) return null;
+            return (
+              <React.Fragment key={sectionKey}>
+                {i > 0 && <Divider />}
+                <ListItem button onClick={() => ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
+                  <ListItemIcon>
+                    <Icon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={text}
+                  />
+                </ListItem>
+              </React.Fragment>
+            );
+          })}
+        </List>
+      </div>
+      <div className={classes.inner}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.general.ref}>
          General
        </Typography>
        <Paper className={classes.paper}>
@ -357,7 +456,7 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.notifications.ref}>
          Notifications
        </Typography>
        <Paper className={classes.paper}>
@ -437,7 +536,7 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.languages.ref}>
          Languages
        </Typography>
        <Paper className={classes.paper}>
@ -485,7 +584,7 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.downloads.ref}>
          Downloads
        </Typography>
        <Paper className={classes.paper}>
@ -527,7 +626,7 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.privacy.ref}>
          Privacy &amp; Security
        </Typography>
        <Paper className={classes.paper}>
@ -573,8 +672,8 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
-      Default App
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.system.ref}>
+          System
        </Typography>
        <Paper className={classes.paper}>
          <List dense disablePadding>
@ -622,14 +721,7 @@ const Preferences = ({
                </Button>
              </ListItem>
            )}
-      </List>
-    </Paper>
-
-    <Typography variant="subtitle2" className={classes.sectionTitle}>
-      System
-    </Typography>
-    <Paper className={classes.paper}>
-      <List dense disablePadding>
+            <Divider />
            <StatedMenu
              id="openAtLogin"
              buttonElement={(
@ -646,7 +738,46 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.updates.ref}>
+          Updates
+        </Typography>
+        <Paper className={classes.paper}>
+          <List dense disablePadding>
+            <ListItem
+              button
+              onClick={() => requestCheckForUpdates(false)}
+              disabled={updaterStatus === 'checking-for-update'
+                || updaterStatus === 'download-progress'
+                || updaterStatus === 'download-progress'
+                || updaterStatus === 'update-available'}
+            >
+              <ListItemText
+                primary={updaterStatus === 'update-downloaded' ? 'Restart to Apply Updates' : 'Check for Updates'}
+                secondary={getUpdaterDesc(updaterStatus, updaterInfo)}
+              />
+              <ChevronRightIcon color="action" />
+            </ListItem>
+            <Divider />
+            <ListItem>
+              <ListItemText
+                primary="Receive pre-release updates"
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  edge="end"
+                  color="primary"
+                  checked={allowPrerelease}
+                  onChange={(e) => {
+                    requestSetPreference('allowPrerelease', e.target.checked);
+                    requestShowRequireRestartDialog();
+                  }}
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+          </List>
+        </Paper>
+
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.advanced.ref}>
          Advanced
        </Typography>
        <Paper className={classes.paper}>
@ -686,27 +817,10 @@ const Preferences = ({
              <ListItemText primary="CSS Code Injection" secondary={cssCodeInjection ? 'Set' : 'Not set'} />
              <ChevronRightIcon color="action" />
            </ListItem>
-        <Divider />
-        <ListItem>
-          <ListItemText
-            primary="Receive pre-release updates"
-          />
-          <ListItemSecondaryAction>
-            <Switch
-              edge="end"
-              color="primary"
-              checked={allowPrerelease}
-              onChange={(e) => {
-                requestSetPreference('allowPrerelease', e.target.checked);
-                requestShowRequireRestartDialog();
-              }}
-            />
-          </ListItemSecondaryAction>
-        </ListItem>
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.reset.ref}>
          Reset
        </Typography>
        <Paper className={classes.paper}>
@ -718,7 +832,7 @@ const Preferences = ({
          </List>
        </Paper>

-    <Typography variant="subtitle2" className={classes.sectionTitle}>
+        <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.miscs.ref}>
          Miscellaneous
        </Typography>
        <Paper className={classes.paper}>
@ -733,21 +847,6 @@ const Preferences = ({
              <ChevronRightIcon color="action" />
            </ListItem>
            <Divider />
-        <ListItem
-          button
-          onClick={() => requestCheckForUpdates(false)}
-          disabled={updaterStatus === 'checking-for-update'
-            || updaterStatus === 'download-progress'
-            || updaterStatus === 'download-progress'
-            || updaterStatus === 'update-available'}
-        >
-          <ListItemText
-            primary={updaterStatus === 'update-downloaded' ? 'Restart to Apply Updates' : 'Check for Updates'}
-            secondary={getUpdaterDesc(updaterStatus, updaterInfo)}
-          />
-          <ChevronRightIcon color="action" />
-        </ListItem>
-        <Divider />
            <ListItem button onClick={requestQuit}>
              <ListItemText primary="Quit" />
              <ChevronRightIcon color="action" />
@ -755,7 +854,9 @@ const Preferences = ({
          </List>
        </Paper>
      </div>
+    </div>
  );
+};

 Preferences.defaultProps = {
  cssCodeInjection: null,