diff options
author | 2022-07-14 02:12:46 +0100 | |
---|---|---|
committer | 2022-07-14 01:12:46 +0000 | |
commit | b9e12652ad763ab82a1c0a877670cc0c6114a19f (patch) | |
tree | 251dadf8fe109789c7fcd12e20a1054bcfd61dab /src/features/appearance/index.ts | |
parent | Update submodules, browserslist data updates and linter fixes [skip ci] (diff) | |
download | ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.tar.gz ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.tar.zst ferdium-app-b9e12652ad763ab82a1c0a877670cc0c6114a19f.zip |
fix: horizontal sidebar style on macOS (#482)
Diffstat (limited to 'src/features/appearance/index.ts')
-rw-r--r-- | src/features/appearance/index.ts | 43 |
1 files changed, 28 insertions, 15 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 17ae5937e..8b7416126 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -129,11 +129,12 @@ function generateAccentStyle(accentColorStr) { | |||
129 | function generateServiceRibbonWidthStyle( | 129 | function generateServiceRibbonWidthStyle( |
130 | widthStr, | 130 | widthStr, |
131 | iconSizeStr, | 131 | iconSizeStr, |
132 | vertical, | 132 | horizontal, |
133 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | 134 | sidebarServicesLocation, |
135 | useGrayscaleServices, | 135 | useGrayscaleServices, |
136 | grayscaleServicesDim, | 136 | grayscaleServicesDim, |
137 | showDragArea, | ||
137 | ) { | 138 | ) { |
138 | const width = Number(widthStr); | 139 | const width = Number(widthStr); |
139 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 140 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -141,6 +142,7 @@ function generateServiceRibbonWidthStyle( | |||
141 | let tabItemHeightBias = -5; | 142 | let tabItemHeightBias = -5; |
142 | let sidebarSizeBias = 22; | 143 | let sidebarSizeBias = 22; |
143 | const tabItemWidthBias = 3; | 144 | const tabItemWidthBias = 3; |
145 | const verticalStyleOffset = 29; | ||
144 | 146 | ||
145 | switch (width) { | 147 | switch (width) { |
146 | case 35: | 148 | case 35: |
@@ -194,24 +196,24 @@ function generateServiceRibbonWidthStyle( | |||
194 | let sidebarServicesAlignment; | 196 | let sidebarServicesAlignment; |
195 | switch (sidebarServicesLocation) { | 197 | switch (sidebarServicesLocation) { |
196 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: | 198 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: |
197 | sidebarServicesAlignment = vertical ? "left" : "start"; | 199 | sidebarServicesAlignment = horizontal ? 'left' : 'start'; |
198 | break; | 200 | break; |
199 | case SIDEBAR_SERVICES_LOCATION_CENTER: | 201 | case SIDEBAR_SERVICES_LOCATION_CENTER: |
200 | sidebarServicesAlignment = vertical ? "center" : "center"; | 202 | sidebarServicesAlignment = horizontal ? 'center' : 'center'; |
201 | break; | 203 | break; |
202 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: | 204 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: |
203 | sidebarServicesAlignment = vertical ? "right" : "end"; | 205 | sidebarServicesAlignment = horizontal ? 'right' : 'end'; |
204 | break; | 206 | break; |
205 | default: | 207 | default: |
206 | sidebarServicesAlignment = vertical ? "left" : "start"; | 208 | sidebarServicesAlignment = horizontal ? 'left' : 'start'; |
207 | break; | 209 | break; |
208 | } | 210 | } |
209 | 211 | ||
210 | const graysacleServices = | 212 | const graysacleServices = `filter: grayscale(1); |
211 | `filter: grayscale(1); | 213 | opacity: ${grayscaleServicesDim}%;`; |
212 | opacity: ${grayscaleServicesDim}%;` | ||
213 | 214 | ||
214 | return vertical | 215 | const sizeDragArea = showDragArea ? verticalStyleOffset : 0; |
216 | return horizontal | ||
215 | ? ` | 217 | ? ` |
216 | .sidebar { | 218 | .sidebar { |
217 | height: ${width}px !important; | 219 | height: ${width}px !important; |
@@ -247,7 +249,17 @@ function generateServiceRibbonWidthStyle( | |||
247 | margin-top: -${width}px !important; | 249 | margin-top: -${width}px !important; |
248 | } | 250 | } |
249 | .darwin .sidebar { | 251 | .darwin .sidebar { |
250 | height: ${width + sidebarSizeBias}px !important; | 252 | height: ${width + verticalStyleOffset - 3 - sizeDragArea}px !important; |
253 | } | ||
254 | .darwin .app .app__content { | ||
255 | padding-top: ${ | ||
256 | width + sidebarSizeBias + (sizeDragArea !== 0 ? 4 - sizeDragArea : 4) | ||
257 | }px !important; | ||
258 | } | ||
259 | .darwin .workspaces-drawer { | ||
260 | margin-top: -${ | ||
261 | width + verticalStyleOffset - 5 - sizeDragArea | ||
262 | }px !important; | ||
251 | } | 263 | } |
252 | .darwin .sidebar .sidebar__button--workspaces.is-active { | 264 | .darwin .sidebar .sidebar__button--workspaces.is-active { |
253 | height: ${width - sidebarSizeBias}px !important; | 265 | height: ${width - sidebarSizeBias}px !important; |
@@ -358,7 +370,7 @@ function generateStyle(settings) { | |||
358 | grayscaleServicesDim, | 370 | grayscaleServicesDim, |
359 | iconSize, | 371 | iconSize, |
360 | showDragArea, | 372 | showDragArea, |
361 | useVerticalStyle, | 373 | useHorizontalStyle, |
362 | alwaysShowWorkspaces, | 374 | alwaysShowWorkspaces, |
363 | showServiceName, | 375 | showServiceName, |
364 | } = settings; | 376 | } = settings; |
@@ -372,17 +384,18 @@ function generateStyle(settings) { | |||
372 | style += generateServiceRibbonWidthStyle( | 384 | style += generateServiceRibbonWidthStyle( |
373 | serviceRibbonWidth, | 385 | serviceRibbonWidth, |
374 | iconSize, | 386 | iconSize, |
375 | useVerticalStyle, | 387 | useHorizontalStyle, |
376 | showServiceName, | 388 | showServiceName, |
377 | sidebarServicesLocation, | 389 | sidebarServicesLocation, |
378 | useGrayscaleServices, | 390 | useGrayscaleServices, |
379 | grayscaleServicesDim, | 391 | grayscaleServicesDim, |
392 | showDragArea, | ||
380 | ); | 393 | ); |
381 | 394 | ||
382 | if (showDragArea) { | 395 | if (showDragArea) { |
383 | style += generateShowDragAreaStyle(accentColor); | 396 | style += generateShowDragAreaStyle(accentColor); |
384 | } | 397 | } |
385 | if (useVerticalStyle) { | 398 | if (useHorizontalStyle) { |
386 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | 399 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); |
387 | } else if (document.querySelector('#vertical-style')) { | 400 | } else if (document.querySelector('#vertical-style')) { |
388 | const link = document.querySelector('#vertical-style'); | 401 | const link = document.querySelector('#vertical-style'); |
@@ -403,7 +416,7 @@ function updateProgressbar(settings) { | |||
403 | barColors: { | 416 | barColors: { |
404 | '0': settings.progressbarAccentColor, | 417 | '0': settings.progressbarAccentColor, |
405 | }, | 418 | }, |
406 | shadowBlur: 5 | 419 | shadowBlur: 5, |
407 | }); | 420 | }); |
408 | } | 421 | } |
409 | 422 | ||
@@ -429,7 +442,7 @@ export default function initAppearance(stores) { | |||
429 | settings.all.app.sidebarServicesLocation, | 442 | settings.all.app.sidebarServicesLocation, |
430 | settings.all.app.useGrayscaleServices, | 443 | settings.all.app.useGrayscaleServices, |
431 | settings.all.app.grayscaleServicesDim, | 444 | settings.all.app.grayscaleServicesDim, |
432 | settings.all.app.useVerticalStyle, | 445 | settings.all.app.useHorizontalStyle, |
433 | settings.all.app.alwaysShowWorkspaces, | 446 | settings.all.app.alwaysShowWorkspaces, |
434 | settings.all.app.showServiceName, | 447 | settings.all.app.showServiceName, |
435 | ], | 448 | ], |