diff options
author | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2021-10-09 21:25:20 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-09 21:25:20 +0530 |
commit | c4b6f6296ede86289ee1c814f5e9d19ac8be229d (patch) | |
tree | 059fe86cc726bc6b489d3f42a74525da6c9ee828 | |
parent | 5.6.3-nightly.28 [skip ci] (diff) | |
download | ferdium-app-c4b6f6296ede86289ee1c814f5e9d19ac8be229d.tar.gz ferdium-app-c4b6f6296ede86289ee1c814f5e9d19ac8be229d.tar.zst ferdium-app-c4b6f6296ede86289ee1c814f5e9d19ac8be229d.zip |
Control the long-press hint for service icon via a preference (#2043)
Co-authored-by: mhatvan <markus_hatvan@aon.at>
-rw-r--r-- | src/components/services/tabs/TabItem.js | 59 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 1 | ||||
-rw-r--r-- | src/config.ts | 2 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 10 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 |
5 files changed, 46 insertions, 27 deletions
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index d789b6425..ed8430b89 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -2,16 +2,17 @@ import { Menu, dialog, app } from '@electron/remote'; | |||
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | import PropTypes from 'prop-types'; | 4 | import PropTypes from 'prop-types'; |
5 | import { observer } from 'mobx-react'; | 5 | import { inject, observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | import { SortableElement } from 'react-sortable-hoc'; | 7 | import { SortableElement } from 'react-sortable-hoc'; |
8 | import injectSheet from 'react-jss'; | 8 | import injectSheet from 'react-jss'; |
9 | import ms from 'ms'; | 9 | import ms from 'ms'; |
10 | 10 | ||
11 | import { observable, autorun } from 'mobx'; | 11 | import { observable, autorun, reaction } from 'mobx'; |
12 | import ServiceModel from '../../../models/Service'; | 12 | import ServiceModel from '../../../models/Service'; |
13 | import { cmdOrCtrlShortcutKey } from '../../../environment'; | 13 | import { cmdOrCtrlShortcutKey } from '../../../environment'; |
14 | import globalMessages from '../../../i18n/globalMessages'; | 14 | import globalMessages from '../../../i18n/globalMessages'; |
15 | import SettingsStore from '../../../stores/SettingsStore'; | ||
15 | 16 | ||
16 | const IS_SERVICE_DEBUGGING_ENABLED = ( | 17 | const IS_SERVICE_DEBUGGING_ENABLED = ( |
17 | localStorage.getItem('debug') || '' | 18 | localStorage.getItem('debug') || '' |
@@ -112,6 +113,7 @@ const styles = { | |||
112 | }; | 113 | }; |
113 | 114 | ||
114 | @injectSheet(styles) | 115 | @injectSheet(styles) |
116 | @inject('stores') | ||
115 | @observer | 117 | @observer |
116 | class TabItem extends Component { | 118 | class TabItem extends Component { |
117 | static propTypes = { | 119 | static propTypes = { |
@@ -131,6 +133,9 @@ class TabItem extends Component { | |||
131 | wakeUpService: PropTypes.func.isRequired, | 133 | wakeUpService: PropTypes.func.isRequired, |
132 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, | 134 | showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired, |
133 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | 135 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, |
136 | stores: PropTypes.shape({ | ||
137 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | ||
138 | }).isRequired, | ||
134 | }; | 139 | }; |
135 | 140 | ||
136 | @observable isPolled = false; | 141 | @observable isPolled = false; |
@@ -142,37 +147,37 @@ class TabItem extends Component { | |||
142 | this.state = { | 147 | this.state = { |
143 | showShortcutIndex: false, | 148 | showShortcutIndex: false, |
144 | }; | 149 | }; |
150 | |||
151 | reaction( | ||
152 | () => this.props.stores.settings.app.enableLongPressServiceHint, | ||
153 | () => { | ||
154 | this.checkForLongPress( | ||
155 | this.props.stores.settings.app.enableLongPressServiceHint, | ||
156 | ); | ||
157 | }, | ||
158 | ); | ||
145 | } | 159 | } |
146 | 160 | ||
147 | handleShowShortcutIndex = () => { | 161 | handleShortcutIndex = (event, showShortcutIndex = true) => { |
148 | this.setState({ showShortcutIndex: true }); | 162 | if (event.key === 'Shift') { |
163 | this.setState({ showShortcutIndex }); | ||
164 | } | ||
149 | }; | 165 | }; |
150 | 166 | ||
151 | checkForLongPress = () => { | 167 | checkForLongPress = enableLongPressServiceHint => { |
152 | let longpressDelay = null; | 168 | if (enableLongPressServiceHint) { |
153 | const longpressDelayDuration = 1000; | 169 | document.addEventListener('keydown', e => { |
154 | 170 | this.handleShortcutIndex(e); | |
155 | document.addEventListener( | 171 | }); |
156 | 'keydown', | ||
157 | e => { | ||
158 | if (e.ctrlKey || e.metaKey) { | ||
159 | longpressDelay = setTimeout( | ||
160 | this.handleShowShortcutIndex, | ||
161 | longpressDelayDuration, | ||
162 | ); | ||
163 | } | ||
164 | }, | ||
165 | { capture: true }, | ||
166 | ); | ||
167 | 172 | ||
168 | document.addEventListener('keyup', () => { | 173 | document.addEventListener('keyup', e => { |
169 | clearTimeout(longpressDelay); | 174 | this.handleShortcutIndex(e, false); |
170 | this.setState({ showShortcutIndex: false }); | 175 | }); |
171 | }); | 176 | } |
172 | }; | 177 | }; |
173 | 178 | ||
174 | componentDidMount() { | 179 | componentDidMount() { |
175 | const { service } = this.props; | 180 | const { service, stores } = this.props; |
176 | 181 | ||
177 | if (IS_SERVICE_DEBUGGING_ENABLED) { | 182 | if (IS_SERVICE_DEBUGGING_ENABLED) { |
178 | autorun(() => { | 183 | autorun(() => { |
@@ -194,7 +199,7 @@ class TabItem extends Component { | |||
194 | }); | 199 | }); |
195 | } | 200 | } |
196 | 201 | ||
197 | this.checkForLongPress(); | 202 | this.checkForLongPress(stores.settings.app.enableLongPressServiceHint); |
198 | } | 203 | } |
199 | 204 | ||
200 | render() { | 205 | render() { |
@@ -364,7 +369,7 @@ class TabItem extends Component { | |||
364 | /> | 369 | /> |
365 | </> | 370 | </> |
366 | )} | 371 | )} |
367 | {shortcutIndex && this.state.showShortcutIndex && ( | 372 | {shortcutIndex <= 9 && this.state.showShortcutIndex && ( |
368 | <span className="tab-item__shortcut-index">{shortcutIndex}</span> | 373 | <span className="tab-item__shortcut-index">{shortcutIndex}</span> |
369 | )} | 374 | )} |
370 | </li> | 375 | </li> |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index c04835a5f..40242858a 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -550,6 +550,7 @@ class EditSettingsForm extends Component { | |||
550 | 550 | ||
551 | <Hr /> | 551 | <Hr /> |
552 | <Select field={form.$('iconSize')} /> | 552 | <Select field={form.$('iconSize')} /> |
553 | <Toggle field={form.$('enableLongPressServiceHint')} /> | ||
553 | 554 | ||
554 | <Hr /> | 555 | <Hr /> |
555 | 556 | ||
diff --git a/src/config.ts b/src/config.ts index 9aca70ba3..e1e8230c2 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -180,6 +180,7 @@ export const CUSTOM_WEBSITE_RECIPE_ID = 'franz-custom-website'; | |||
180 | export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar | 180 | export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar |
181 | 181 | ||
182 | export const DEFAULT_APP_SETTINGS = { | 182 | export const DEFAULT_APP_SETTINGS = { |
183 | autoLaunchOnStart: false, | ||
183 | autoLaunchInBackground: false, | 184 | autoLaunchInBackground: false, |
184 | runInBackground: true, | 185 | runInBackground: true, |
185 | reloadAfterResume: true, | 186 | reloadAfterResume: true, |
@@ -233,4 +234,5 @@ export const DEFAULT_APP_SETTINGS = { | |||
233 | useVerticalStyle: false, | 234 | useVerticalStyle: false, |
234 | alwaysShowWorkspaces: false, | 235 | alwaysShowWorkspaces: false, |
235 | liftSingleInstanceLock: false, | 236 | liftSingleInstanceLock: false, |
237 | enableLongPressServiceHint: false, | ||
236 | }; | 238 | }; |
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index 8c37d2692..889f3f87f 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js | |||
@@ -177,6 +177,10 @@ const messages = defineMessages({ | |||
177 | id: 'settings.app.form.iconSize', | 177 | id: 'settings.app.form.iconSize', |
178 | defaultMessage: 'Service icon size', | 178 | defaultMessage: 'Service icon size', |
179 | }, | 179 | }, |
180 | enableLongPressServiceHint: { | ||
181 | id: 'settings.app.form.enableLongPressServiceHint', | ||
182 | defaultMessage: 'Enable service shortcut hint on long press', | ||
183 | }, | ||
180 | useVerticalStyle: { | 184 | useVerticalStyle: { |
181 | id: 'settings.app.form.useVerticalStyle', | 185 | id: 'settings.app.form.useVerticalStyle', |
182 | defaultMessage: 'Use horizontal style', | 186 | defaultMessage: 'Use horizontal style', |
@@ -301,6 +305,7 @@ class EditSettingsScreen extends Component { | |||
301 | splitMode: Boolean(settingsData.splitMode), | 305 | splitMode: Boolean(settingsData.splitMode), |
302 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), | 306 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), |
303 | iconSize: Number(settingsData.iconSize), | 307 | iconSize: Number(settingsData.iconSize), |
308 | enableLongPressServiceHint: Boolean(settingsData.enableLongPressServiceHint), | ||
304 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), | 309 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), |
305 | alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces), | 310 | alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces), |
306 | accentColor: settingsData.accentColor, | 311 | accentColor: settingsData.accentColor, |
@@ -608,6 +613,11 @@ class EditSettingsScreen extends Component { | |||
608 | default: DEFAULT_APP_SETTINGS.iconSize, | 613 | default: DEFAULT_APP_SETTINGS.iconSize, |
609 | options: iconSizes, | 614 | options: iconSizes, |
610 | }, | 615 | }, |
616 | enableLongPressServiceHint: { | ||
617 | label: intl.formatMessage(messages.enableLongPressServiceHint), | ||
618 | value: settings.all.app.enableLongPressServiceHint, | ||
619 | default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint, | ||
620 | }, | ||
611 | useVerticalStyle: { | 621 | useVerticalStyle: { |
612 | label: intl.formatMessage(messages.useVerticalStyle), | 622 | label: intl.formatMessage(messages.useVerticalStyle), |
613 | value: settings.all.app.useVerticalStyle, | 623 | value: settings.all.app.useVerticalStyle, |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 301a71818..baf9753a1 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -212,6 +212,7 @@ | |||
212 | "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration", | 212 | "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration", |
213 | "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi", | 213 | "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi", |
214 | "settings.app.form.enableLock": "Enable Password Lock", | 214 | "settings.app.form.enableLock": "Enable Password Lock", |
215 | "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press", | ||
215 | "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar", | 216 | "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar", |
216 | "settings.app.form.enableSpellchecking": "Enable spell checking", | 217 | "settings.app.form.enableSpellchecking": "Enable spell checking", |
217 | "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray", | 218 | "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray", |