Control the long-press hint for service icon via a preference (#2043)

Co-authored-by: mhatvan <markus_hatvan@aon.at>

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';
 import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
 import injectSheet from 'react-jss';
 import ms from 'ms';
 
-import { observable, autorun } from 'mobx';
+import { observable, autorun, reaction } from 'mobx';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
+import SettingsStore from '../../../stores/SettingsStore';
 
 const IS_SERVICE_DEBUGGING_ENABLED = (
   localStorage.getItem('debug') || ''
@@ -112,6 +113,7 @@ const styles = {
 };
 
 @injectSheet(styles)
+@inject('stores')
 @observer
 class TabItem extends Component {
   static propTypes = {
@@ -131,6 +133,9 @@ class TabItem extends Component {
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
+    stores: PropTypes.shape({
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    }).isRequired,
   };
 
   @observable isPolled = false;
@@ -142,37 +147,37 @@ class TabItem extends Component {
     this.state = {
       showShortcutIndex: false,
     };
+
+    reaction(
+      () => this.props.stores.settings.app.enableLongPressServiceHint,
+      () => {
+        this.checkForLongPress(
+          this.props.stores.settings.app.enableLongPressServiceHint,
+        );
+      },
+    );
   }
 
-  handleShowShortcutIndex = () => {
-    this.setState({ showShortcutIndex: true });
+  handleShortcutIndex = (event, showShortcutIndex = true) => {
+    if (event.key === 'Shift') {
+      this.setState({ showShortcutIndex });
+    }
   };
 
-  checkForLongPress = () => {
-    let longpressDelay = null;
-    const longpressDelayDuration = 1000;
-
-    document.addEventListener(
-      'keydown',
-      e => {
-        if (e.ctrlKey || e.metaKey) {
-          longpressDelay = setTimeout(
-            this.handleShowShortcutIndex,
-            longpressDelayDuration,
-          );
-        }
-      },
-      { capture: true },
-    );
+  checkForLongPress = enableLongPressServiceHint => {
+    if (enableLongPressServiceHint) {
+      document.addEventListener('keydown', e => {
+        this.handleShortcutIndex(e);
+      });
 
-    document.addEventListener('keyup', () => {
-      clearTimeout(longpressDelay);
-      this.setState({ showShortcutIndex: false });
-    });
+      document.addEventListener('keyup', e => {
+        this.handleShortcutIndex(e, false);
+      });
+    }
   };
 
   componentDidMount() {
-    const { service } = this.props;
+    const { service, stores } = this.props;
 
     if (IS_SERVICE_DEBUGGING_ENABLED) {
       autorun(() => {
@@ -194,7 +199,7 @@ class TabItem extends Component {
       });
     }
 
-    this.checkForLongPress();
+    this.checkForLongPress(stores.settings.app.enableLongPressServiceHint);
   }
 
   render() {
@@ -364,7 +369,7 @@ class TabItem extends Component {
             />
           </>
         )}
-        {shortcutIndex && this.state.showShortcutIndex && (
+        {shortcutIndex <= 9 && this.state.showShortcutIndex && (
           <span className="tab-item__shortcut-index">{shortcutIndex}</span>
         )}
       </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 {
 
                 <Hr />
                 <Select field={form.$('iconSize')} />
+                <Toggle field={form.$('enableLongPressServiceHint')} />
 
                 <Hr />
 
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';
 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
 
 export const DEFAULT_APP_SETTINGS = {
+  autoLaunchOnStart: false,
   autoLaunchInBackground: false,
   runInBackground: true,
   reloadAfterResume: true,
@@ -233,4 +234,5 @@ export const DEFAULT_APP_SETTINGS = {
   useVerticalStyle: false,
   alwaysShowWorkspaces: false,
   liftSingleInstanceLock: false,
+  enableLongPressServiceHint: false,
 };
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({
     id: 'settings.app.form.iconSize',
     defaultMessage: 'Service icon size',
   },
+  enableLongPressServiceHint: {
+    id: 'settings.app.form.enableLongPressServiceHint',
+    defaultMessage: 'Enable service shortcut hint on long press',
+  },
   useVerticalStyle: {
     id: 'settings.app.form.useVerticalStyle',
     defaultMessage: 'Use horizontal style',
@@ -301,6 +305,7 @@ class EditSettingsScreen extends Component {
         splitMode: Boolean(settingsData.splitMode),
         serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
         iconSize: Number(settingsData.iconSize),
+        enableLongPressServiceHint: Boolean(settingsData.enableLongPressServiceHint),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
         alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces),
         accentColor: settingsData.accentColor,
@@ -608,6 +613,11 @@ class EditSettingsScreen extends Component {
           default: DEFAULT_APP_SETTINGS.iconSize,
           options: iconSizes,
         },
+        enableLongPressServiceHint: {
+          label: intl.formatMessage(messages.enableLongPressServiceHint),
+          value: settings.all.app.enableLongPressServiceHint,
+          default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint,
+        },
         useVerticalStyle: {
           label: intl.formatMessage(messages.useVerticalStyle),
           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 @@
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
   "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",