diff options
author | 2021-10-09 21:25:20 +0530 | |
---|---|---|
committer | 2021-10-09 21:25:20 +0530 | |
commit | c4b6f6296ede86289ee1c814f5e9d19ac8be229d (patch) | |
tree | 059fe86cc726bc6b489d3f42a74525da6c9ee828 /src/components/services/tabs | |
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>
Diffstat (limited to 'src/components/services/tabs')
-rw-r--r-- | src/components/services/tabs/TabItem.js | 59 |
1 files changed, 32 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> |