diff options
author | Vijay A <vraravam@users.noreply.github.com> | 2021-10-06 22:59:03 +0530 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2021-10-06 22:59:03 +0530 |
commit | 5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216 (patch) | |
tree | 10cea6c608baea3481595ed9eb7be63ef03ca6c4 /src/components/services/tabs/TabItem.js | |
parent | Bumped up version to: 5.6.2 (hotfix) (diff) | |
parent | 5.6.3-nightly.25 [skip ci] (diff) | |
download | ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.tar.gz ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.tar.zst ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.zip |
Merge branch 'nightly' into release
Diffstat (limited to 'src/components/services/tabs/TabItem.js')
-rw-r--r-- | src/components/services/tabs/TabItem.js | 94 |
1 files changed, 67 insertions, 27 deletions
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index e5892be5d..2474682df 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Menu, dialog, app, getCurrentWindow } from '@electron/remote'; | 1 | import { Menu, dialog, app } from '@electron/remote'; |
2 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
3 | import { defineMessages, intlShape } 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 { observer } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
@@ -20,56 +20,55 @@ const IS_SERVICE_DEBUGGING_ENABLED = ( | |||
20 | const messages = defineMessages({ | 20 | const messages = defineMessages({ |
21 | reload: { | 21 | reload: { |
22 | id: 'tabs.item.reload', | 22 | id: 'tabs.item.reload', |
23 | defaultMessage: '!!!Reload', | 23 | defaultMessage: 'Reload', |
24 | }, | 24 | }, |
25 | disableNotifications: { | 25 | disableNotifications: { |
26 | id: 'tabs.item.disableNotifications', | 26 | id: 'tabs.item.disableNotifications', |
27 | defaultMessage: '!!!Disable notifications', | 27 | defaultMessage: 'Disable notifications', |
28 | }, | 28 | }, |
29 | enableNotifications: { | 29 | enableNotifications: { |
30 | id: 'tabs.item.enableNotification', | 30 | id: 'tabs.item.enableNotification', |
31 | defaultMessage: '!!!Enable notifications', | 31 | defaultMessage: 'Enable notifications', |
32 | }, | 32 | }, |
33 | disableAudio: { | 33 | disableAudio: { |
34 | id: 'tabs.item.disableAudio', | 34 | id: 'tabs.item.disableAudio', |
35 | defaultMessage: '!!!Disable audio', | 35 | defaultMessage: 'Disable audio', |
36 | }, | 36 | }, |
37 | enableAudio: { | 37 | enableAudio: { |
38 | id: 'tabs.item.enableAudio', | 38 | id: 'tabs.item.enableAudio', |
39 | defaultMessage: '!!!Enable audio', | 39 | defaultMessage: 'Enable audio', |
40 | }, | 40 | }, |
41 | enableDarkMode: { | 41 | enableDarkMode: { |
42 | id: 'tabs.item.enableDarkMode', | 42 | id: 'tabs.item.enableDarkMode', |
43 | defaultMessage: '!!!Enable Dark mode', | 43 | defaultMessage: 'Enable Dark mode', |
44 | }, | 44 | }, |
45 | disableDarkMode: { | 45 | disableDarkMode: { |
46 | id: 'tabs.item.disableDarkMode', | 46 | id: 'tabs.item.disableDarkMode', |
47 | defaultMessage: '!!!Disable Dark mode', | 47 | defaultMessage: 'Disable Dark mode', |
48 | }, | 48 | }, |
49 | disableService: { | 49 | disableService: { |
50 | id: 'tabs.item.disableService', | 50 | id: 'tabs.item.disableService', |
51 | defaultMessage: '!!!Disable Service', | 51 | defaultMessage: 'Disable service', |
52 | }, | 52 | }, |
53 | enableService: { | 53 | enableService: { |
54 | id: 'tabs.item.enableService', | 54 | id: 'tabs.item.enableService', |
55 | defaultMessage: '!!!Enable Service', | 55 | defaultMessage: 'Enable service', |
56 | }, | 56 | }, |
57 | hibernateService: { | 57 | hibernateService: { |
58 | id: 'tabs.item.hibernateService', | 58 | id: 'tabs.item.hibernateService', |
59 | defaultMessage: '!!!Hibernate Service', | 59 | defaultMessage: 'Hibernate service', |
60 | }, | 60 | }, |
61 | wakeUpService: { | 61 | wakeUpService: { |
62 | id: 'tabs.item.wakeUpService', | 62 | id: 'tabs.item.wakeUpService', |
63 | defaultMessage: '!!!Wake Up Service', | 63 | defaultMessage: 'Wake up service', |
64 | }, | 64 | }, |
65 | deleteService: { | 65 | deleteService: { |
66 | id: 'tabs.item.deleteService', | 66 | id: 'tabs.item.deleteService', |
67 | defaultMessage: '!!!Delete Service', | 67 | defaultMessage: 'Delete service', |
68 | }, | 68 | }, |
69 | confirmDeleteService: { | 69 | confirmDeleteService: { |
70 | id: 'tabs.item.confirmDeleteService', | 70 | id: 'tabs.item.confirmDeleteService', |
71 | defaultMessage: | 71 | defaultMessage: 'Do you really want to delete the {serviceName} service?', |
72 | '!!!Do you really want to delete the {serviceName} service?', | ||
73 | }, | 72 | }, |
74 | }); | 73 | }); |
75 | 74 | ||
@@ -134,14 +133,44 @@ class TabItem extends Component { | |||
134 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, | 133 | showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired, |
135 | }; | 134 | }; |
136 | 135 | ||
137 | static contextTypes = { | ||
138 | intl: intlShape, | ||
139 | }; | ||
140 | |||
141 | @observable isPolled = false; | 136 | @observable isPolled = false; |
142 | 137 | ||
143 | @observable isPollAnswered = false; | 138 | @observable isPollAnswered = false; |
144 | 139 | ||
140 | constructor(props) { | ||
141 | super(props); | ||
142 | this.state = { | ||
143 | showShortcutIndex: false, | ||
144 | }; | ||
145 | } | ||
146 | |||
147 | handleShowShortcutIndex = () => { | ||
148 | this.setState({ showShortcutIndex: true }); | ||
149 | }; | ||
150 | |||
151 | checkForLongPress = () => { | ||
152 | let longpressDelay = null; | ||
153 | const longpressDelayDuration = 1000; | ||
154 | |||
155 | document.addEventListener( | ||
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 | |||
168 | document.addEventListener('keyup', () => { | ||
169 | clearTimeout(longpressDelay); | ||
170 | this.setState({ showShortcutIndex: false }); | ||
171 | }); | ||
172 | }; | ||
173 | |||
145 | componentDidMount() { | 174 | componentDidMount() { |
146 | const { service } = this.props; | 175 | const { service } = this.props; |
147 | 176 | ||
@@ -164,6 +193,8 @@ class TabItem extends Component { | |||
164 | } | 193 | } |
165 | }); | 194 | }); |
166 | } | 195 | } |
196 | |||
197 | this.checkForLongPress(); | ||
167 | } | 198 | } |
168 | 199 | ||
169 | render() { | 200 | render() { |
@@ -185,7 +216,7 @@ class TabItem extends Component { | |||
185 | showMessageBadgeWhenMutedSetting, | 216 | showMessageBadgeWhenMutedSetting, |
186 | showMessageBadgesEvenWhenMuted, | 217 | showMessageBadgesEvenWhenMuted, |
187 | } = this.props; | 218 | } = this.props; |
188 | const { intl } = this.context; | 219 | const { intl } = this.props; |
189 | 220 | ||
190 | const menuTemplate = [ | 221 | const menuTemplate = [ |
191 | { | 222 | { |
@@ -240,8 +271,9 @@ class TabItem extends Component { | |||
240 | ? messages.wakeUpService | 271 | ? messages.wakeUpService |
241 | : messages.hibernateService, | 272 | : messages.hibernateService, |
242 | ), | 273 | ), |
274 | // eslint-disable-next-line no-confusing-arrow | ||
243 | click: () => | 275 | click: () => |
244 | (service.isHibernating ? wakeUpService() : hibernateService()), | 276 | service.isHibernating ? wakeUpService() : hibernateService(), |
245 | enabled: service.canHibernate, | 277 | enabled: service.canHibernate, |
246 | }, | 278 | }, |
247 | { | 279 | { |
@@ -256,7 +288,10 @@ class TabItem extends Component { | |||
256 | detail: intl.formatMessage(messages.confirmDeleteService, { | 288 | detail: intl.formatMessage(messages.confirmDeleteService, { |
257 | serviceName: service.name || service.recipe.name, | 289 | serviceName: service.name || service.recipe.name, |
258 | }), | 290 | }), |
259 | buttons: [intl.formatMessage(globalMessages.yes), intl.formatMessage(globalMessages.no)], | 291 | buttons: [ |
292 | intl.formatMessage(globalMessages.yes), | ||
293 | intl.formatMessage(globalMessages.no), | ||
294 | ], | ||
260 | }); | 295 | }); |
261 | if (selection === 0) { | 296 | if (selection === 0) { |
262 | deleteService(); | 297 | deleteService(); |
@@ -283,7 +318,7 @@ class TabItem extends Component { | |||
283 | service.unreadDirectMessageCount === 0 && | 318 | service.unreadDirectMessageCount === 0 && |
284 | service.isIndirectMessageBadgeEnabled && ( | 319 | service.isIndirectMessageBadgeEnabled && ( |
285 | <span className="tab-item__message-count is-indirect">•</span> | 320 | <span className="tab-item__message-count is-indirect">•</span> |
286 | )} | 321 | )} |
287 | {service.isHibernating && ( | 322 | {service.isHibernating && ( |
288 | <span className="tab-item__message-count hibernating">•</span> | 323 | <span className="tab-item__message-count hibernating">•</span> |
289 | )} | 324 | )} |
@@ -302,9 +337,11 @@ class TabItem extends Component { | |||
302 | 'is-disabled': !service.isEnabled, | 337 | 'is-disabled': !service.isEnabled, |
303 | })} | 338 | })} |
304 | onClick={clickHandler} | 339 | onClick={clickHandler} |
305 | onContextMenu={() => menu.popup(getCurrentWindow())} | 340 | onContextMenu={() => menu.popup()} |
306 | data-tip={`${service.name} ${ | 341 | data-tip={`${service.name} ${ |
307 | shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})` : '' | 342 | shortcutIndex <= 9 |
343 | ? `(${cmdOrCtrlShortcutKey(false)}+${shortcutIndex})` | ||
344 | : '' | ||
308 | }`} | 345 | }`} |
309 | > | 346 | > |
310 | <img src={service.icon} className="tab-item__icon" alt="" /> | 347 | <img src={service.icon} className="tab-item__icon" alt="" /> |
@@ -327,9 +364,12 @@ class TabItem extends Component { | |||
327 | /> | 364 | /> |
328 | </> | 365 | </> |
329 | )} | 366 | )} |
367 | {shortcutIndex && this.state.showShortcutIndex && ( | ||
368 | <span className="tab-item__shortcut-index">{shortcutIndex}</span> | ||
369 | )} | ||
330 | </li> | 370 | </li> |
331 | ); | 371 | ); |
332 | } | 372 | } |
333 | } | 373 | } |
334 | 374 | ||
335 | export default SortableElement(TabItem); | 375 | export default injectIntl(SortableElement(TabItem)); |