diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-01 15:52:52 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-01 15:52:52 +0200 |
commit | eeb8a8a35e65baf38e7d741aca8cf68355cb96c3 (patch) | |
tree | 6c1de396c8ed4a3b759fdd70fb6d8db12a4345de /src | |
parent | fix: horizontal bar is a lot wider than what it should be (#2006) (diff) | |
download | ferdium-app-eeb8a8a35e65baf38e7d741aca8cf68355cb96c3.tar.gz ferdium-app-eeb8a8a35e65baf38e7d741aca8cf68355cb96c3.tar.zst ferdium-app-eeb8a8a35e65baf38e7d741aca8cf68355cb96c3.zip |
feat: show service number on icon when first key of switch service hotkey held (#2007)
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/tabs/TabItem.js | 44 | ||||
-rw-r--r-- | src/styles/tabs.scss | 13 |
2 files changed, 55 insertions, 2 deletions
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index 35224631e..2474682df 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -137,6 +137,40 @@ class TabItem extends Component { | |||
137 | 137 | ||
138 | @observable isPollAnswered = false; | 138 | @observable isPollAnswered = false; |
139 | 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 | |||
140 | componentDidMount() { | 174 | componentDidMount() { |
141 | const { service } = this.props; | 175 | const { service } = this.props; |
142 | 176 | ||
@@ -159,6 +193,8 @@ class TabItem extends Component { | |||
159 | } | 193 | } |
160 | }); | 194 | }); |
161 | } | 195 | } |
196 | |||
197 | this.checkForLongPress(); | ||
162 | } | 198 | } |
163 | 199 | ||
164 | render() { | 200 | render() { |
@@ -235,8 +271,9 @@ class TabItem extends Component { | |||
235 | ? messages.wakeUpService | 271 | ? messages.wakeUpService |
236 | : messages.hibernateService, | 272 | : messages.hibernateService, |
237 | ), | 273 | ), |
274 | // eslint-disable-next-line no-confusing-arrow | ||
238 | click: () => | 275 | click: () => |
239 | (service.isHibernating ? wakeUpService() : hibernateService()), | 276 | service.isHibernating ? wakeUpService() : hibernateService(), |
240 | enabled: service.canHibernate, | 277 | enabled: service.canHibernate, |
241 | }, | 278 | }, |
242 | { | 279 | { |
@@ -281,7 +318,7 @@ class TabItem extends Component { | |||
281 | service.unreadDirectMessageCount === 0 && | 318 | service.unreadDirectMessageCount === 0 && |
282 | service.isIndirectMessageBadgeEnabled && ( | 319 | service.isIndirectMessageBadgeEnabled && ( |
283 | <span className="tab-item__message-count is-indirect">•</span> | 320 | <span className="tab-item__message-count is-indirect">•</span> |
284 | )} | 321 | )} |
285 | {service.isHibernating && ( | 322 | {service.isHibernating && ( |
286 | <span className="tab-item__message-count hibernating">•</span> | 323 | <span className="tab-item__message-count hibernating">•</span> |
287 | )} | 324 | )} |
@@ -327,6 +364,9 @@ 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 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index df10da77c..16318b9f6 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -120,6 +120,19 @@ | |||
120 | } | 120 | } |
121 | } | 121 | } |
122 | 122 | ||
123 | .tab-item__shortcut-index { | ||
124 | align-items: center; | ||
125 | background: $theme-gray-light; | ||
126 | bottom: 8px; | ||
127 | color: #fff; | ||
128 | display: flex; | ||
129 | font-size: 11px; | ||
130 | min-height: 17px; | ||
131 | padding: 0px 5px; | ||
132 | position: absolute; | ||
133 | left: 8px; | ||
134 | } | ||
135 | |||
123 | &.is-reordering { | 136 | &.is-reordering { |
124 | z-index: 99999; | 137 | z-index: 99999; |
125 | } | 138 | } |