diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-12 17:28:32 +0200 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-12 17:28:32 +0200 |
commit | 2c86938b03926ac4af547c3a2241d5d0b5c8e257 (patch) | |
tree | d556a0ede875555f0fbd0c6b8d73b90d8b169780 /src/features/quickSwitch/Component.js | |
parent | Add minifiers to gulp production builds (diff) | |
download | ferdium-app-2c86938b03926ac4af547c3a2241d5d0b5c8e257.tar.gz ferdium-app-2c86938b03926ac4af547c3a2241d5d0b5c8e257.tar.zst ferdium-app-2c86938b03926ac4af547c3a2241d5d0b5c8e257.zip |
Partly fixing #115
Diffstat (limited to 'src/features/quickSwitch/Component.js')
-rw-r--r-- | src/features/quickSwitch/Component.js | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index ddbdbe304..7b76553b2 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -32,7 +32,9 @@ const styles = theme => ({ | |||
32 | }, | 32 | }, |
33 | services: { | 33 | services: { |
34 | width: '100%', | 34 | width: '100%', |
35 | maxHeight: '50vh', | ||
35 | marginTop: 30, | 36 | marginTop: 30, |
37 | overflow: 'scroll', | ||
36 | }, | 38 | }, |
37 | service: { | 39 | service: { |
38 | background: theme.styleTypes.primary.contrast, | 40 | background: theme.styleTypes.primary.contrast, |
@@ -89,6 +91,8 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
89 | 91 | ||
90 | inputRef = createRef(); | 92 | inputRef = createRef(); |
91 | 93 | ||
94 | serviceElements = {}; | ||
95 | |||
92 | constructor(props) { | 96 | constructor(props) { |
93 | super(props); | 97 | super(props); |
94 | 98 | ||
@@ -150,6 +154,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
150 | newSelected = 0; | 154 | newSelected = 0; |
151 | } | 155 | } |
152 | 156 | ||
157 | // Make sure new selection is visible | ||
158 | const serviceElement = this.serviceElements[newSelected]; | ||
159 | if (serviceElement) { | ||
160 | serviceElement.scrollIntoViewIfNeeded(false); | ||
161 | } | ||
162 | |||
163 | |||
153 | return { | 164 | return { |
154 | selected: newSelected, | 165 | selected: newSelected, |
155 | }; | 166 | }; |
@@ -244,7 +255,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
244 | return ( | 255 | return ( |
245 | <Modal | 256 | <Modal |
246 | isOpen={isModalVisible} | 257 | isOpen={isModalVisible} |
247 | className={classes.modal} | 258 | className={`${classes.modal} quick-switch`} |
248 | shouldCloseOnOverlayClick | 259 | shouldCloseOnOverlayClick |
249 | close={this.close.bind(this)} | 260 | close={this.close.bind(this)} |
250 | > | 261 | > |
@@ -260,9 +271,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
260 | <div className={classes.services}> | 271 | <div className={classes.services}> |
261 | { services.map((service, index) => ( | 272 | { services.map((service, index) => ( |
262 | <div | 273 | <div |
263 | className={`${classes.service} ${this.state.selected === index ? classes.activeService : ''}`} | 274 | className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`} |
264 | onClick={() => openService(index)} | 275 | onClick={() => openService(index)} |
265 | key={service.id} | 276 | key={service.id} |
277 | ref={(el) => { | ||
278 | this.serviceElements[index] = el; | ||
279 | }} | ||
266 | > | 280 | > |
267 | <img | 281 | <img |
268 | src={service.icon} | 282 | src={service.icon} |