From 3154378444208c4c74616ba72c09064eb9d6227e Mon Sep 17 00:00:00 2001 From: Quang Lam Date: Fri, 13 Mar 2020 04:47:54 -0500 Subject: [PATCH] Add shortcuts sidebar to preferences page/dialog (#158) --- PRIVACY.md | 2 +- docs/_layouts/default.html | 2 +- public/windows/preferences.js | 2 +- src/components/preferences/index.js | 1095 +++++++++++++++------------ 4 files changed, 601 insertions(+), 500 deletions(-) diff --git a/PRIVACY.md b/PRIVACY.md index 27585660..abe04c2a 100644 --- 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. --- diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 8486c773..b2f81084 100755 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -28,7 +28,7 @@ Store
- + Products diff --git a/public/windows/preferences.js b/public/windows/preferences.js index 7841243d..9a5852bb 100644 --- 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, diff --git a/src/components/preferences/index.js b/src/components/preferences/index.js index 1c96bb0a..a0e0b9ef 100644 --- 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,567 +216,647 @@ const Preferences = ({ unreadCountBadge, updaterInfo, updaterStatus, -}) => ( -
- - General - - - - - - - - )} - > - requestSetPreference('theme', 'automatic')}>System default - requestSetPreference('theme', 'light')}>Light - requestSetPreference('theme', 'dark')}>Dark - - - - - - { - requestSetPreference('sidebar', e.target.checked); - requestRealignActiveWorkspace(); - }} - /> - - - - - - - { - requestSetPreference('navigationBar', e.target.checked); - requestRealignActiveWorkspace(); - }} - /> - - - {window.process.platform === 'darwin' && ( - <> +}) => { + 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 ( +
+
+ + {Object.keys(sections).map((sectionKey, i) => { + const { + Icon, text, ref, hidden, + } = sections[sectionKey]; + if (hidden) return null; + return ( + + {i > 0 && } + ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })}> + + + + + + + ); + })} + +
+
+ + General + + + + + + + + )} + > + requestSetPreference('theme', 'automatic')}>System default + requestSetPreference('theme', 'light')}>Light + requestSetPreference('theme', 'dark')}>Dark + { - requestSetPreference('titleBar', e.target.checked); + requestSetPreference('sidebar', e.target.checked); requestRealignActiveWorkspace(); }} /> - - )} - {window.process.platform !== 'darwin' && ( - <> { - requestSetPreference('hideMenuBar', e.target.checked); - requestShowRequireRestartDialog(); + requestSetPreference('navigationBar', e.target.checked); + requestRealignActiveWorkspace(); }} /> - - )} - - - - - { - requestSetPreference('attachToMenubar', e.target.checked); - requestShowRequireRestartDialog(); - }} - /> - - - {window.process.platform === 'darwin' && ( - <> + {window.process.platform === 'darwin' && ( + <> + + + + + { + requestSetPreference('titleBar', e.target.checked); + requestRealignActiveWorkspace(); + }} + /> + + + + )} + {window.process.platform !== 'darwin' && ( + <> + + + + + { + requestSetPreference('hideMenuBar', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + )} - Navigate between pages with 3-finger gestures. -
- To enable it, you also need to change - - macOS Preferences > Trackpad > More Gestures > Swipe between page - - to - Swipe with three fingers - or - Swipe with two or three fingers. - - )} + primary={window.process.platform === 'win32' + ? 'Attach to taskbar' : 'Attach to menu bar'} + secondary={window.process.platform !== 'linux' ? 'Tip: Right-click on app icon to access context menu.' : null} /> { - requestSetPreference('swipeToNavigate', e.target.checked); + requestSetPreference('attachToMenubar', e.target.checked); requestShowRequireRestartDialog(); }} /> - - )} - - + {window.process.platform === 'darwin' && ( + <> + + + + Navigate between pages with 3-finger gestures. +
+ To enable it, you also need to change + + macOS Preferences > Trackpad > More Gestures > Swipe between page + + to + Swipe with three fingers + or + Swipe with two or three fingers. + + )} + /> + + { + requestSetPreference('swipeToNavigate', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + )} + + - - Notifications - - - - - - - - - - - Automatically disable notifications by schedule: -
- requestSetPreference('pauseNotificationsByScheduleFrom', d.toString())} - disabled={!pauseNotificationsBySchedule} - /> - requestSetPreference('pauseNotificationsByScheduleTo', d.toString())} - disabled={!pauseNotificationsBySchedule} - /> -
- ( - {window.Intl.DateTimeFormat().resolvedOptions().timeZone} - ) - - - { - requestSetPreference('pauseNotificationsBySchedule', e.target.checked); - }} - /> - - - - - - - { - requestSetPreference('pauseNotificationsMuteAudio', e.target.checked); - }} - /> - - - {window.process.platform === 'darwin' && ( - <> + + Notifications + + + + + + + - + + Automatically disable notifications by schedule: +
+ requestSetPreference('pauseNotificationsByScheduleFrom', d.toString())} + disabled={!pauseNotificationsBySchedule} + /> + requestSetPreference('pauseNotificationsByScheduleTo', d.toString())} + disabled={!pauseNotificationsBySchedule} + /> +
+ ( + {window.Intl.DateTimeFormat().resolvedOptions().timeZone} + ) + { - requestSetPreference('unreadCountBadge', e.target.checked); + requestSetPreference('pauseNotificationsBySchedule', e.target.checked); + }} + /> + + + + + + + { + requestSetPreference('pauseNotificationsMuteAudio', e.target.checked); + }} + /> + + + {window.process.platform === 'darwin' && ( + <> + + + + + { + requestSetPreference('unreadCountBadge', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + )} + + + + + Languages + + + + + + + { + requestSetPreference('spellChecker', e.target.checked); requestShowRequireRestartDialog(); }} /> - - )} - - + + + hunspellLanguagesMap[code]).join(' | ')} + /> + + + )} + > + {Object.keys(hunspellLanguagesMap).map((code) => ( + { + requestSetPreference('spellCheckerLanguages', [code]); + requestShowRequireRestartDialog(); + }} + > + {hunspellLanguagesMap[code]} + + ))} + + + - - Languages - - - - - - - { - requestSetPreference('spellChecker', e.target.checked); - requestShowRequireRestartDialog(); + + Downloads + + + + { + remote.dialog.showOpenDialog(remote.getCurrentWindow(), { + properties: ['openDirectory'], + }).then((result) => { + if (!result.canceled && result.filePaths) { + requestSetPreference('downloadPath', result.filePaths[0]); + } + }).catch((err) => { + console.log(err); // eslint-disable-line no-console + }); }} - /> - - - - + > hunspellLanguagesMap[code]).join(' | ')} + primary="Download Location" + secondary={downloadPath} /> - )} - > - {Object.keys(hunspellLanguagesMap).map((code) => ( - { - requestSetPreference('spellCheckerLanguages', [code]); - requestShowRequireRestartDialog(); - }} - > - {hunspellLanguagesMap[code]} - - ))} - - - + + + + + { + requestSetPreference('askForDownloadPath', e.target.checked); + }} + /> + + + + - - Downloads - - - - { - remote.dialog.showOpenDialog(remote.getCurrentWindow(), { - properties: ['openDirectory'], - }).then((result) => { - if (!result.canceled && result.filePaths) { - requestSetPreference('downloadPath', result.filePaths[0]); - } - }).catch((err) => { - console.log(err); // eslint-disable-line no-console - }); - }} - > - - - - - - - - { - requestSetPreference('askForDownloadPath', e.target.checked); - }} - /> - - - - - - - Privacy & Security - - - - - - - { - requestSetPreference('rememberLastPageVisited', e.target.checked); - requestShowRequireRestartDialog(); - }} - /> - - - - - - - { - requestSetPreference('shareWorkspaceBrowsingData', e.target.checked); - requestShowRequireRestartDialog(); - }} - /> - - - - - - - - - requestOpenInBrowser('https://singleboxapp.com/privacy')}> - - - - - - - Default App - - - - {isDefaultMailClient ? ( - - - - ) : ( - - - - - )} - - {isDefaultWebBrowser ? ( - - - - ) : ( - - - - - )} - - - - - System - - - - - + + Privacy & Security + + + + + + + { + requestSetPreference('rememberLastPageVisited', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + + + + { + requestSetPreference('shareWorkspaceBrowsingData', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + + - )} - > - requestSetSystemPreference('openAtLogin', 'yes')}>Yes - requestSetSystemPreference('openAtLogin', 'yes-hidden')}>Yes, but minimized - requestSetSystemPreference('openAtLogin', 'no')}>No - - - + + requestOpenInBrowser('https://singleboxapp.com/privacy')}> + + + + - - Advanced - - - - - - - { - requestSetPreference('hibernateUnusedWorkspacesAtLaunch', e.target.checked); - }} - /> - - - - - - - - - requestShowCodeInjectionWindow('js')}> - - - - - requestShowCodeInjectionWindow('css')}> - - - - - - - - { - requestSetPreference('allowPrerelease', e.target.checked); - requestShowRequireRestartDialog(); - }} - /> - - - - + + System + + + + {isDefaultMailClient ? ( + + + + ) : ( + + + + + )} + + {isDefaultWebBrowser ? ( + + + + ) : ( + + + + + )} + + + + + + )} + > + requestSetSystemPreference('openAtLogin', 'yes')}>Yes + requestSetSystemPreference('openAtLogin', 'yes-hidden')}>Yes, but minimized + requestSetSystemPreference('openAtLogin', 'no')}>No + + + - - Reset - - - - - - - - - + + Updates + + + + requestCheckForUpdates(false)} + disabled={updaterStatus === 'checking-for-update' + || updaterStatus === 'download-progress' + || updaterStatus === 'download-progress' + || updaterStatus === 'update-available'} + > + + + + + + + + { + requestSetPreference('allowPrerelease', e.target.checked); + requestShowRequireRestartDialog(); + }} + /> + + + + - - Miscellaneous - - - - - - - - - - - - - - requestCheckForUpdates(false)} - disabled={updaterStatus === 'checking-for-update' - || updaterStatus === 'download-progress' - || updaterStatus === 'download-progress' - || updaterStatus === 'update-available'} - > - - - - - - - - - - -
-); + + Advanced + + + + + + + { + requestSetPreference('hibernateUnusedWorkspacesAtLaunch', e.target.checked); + }} + /> + + + + + + + + + requestShowCodeInjectionWindow('js')}> + + + + + requestShowCodeInjectionWindow('css')}> + + + + + + + + Reset + + + + + + + + + + + + Miscellaneous + + + + + + + + + + + + + + + + + + + +
+
+ ); +}; Preferences.defaultProps = { cssCodeInjection: null,