diff options
Diffstat (limited to 'src/features/appearance/index.js')
-rw-r--r-- | src/features/appearance/index.js | 50 |
1 files changed, 34 insertions, 16 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index 3aab2fcad..d1db68ac6 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -10,13 +10,15 @@ function createStyleElement() { | |||
10 | const styles = document.createElement('style'); | 10 | const styles = document.createElement('style'); |
11 | styles.id = STYLE_ELEMENT_ID; | 11 | styles.id = STYLE_ELEMENT_ID; |
12 | 12 | ||
13 | document.querySelector('head').appendChild(styles); | 13 | document.querySelector('head')?.appendChild(styles); |
14 | } | 14 | } |
15 | 15 | ||
16 | function setAppearance(style) { | 16 | function setAppearance(style) { |
17 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | 17 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); |
18 | 18 | ||
19 | styleElement.innerHTML = style; | 19 | if (styleElement) { |
20 | styleElement.innerHTML = style; | ||
21 | } | ||
20 | } | 22 | } |
21 | 23 | ||
22 | // See https://github.com/Qix-/color/issues/53#issuecomment-656590710 | 24 | // See https://github.com/Qix-/color/issues/53#issuecomment-656590710 |
@@ -28,7 +30,7 @@ function darkenAbsolute(originalColor, absoluteChange) { | |||
28 | function generateAccentStyle(accentColorStr) { | 30 | function generateAccentStyle(accentColorStr) { |
29 | let style = ''; | 31 | let style = ''; |
30 | 32 | ||
31 | Object.keys(themeInfo).forEach((property) => { | 33 | Object.keys(themeInfo).forEach(property => { |
32 | style += ` | 34 | style += ` |
33 | ${themeInfo[property]} { | 35 | ${themeInfo[property]} { |
34 | ${property}: ${accentColorStr}; | 36 | ${property}: ${accentColorStr}; |
@@ -80,19 +82,21 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | |||
80 | const width = Number(widthStr); | 82 | const width = Number(widthStr); |
81 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 83 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
82 | 84 | ||
83 | return vertical ? ` | 85 | return vertical |
86 | ? ` | ||
84 | .tab-item { | 87 | .tab-item { |
85 | width: ${width - 2}px !important; | 88 | width: ${width - 2}px !important; |
86 | height: ${width - 5 + iconSize}px !important; | 89 | height: ${width - 5 + iconSize}px !important; |
87 | min-height: unset; | 90 | min-height: unset; |
88 | } | 91 | } |
89 | .tab-item .tab-item__icon { | 92 | .tab-item .tab-item__icon { |
90 | width: ${(width / 2) + iconSize}px !important; | 93 | width: ${width / 2 + iconSize}px !important; |
91 | } | 94 | } |
92 | .sidebar__button { | 95 | .sidebar__button { |
93 | font-size: ${width / 3}px !important; | 96 | font-size: ${width / 3}px !important; |
94 | } | 97 | } |
95 | ` : ` | 98 | ` |
99 | : ` | ||
96 | .sidebar { | 100 | .sidebar { |
97 | width: ${width}px !important; | 101 | width: ${width}px !important; |
98 | } | 102 | } |
@@ -101,7 +105,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | |||
101 | height: ${width - 5 + iconSize}px !important; | 105 | height: ${width - 5 + iconSize}px !important; |
102 | } | 106 | } |
103 | .tab-item .tab-item__icon { | 107 | .tab-item .tab-item__icon { |
104 | width: ${(width / 2) + iconSize}px !important; | 108 | width: ${width / 2 + iconSize}px !important; |
105 | } | 109 | } |
106 | .sidebar__button { | 110 | .sidebar__button { |
107 | font-size: ${width / 3}px !important; | 111 | font-size: ${width / 3}px !important; |
@@ -145,9 +149,13 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | |||
145 | return ` | 149 | return ` |
146 | .sidebar { | 150 | .sidebar { |
147 | height: ${sidebarWidth + verticalStyleOffset + 1}px !important; | 151 | height: ${sidebarWidth + verticalStyleOffset + 1}px !important; |
148 | ${alwaysShowWorkspaces ? ` | 152 | ${ |
153 | alwaysShowWorkspaces | ||
154 | ? ` | ||
149 | width: calc(100% - 300px) !important; | 155 | width: calc(100% - 300px) !important; |
150 | ` : ''} | 156 | ` |
157 | : '' | ||
158 | } | ||
151 | } | 159 | } |
152 | 160 | ||
153 | .sidebar .sidebar__button { | 161 | .sidebar .sidebar__button { |
@@ -192,12 +200,20 @@ function generateStyle(settings) { | |||
192 | alwaysShowWorkspaces, | 200 | alwaysShowWorkspaces, |
193 | } = settings; | 201 | } = settings; |
194 | 202 | ||
195 | if (accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()) { | 203 | if ( |
204 | accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase() | ||
205 | ) { | ||
196 | style += generateAccentStyle(accentColor); | 206 | style += generateAccentStyle(accentColor); |
197 | } | 207 | } |
198 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth | 208 | if ( |
199 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { | 209 | serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth || |
200 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle); | 210 | iconSize !== DEFAULT_APP_SETTINGS.iconSize |
211 | ) { | ||
212 | style += generateServiceRibbonWidthStyle( | ||
213 | serviceRibbonWidth, | ||
214 | iconSize, | ||
215 | useVerticalStyle, | ||
216 | ); | ||
201 | } | 217 | } |
202 | if (showDragArea) { | 218 | if (showDragArea) { |
203 | style += generateShowDragAreaStyle(accentColor); | 219 | style += generateShowDragAreaStyle(accentColor); |
@@ -206,7 +222,9 @@ function generateStyle(settings) { | |||
206 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | 222 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); |
207 | } else if (document.getElementById('vertical-style')) { | 223 | } else if (document.getElementById('vertical-style')) { |
208 | const link = document.getElementById('vertical-style'); | 224 | const link = document.getElementById('vertical-style'); |
209 | document.head.removeChild(link); | 225 | if (link) { |
226 | document.head.removeChild(link); | ||
227 | } | ||
210 | } | 228 | } |
211 | if (alwaysShowWorkspaces) { | 229 | if (alwaysShowWorkspaces) { |
212 | style += generateOpenWorkspaceStyle(); | 230 | style += generateOpenWorkspaceStyle(); |
@@ -225,14 +243,14 @@ export default function initAppearance(stores) { | |||
225 | 243 | ||
226 | // Update style when settings change | 244 | // Update style when settings change |
227 | reaction( | 245 | reaction( |
228 | () => ([ | 246 | () => [ |
229 | settings.all.app.accentColor, | 247 | settings.all.app.accentColor, |
230 | settings.all.app.serviceRibbonWidth, | 248 | settings.all.app.serviceRibbonWidth, |
231 | settings.all.app.iconSize, | 249 | settings.all.app.iconSize, |
232 | settings.all.app.showDragArea, | 250 | settings.all.app.showDragArea, |
233 | settings.all.app.useVerticalStyle, | 251 | settings.all.app.useVerticalStyle, |
234 | settings.all.app.alwaysShowWorkspaces, | 252 | settings.all.app.alwaysShowWorkspaces, |
235 | ]), | 253 | ], |
236 | () => { | 254 | () => { |
237 | updateStyle(settings.all.app); | 255 | updateStyle(settings.all.app); |
238 | }, | 256 | }, |