diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-05-01 12:34:01 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-01 12:34:01 +0100 |
commit | 2ad137949c09420660917647723aced7dcef9396 (patch) | |
tree | 3552811e3663db7ee0214a6d4bb91096c4e3dbdf /src | |
parent | 6.0.0-nightly.20 [skip ci] (diff) | |
download | ferdium-app-2ad137949c09420660917647723aced7dcef9396.tar.gz ferdium-app-2ad137949c09420660917647723aced7dcef9396.tar.zst ferdium-app-2ad137949c09420660917647723aced7dcef9396.zip |
Fix horizontal sidebar rendering overlapping the active service (#70)
* Revert "Fixes existing gap on horizontal sidebar"
This reverts commit 1a3b2f989d8e209ccfd2aab3cdce91a49b317c87.
* Fixup sidebar only for windows
* Tries to generalize the style without vertical.scss
* Fix review comments
* Fixes it on Linux
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/features/appearance/index.ts | 26 | ||||
-rw-r--r-- | src/styles/vertical.scss | 2 |
2 files changed, 15 insertions, 13 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index e84f0f0f4..faf7ffd37 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { reaction } from 'mobx'; | 2 | import { reaction } from 'mobx'; |
3 | import { isWindows, isLinux } from '../../environment'; | ||
3 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; | 4 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; |
4 | 5 | ||
5 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 6 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
@@ -172,6 +173,10 @@ function generateServiceRibbonWidthStyle( | |||
172 | tabItemHeightBias = -5; | 173 | tabItemHeightBias = -5; |
173 | } | 174 | } |
174 | 175 | ||
176 | if (isWindows || isLinux) { | ||
177 | sidebarSizeBias = 0; | ||
178 | } | ||
179 | |||
175 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value | 180 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value |
176 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); | 181 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); |
177 | 182 | ||
@@ -194,7 +199,7 @@ function generateServiceRibbonWidthStyle( | |||
194 | font-size: ${width / 3}px !important; | 199 | font-size: ${width / 3}px !important; |
195 | } | 200 | } |
196 | .app .app__content { | 201 | .app .app__content { |
197 | padding-top: ${width}px !important; | 202 | padding-top: ${width + sidebarSizeBias}px !important; |
198 | } | 203 | } |
199 | .workspaces-drawer { | 204 | .workspaces-drawer { |
200 | margin-top: -${width}px !important; | 205 | margin-top: -${width}px !important; |
@@ -317,17 +322,14 @@ function generateStyle(settings) { | |||
317 | ) { | 322 | ) { |
318 | style += generateAccentStyle(accentColor); | 323 | style += generateAccentStyle(accentColor); |
319 | } | 324 | } |
320 | if ( | 325 | |
321 | serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth || | 326 | style += generateServiceRibbonWidthStyle( |
322 | iconSize !== DEFAULT_APP_SETTINGS.iconSize | 327 | serviceRibbonWidth, |
323 | ) { | 328 | iconSize, |
324 | style += generateServiceRibbonWidthStyle( | 329 | useVerticalStyle, |
325 | serviceRibbonWidth, | 330 | showServiceName, |
326 | iconSize, | 331 | ); |
327 | useVerticalStyle, | 332 | |
328 | showServiceName, | ||
329 | ); | ||
330 | } | ||
331 | if (showDragArea) { | 333 | if (showDragArea) { |
332 | style += generateShowDragAreaStyle(accentColor); | 334 | style += generateShowDragAreaStyle(accentColor); |
333 | } | 335 | } |
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index 40c88cd9f..166092a83 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -69,7 +69,7 @@ $tabitem-bias: 30px; | |||
69 | } | 69 | } |
70 | 70 | ||
71 | .app .app__content { | 71 | .app .app__content { |
72 | padding-top: $sidebar-width; | 72 | padding-top: $sidebar-width + $sidebar-bias; |
73 | } | 73 | } |
74 | 74 | ||
75 | .workspaces-drawer { | 75 | .workspaces-drawer { |