diff options
author | 2019-10-12 17:28:32 +0200 | |
---|---|---|
committer | 2019-10-12 17:28:32 +0200 | |
commit | 2c86938b03926ac4af547c3a2241d5d0b5c8e257 (patch) | |
tree | d556a0ede875555f0fbd0c6b8d73b90d8b169780 /src | |
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')
-rw-r--r-- | src/features/quickSwitch/Component.js | 18 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/quick-switch.scss | 13 |
3 files changed, 30 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} |
diff --git a/src/styles/main.scss b/src/styles/main.scss index 784a04d3d..1e9ed5714 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -30,6 +30,7 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
30 | @import './content-tabs.scss'; | 30 | @import './content-tabs.scss'; |
31 | @import './invite.scss'; | 31 | @import './invite.scss'; |
32 | @import './title-bar.scss'; | 32 | @import './title-bar.scss'; |
33 | @import './quick-switch.scss'; | ||
33 | 34 | ||
34 | // form | 35 | // form |
35 | @import './input.scss'; | 36 | @import './input.scss'; |
diff --git a/src/styles/quick-switch.scss b/src/styles/quick-switch.scss new file mode 100644 index 000000000..356123c4c --- /dev/null +++ b/src/styles/quick-switch.scss | |||
@@ -0,0 +1,13 @@ | |||
1 | .theme__dark .quick-switch { | ||
2 | background: $dark-theme-gray-darkest; | ||
3 | |||
4 | .service { | ||
5 | background: $dark-theme-gray-dark; | ||
6 | color: $dark-theme-gray-lightest; | ||
7 | border: inherit; | ||
8 | } | ||
9 | |||
10 | .active { | ||
11 | background: $theme-brand-primary; | ||
12 | } | ||
13 | } \ No newline at end of file | ||