From ea705c4ee3760ebad73988e96c50faef52c1cacf Mon Sep 17 00:00:00 2001 From: Vijay Raghavan Aravamudhan Date: Mon, 2 Aug 2021 18:29:05 +0000 Subject: Fixed #1726: Revamp menu items with correct accelerators. (#1728) --- src/lib/Menu.js | 475 +++++++------------------------------------------------- 1 file changed, 55 insertions(+), 420 deletions(-) (limited to 'src/lib/Menu.js') diff --git a/src/lib/Menu.js b/src/lib/Menu.js index fe12f7dc4..89e6e0e0b 100644 --- a/src/lib/Menu.js +++ b/src/lib/Menu.js @@ -6,7 +6,7 @@ import { autorun, observable } from 'mobx'; import { defineMessages } from 'react-intl'; import { CUSTOM_WEBSITE_RECIPE_ID, GITHUB_FERDI_URL, LIVE_API_FERDI_WEBSITE } from '../config'; import { - cmdKey, ctrlKey, isLinux, isMac, aboutAppDetails, termsBase, + cmdKey, isLinux, isMac, aboutAppDetails, termsBase, } from '../environment'; import { announcementsStore } from '../features/announcements'; import { announcementActions } from '../features/announcements/actions'; @@ -20,37 +20,9 @@ const menuItems = defineMessages({ id: 'menu.edit', defaultMessage: '!!!Edit', }, - undo: { - id: 'menu.edit.undo', - defaultMessage: '!!!Undo', - }, - redo: { - id: 'menu.edit.redo', - defaultMessage: '!!!Redo', - }, - cut: { - id: 'menu.edit.cut', - defaultMessage: '!!!Cut', - }, - copy: { - id: 'menu.edit.copy', - defaultMessage: '!!!Copy', - }, - paste: { - id: 'menu.edit.paste', - defaultMessage: '!!!Paste', - }, - pasteAndMatchStyle: { - id: 'menu.edit.pasteAndMatchStyle', - defaultMessage: '!!!Paste And Match Style', - }, - delete: { - id: 'menu.edit.delete', - defaultMessage: '!!!Delete', - }, - selectAll: { - id: 'menu.edit.selectAll', - defaultMessage: '!!!Select All', + view: { + id: 'menu.view', + defaultMessage: '!!!View', }, findInPage: { id: 'menu.edit.findInPage', @@ -88,30 +60,6 @@ const menuItems = defineMessages({ id: 'menu.view.forward', defaultMessage: '!!!Forward', }, - resetZoom: { - id: 'menu.view.resetZoom', - defaultMessage: '!!!Actual Size', - }, - zoomIn: { - id: 'menu.view.zoomIn', - defaultMessage: '!!!Zoom In', - }, - zoomOut: { - id: 'menu.view.zoomOut', - defaultMessage: '!!!Zoom Out', - }, - enterFullScreen: { - id: 'menu.view.enterFullScreen', - defaultMessage: '!!!Enter Full Screen', - }, - exitFullScreen: { - id: 'menu.view.exitFullScreen', - defaultMessage: '!!!Exit Full Screen', - }, - toggleFullScreen: { - id: 'menu.view.toggleFullScreen', - defaultMessage: '!!!Toggle Full Screen', - }, toggleDarkMode: { id: 'menu.view.toggleDarkMode', defaultMessage: '!!!Toggle Dark Mode', @@ -132,8 +80,8 @@ const menuItems = defineMessages({ id: 'menu.view.reloadService', defaultMessage: '!!!Reload Service', }, - reloadFranz: { - id: 'menu.view.reloadFranz', + reloadFerdi: { + id: 'menu.view.reloadFerdi', defaultMessage: '!!!Reload Ferdi', }, lockFerdi: { @@ -144,14 +92,6 @@ const menuItems = defineMessages({ id: 'menu.view.reloadTodos', defaultMessage: '!!!Reload ToDos', }, - minimize: { - id: 'menu.window.minimize', - defaultMessage: '!!!Minimize', - }, - close: { - id: 'menu.window.close', - defaultMessage: '!!!Close', - }, learnMore: { id: 'menu.help.learnMore', defaultMessage: '!!!Learn More', @@ -200,26 +140,10 @@ const menuItems = defineMessages({ id: 'menu.file', defaultMessage: '!!!File', }, - view: { - id: 'menu.view', - defaultMessage: '!!!View', - }, services: { id: 'menu.services', defaultMessage: '!!!Services', }, - window: { - id: 'menu.window', - defaultMessage: '!!!Window', - }, - help: { - id: 'menu.help', - defaultMessage: '!!!Help', - }, - about: { - id: 'menu.app.about', - defaultMessage: '!!!About Ferdi', - }, announcement: { id: 'menu.app.announcement', defaultMessage: '!!!What\'s new?', @@ -232,26 +156,10 @@ const menuItems = defineMessages({ id: 'menu.app.checkForUpdates', defaultMessage: '!!!Check for updates', }, - hide: { - id: 'menu.app.hide', - defaultMessage: '!!!Hide', - }, - hideOthers: { - id: 'menu.app.hideOthers', - defaultMessage: '!!!Hide Others', - }, - unhide: { - id: 'menu.app.unhide', - defaultMessage: '!!!Unhide', - }, autohideMenuBar: { id: 'menu.app.autohideMenuBar', defaultMessage: '!!!Auto-hide menu bar', }, - quit: { - id: 'menu.app.quit', - defaultMessage: '!!!Quit', - }, addNewService: { id: 'menu.services.addNewService', defaultMessage: '!!!Add New Service...', @@ -318,57 +226,44 @@ function getActiveWebview() { return window.ferdi.stores.services.active.webview; } -const _templateFactory = (intl, locked) => [ +const _titleBarTemplateFactory = (intl, locked) => [ { label: intl.formatMessage(menuItems.edit), + accelerator: 'Alt+E', submenu: [ { - label: intl.formatMessage(menuItems.undo), role: 'undo', }, { - label: intl.formatMessage(menuItems.redo), role: 'redo', }, { type: 'separator', }, { - label: intl.formatMessage(menuItems.cut), - accelerator: 'Cmd+X', - selector: 'cut:', + role: 'cut', }, { - label: intl.formatMessage(menuItems.copy), - accelerator: 'Cmd+C', - selector: 'copy:', + role: 'copy', }, { - label: intl.formatMessage(menuItems.paste), - accelerator: 'Cmd+V', - selector: 'paste:', + role: 'paste', }, { - label: intl.formatMessage(menuItems.pasteAndMatchStyle), - accelerator: 'Cmd+Shift+V', - selector: 'pasteAndMatchStyle:', - click() { - getActiveWebview().pasteAndMatchStyle(); - }, + role: 'pasteAndMatchStyle', + accelerator: `${cmdKey}+Shift+V`, // Override the accelerator since this adds new key combo in macos }, { - label: intl.formatMessage(menuItems.delete), role: 'delete', }, { - label: intl.formatMessage(menuItems.selectAll), - accelerator: 'Cmd+A', - selector: 'selectAll:', + role: 'selectall', }, ], }, { label: intl.formatMessage(menuItems.view), + accelerator: 'Alt+V', visible: !locked, submenu: [ { @@ -376,7 +271,7 @@ const _templateFactory = (intl, locked) => [ }, { label: intl.formatMessage(menuItems.openQuickSwitch), - accelerator: 'CmdOrCtrl+S', + accelerator: `${cmdKey}+S`, click() { window.ferdi.features.quickSwitch.state.isModalVisible = true; }, @@ -386,7 +281,7 @@ const _templateFactory = (intl, locked) => [ }, { label: intl.formatMessage(menuItems.findInPage), - accelerator: 'CmdOrCtrl+F', + accelerator: `${cmdKey}+F`, click() { // Check if there is a service active if (!window.ferdi.stores.services.active) return; @@ -407,33 +302,29 @@ const _templateFactory = (intl, locked) => [ }, { label: intl.formatMessage(menuItems.back), - accelerator: 'CmdOrCtrl+Left', + accelerator: `${cmdKey}+Left`, click() { - const activeService = getActiveWebview(); - activeService.goBack(); + getActiveWebview().goBack(); }, }, { label: intl.formatMessage(menuItems.forward), - accelerator: 'CmdOrCtrl+Right', + accelerator: `${cmdKey}+Right`, click() { - const activeService = getActiveWebview(); - activeService.goForward(); + getActiveWebview().goForward(); }, }, { type: 'separator', }, { - label: intl.formatMessage(menuItems.resetZoom), - accelerator: 'Cmd+0', + role: 'resetZoom', click() { getActiveWebview().setZoomLevel(0); }, }, { - label: intl.formatMessage(menuItems.zoomIn), - accelerator: 'Cmd+plus', + role: 'zoomIn', click() { const activeService = getActiveWebview(); const level = activeService.getZoomLevel(); @@ -443,8 +334,7 @@ const _templateFactory = (intl, locked) => [ }, }, { - label: intl.formatMessage(menuItems.zoomOut), - accelerator: 'Cmd+-', + role: 'zoomOut', click() { const activeService = getActiveWebview(); const level = activeService.getZoomLevel(); @@ -457,10 +347,7 @@ const _templateFactory = (intl, locked) => [ type: 'separator', }, { - label: app.mainWindow.isFullScreen() // label doesn't work, gets overridden by Electron - ? intl.formatMessage(menuItems.exitFullScreen) - : intl.formatMessage(menuItems.enterFullScreen), - role: 'togglefullscreen', + role: 'toggleFullScreen', }, { label: intl.formatMessage(menuItems.toggleDarkMode), @@ -480,11 +367,13 @@ const _templateFactory = (intl, locked) => [ }, { label: intl.formatMessage(menuItems.services), + accelerator: 'Alt+S', visible: !locked, submenu: [], }, { label: intl.formatMessage(menuItems.workspaces), + accelerator: 'Alt+W', submenu: [], visible: !locked && workspaceStore.isFeatureEnabled, }, @@ -494,21 +383,17 @@ const _templateFactory = (intl, locked) => [ visible: !locked && todosStore.isFeatureEnabled, }, { - label: intl.formatMessage(menuItems.window), role: 'window', submenu: [ { - label: intl.formatMessage(menuItems.minimize), role: 'minimize', }, { - label: intl.formatMessage(menuItems.close), role: 'close', }, ], }, { - label: intl.formatMessage(menuItems.help), role: 'help', submenu: [ { @@ -516,276 +401,18 @@ const _templateFactory = (intl, locked) => [ click() { shell.openExternal(LIVE_API_FERDI_WEBSITE); }, }, { - label: intl.formatMessage(menuItems.announcement), - click: () => { - announcementActions.show(); - }, - visible: !locked && window.ferdi.stores.user.isLoggedIn && announcementsStore.areNewsAvailable, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.support), - click() { shell.openExternal(`${LIVE_API_FERDI_WEBSITE}/contact`); }, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.tos), - click() { shell.openExternal(`${termsBase()}/terms`); }, - }, - { - label: intl.formatMessage(menuItems.privacy), - click() { shell.openExternal(`${termsBase()}/privacy`); }, - }, - ], - }, -]; - -const _titleBarTemplateFactory = (intl, locked) => [ - { - label: intl.formatMessage(menuItems.edit), - accelerator: 'Alt+E', - submenu: [ - { - label: intl.formatMessage(menuItems.undo), - accelerator: `${ctrlKey}+Z`, - click() { - getActiveWebview().undo(); - }, - }, - { - label: intl.formatMessage(menuItems.redo), - accelerator: `${ctrlKey}+Y`, - click() { - getActiveWebview().redo(); - }, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.cut), - accelerator: `${ctrlKey}+X`, - click() { - getActiveWebview().cut(); - }, - }, - { - label: intl.formatMessage(menuItems.copy), - accelerator: `${ctrlKey}+C`, - click() { - getActiveWebview().copy(); - }, - }, - { - label: intl.formatMessage(menuItems.paste), - accelerator: `${ctrlKey}+V`, - role: 'paste', - click() { - getActiveWebview().paste(); - }, - }, - { - label: intl.formatMessage(menuItems.pasteAndMatchStyle), - accelerator: `${ctrlKey}+Shift+V`, - role: 'pasteAndMatchStyle', - click() { - getActiveWebview().pasteAndMatchStyle(); - }, - }, - { - label: intl.formatMessage(menuItems.delete), - click() { - getActiveWebview().delete(); - }, - }, - { - label: intl.formatMessage(menuItems.selectAll), - accelerator: `${ctrlKey}+A`, - click() { - getActiveWebview().selectAll(); - }, - }, - ], - }, - { - label: intl.formatMessage(menuItems.view), - accelerator: 'Alt+V', - visible: !locked, - submenu: [ - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.openQuickSwitch), - accelerator: 'CmdOrCtrl+S', - click() { - window.ferdi.features.quickSwitch.state.isModalVisible = true; - }, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.findInPage), - accelerator: 'CmdOrCtrl+F', - click() { - // Check if there is a service active - if (!window.ferdi.stores.services.active) return; - - // Focus webview so find in page popup gets focused - window.ferdi.stores.services.active.webview.focus(); - - const currentService = window.ferdi.stores.services.active.id; - window.ferdi.actions.service.sendIPCMessage({ - serviceId: currentService, - channel: 'find-in-page', - args: {}, - }); - }, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.back), - accelerator: 'CmdOrCtrl+Left', - click() { - const activeService = getActiveWebview(); - activeService.goBack(); - }, - }, - { - label: intl.formatMessage(menuItems.forward), - accelerator: 'CmdOrCtrl+Right', - click() { - const activeService = getActiveWebview(); - activeService.goForward(); - }, - }, - { - type: 'separator', - }, - { - label: intl.formatMessage(menuItems.resetZoom), - accelerator: `${ctrlKey}+0`, - click() { - getActiveWebview().setZoomLevel(0); - }, - }, - { - label: intl.formatMessage(menuItems.zoomIn), - accelerator: `${ctrlKey}+=`, - click() { - const activeService = getActiveWebview(); - const level = activeService.getZoomLevel(); - - // level 9 =~ +300% and setZoomLevel wouldnt zoom in further - if (level < 9) activeService.setZoomLevel(level + 1); - }, - }, - { - label: intl.formatMessage(menuItems.zoomOut), - accelerator: `${ctrlKey}+-`, - click() { - const activeService = getActiveWebview(); - const level = activeService.getZoomLevel(); - - // level -9 =~ -50% and setZoomLevel wouldnt zoom out further - if (level > -9) activeService.setZoomLevel(level - 1); - }, + label: intl.formatMessage(menuItems.changelog), + click() { shell.openExternal(`${GITHUB_FERDI_URL}/ferdi/blob/master/CHANGELOG.md`); }, }, { type: 'separator', }, { - label: app.mainWindow.isFullScreen() // label doesn't work, gets overridden by Electron - ? intl.formatMessage(menuItems.exitFullScreen) - : intl.formatMessage(menuItems.enterFullScreen), - accelerator: 'F11', - click(menuItem, browserWindow) { - browserWindow.setFullScreen(!browserWindow.isFullScreen()); - }, - }, - { - label: intl.formatMessage(menuItems.toggleDarkMode), - type: 'checkbox', - accelerator: `${cmdKey}+Shift+D`, - checked: window.ferdi.stores.settings.app.darkMode, - click: () => { - window.ferdi.actions.settings.update({ - type: 'app', - data: { - darkMode: !window.ferdi.stores.settings.app.darkMode, - }, - }); - }, - }, - { - label: intl.formatMessage(menuItems.autohideMenuBar), - type: 'checkbox', - checked: window.ferdi.stores.settings.app.autohideMenuBar, + label: intl.formatMessage(menuItems.announcement), click: () => { - window.ferdi.actions.settings.update({ - type: 'app', - data: { - autohideMenuBar: !window.ferdi.stores.settings.app.autohideMenuBar, - }, - }); - }, - }, - ], - }, - { - label: intl.formatMessage(menuItems.services), - accelerator: 'Alt+S', - visible: !locked, - submenu: [], - }, - { - label: intl.formatMessage(menuItems.workspaces), - accelerator: 'Alt+W', - submenu: [], - visible: !locked && workspaceStore.isFeatureEnabled, - }, - { - label: intl.formatMessage(menuItems.todos), - submenu: [], - visible: !locked && todosStore.isFeatureEnabled, - }, - { - label: intl.formatMessage(menuItems.window), - submenu: [ - { - label: intl.formatMessage(menuItems.minimize), - accelerator: 'Ctrl+M', - click(menuItem, browserWindow) { - browserWindow.minimize(); + announcementActions.show(); }, - }, - { - label: intl.formatMessage(menuItems.close), - accelerator: 'Ctrl+W', - click(menuItem, browserWindow) { - browserWindow.close(); - }, - }, - ], - }, - { - label: '?', - accelerator: 'Alt+?', - submenu: [ - { - label: intl.formatMessage(menuItems.learnMore), - click() { shell.openExternal(LIVE_API_FERDI_WEBSITE); }, - }, - { - label: intl.formatMessage(menuItems.changelog), - click() { shell.openExternal(`${GITHUB_FERDI_URL}/ferdi/blob/master/CHANGELOG.md`); }, + enabled: !locked && window.ferdi.stores.user.isLoggedIn && announcementsStore.areNewsAvailable, }, { type: 'separator', @@ -840,11 +467,25 @@ export default class FranzMenu { } const { intl } = window.ferdi; - const tpl = isMac - ? _templateFactory(intl, this.stores.settings.app.locked) - : _titleBarTemplateFactory(intl, this.stores.settings.app.locked); + const tpl = _titleBarTemplateFactory(intl, this.stores.settings.app.locked); const { actions } = this; + if (!isMac) { + tpl[1].submenu.push({ + label: intl.formatMessage(menuItems.autohideMenuBar), + type: 'checkbox', + checked: window.ferdi.stores.settings.app.autohideMenuBar, + click: () => { + window.ferdi.actions.settings.update({ + type: 'app', + data: { + autohideMenuBar: !window.ferdi.stores.settings.app.autohideMenuBar, + }, + }); + }, + }); + } + if (!this.stores.settings.app.locked) { tpl[1].submenu.push({ type: 'separator', @@ -891,7 +532,7 @@ export default class FranzMenu { } }, }, { - label: intl.formatMessage(menuItems.reloadFranz), + label: intl.formatMessage(menuItems.reloadFerdi), accelerator: `${cmdKey}+Shift+R`, click: () => { window.location.reload(); @@ -906,7 +547,7 @@ export default class FranzMenu { type: 'separator', }, { label: intl.formatMessage(menuItems.lockFerdi), - accelerator: 'CmdOrCtrl+Shift+L', + accelerator: `${cmdKey}+Shift+L`, enabled: this.stores.user.isLoggedIn && this.stores.settings.app.lockingFeatureEnabled, click() { actions.settings.update({ @@ -934,7 +575,7 @@ export default class FranzMenu { tpl[0].submenu.unshift({ label: intl.formatMessage(menuItems.touchId), - accelerator: 'CmdOrCtrl+Shift+L', + accelerator: `${cmdKey}+Shift+L`, visible: touchIdEnabled, click() { systemPreferences.promptTouchID(intl.formatMessage(menuItems.touchIdPrompt)).then(() => { @@ -957,7 +598,6 @@ export default class FranzMenu { accelerator: 'Alt+F', submenu: [ { - label: intl.formatMessage(menuItems.about), role: 'about', }, { @@ -965,7 +605,7 @@ export default class FranzMenu { }, { label: intl.formatMessage(menuItems.settings), - accelerator: 'CmdOrCtrl+,', + accelerator: `${cmdKey}+,`, click: () => { this.actions.ui.openSettings({ path: 'app' }); }, @@ -992,22 +632,18 @@ export default class FranzMenu { type: 'separator', }, { - label: intl.formatMessage(menuItems.hide), role: 'hide', }, { - label: intl.formatMessage(menuItems.hideOthers), - role: 'hideothers', + role: 'hideOthers', }, { - label: intl.formatMessage(menuItems.unhide), role: 'unhide', }, { type: 'separator', }, { - label: intl.formatMessage(menuItems.quit), role: 'quit', click() { app.quit(); @@ -1017,7 +653,7 @@ export default class FranzMenu { }); const about = { - label: intl.formatMessage(menuItems.about), + role: 'about', click: () => { dialog.showMessageBox({ type: 'info', @@ -1067,7 +703,6 @@ export default class FranzMenu { type: 'separator', }, { - label: intl.formatMessage(menuItems.quit), role: 'quit', accelerator: 'Ctrl+Q', click() { -- cgit v1.2.3-54-g00ecf