diff options
Diffstat (limited to 'src/features/appearance/index.ts')
-rw-r--r-- | src/features/appearance/index.ts | 36 |
1 files changed, 35 insertions, 1 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 094d93dcc..04b4b059d 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -1,7 +1,15 @@ | |||
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 { isWindows, isLinux } from '../../environment'; |
4 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; | 4 | import { |
5 | DEFAULT_APP_SETTINGS, | ||
6 | iconSizeBias, | ||
7 | SIDEBAR_SERVICES_LOCATION_TOPLEFT, | ||
8 | SIDEBAR_SERVICES_LOCATION_CENTER, | ||
9 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, | ||
10 | } from '../../config'; | ||
11 | |||
12 | |||
5 | 13 | ||
6 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 14 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
7 | 15 | ||
@@ -123,6 +131,7 @@ function generateServiceRibbonWidthStyle( | |||
123 | iconSizeStr, | 131 | iconSizeStr, |
124 | vertical, | 132 | vertical, |
125 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | ||
126 | ) { | 135 | ) { |
127 | const width = Number(widthStr); | 136 | const width = Number(widthStr); |
128 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 137 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -180,12 +189,31 @@ function generateServiceRibbonWidthStyle( | |||
180 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value | 189 | // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value |
181 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); | 190 | const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2); |
182 | 191 | ||
192 | let sidebarServicesAlignment; | ||
193 | switch (sidebarServicesLocation) { | ||
194 | case SIDEBAR_SERVICES_LOCATION_TOPLEFT: | ||
195 | sidebarServicesAlignment = vertical ? "left" : "start"; | ||
196 | break; | ||
197 | case SIDEBAR_SERVICES_LOCATION_CENTER: | ||
198 | sidebarServicesAlignment = vertical ? "center" : "center"; | ||
199 | break; | ||
200 | case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT: | ||
201 | sidebarServicesAlignment = vertical ? "right" : "end"; | ||
202 | break; | ||
203 | default: | ||
204 | sidebarServicesAlignment = vertical ? "left" : "start"; | ||
205 | break; | ||
206 | } | ||
207 | |||
183 | return vertical | 208 | return vertical |
184 | ? ` | 209 | ? ` |
185 | .sidebar { | 210 | .sidebar { |
186 | height: ${width}px !important; | 211 | height: ${width}px !important; |
187 | overflow: hidden !important; | 212 | overflow: hidden !important; |
188 | } | 213 | } |
214 | .sidebar div { | ||
215 | justify-content: ${sidebarServicesAlignment}; | ||
216 | } | ||
189 | .tab-item { | 217 | .tab-item { |
190 | height: ${width - tabItemWidthBias}px !important; | 218 | height: ${width - tabItemWidthBias}px !important; |
191 | width: ${width + iconSize + tabItemHeightBias}px !important; | 219 | width: ${width + iconSize + tabItemHeightBias}px !important; |
@@ -221,6 +249,9 @@ function generateServiceRibbonWidthStyle( | |||
221 | .sidebar { | 249 | .sidebar { |
222 | width: ${width}px !important; | 250 | width: ${width}px !important; |
223 | } | 251 | } |
252 | .tabs { | ||
253 | justify-content: ${sidebarServicesAlignment}; | ||
254 | } | ||
224 | .tab-item { | 255 | .tab-item { |
225 | width: ${width}px !important; | 256 | width: ${width}px !important; |
226 | height: ${width - tabItemWidthBias}px !important; | 257 | height: ${width - tabItemWidthBias}px !important; |
@@ -310,6 +341,7 @@ function generateStyle(settings) { | |||
310 | const { | 341 | const { |
311 | accentColor, | 342 | accentColor, |
312 | serviceRibbonWidth, | 343 | serviceRibbonWidth, |
344 | sidebarServicesLocation, | ||
313 | iconSize, | 345 | iconSize, |
314 | showDragArea, | 346 | showDragArea, |
315 | useVerticalStyle, | 347 | useVerticalStyle, |
@@ -328,6 +360,7 @@ function generateStyle(settings) { | |||
328 | iconSize, | 360 | iconSize, |
329 | useVerticalStyle, | 361 | useVerticalStyle, |
330 | showServiceName, | 362 | showServiceName, |
363 | sidebarServicesLocation, | ||
331 | ); | 364 | ); |
332 | 365 | ||
333 | if (showDragArea) { | 366 | if (showDragArea) { |
@@ -363,6 +396,7 @@ export default function initAppearance(stores) { | |||
363 | settings.all.app.serviceRibbonWidth, | 396 | settings.all.app.serviceRibbonWidth, |
364 | settings.all.app.iconSize, | 397 | settings.all.app.iconSize, |
365 | settings.all.app.showDragArea, | 398 | settings.all.app.showDragArea, |
399 | settings.all.app.sidebarServicesLocation, | ||
366 | settings.all.app.useVerticalStyle, | 400 | settings.all.app.useVerticalStyle, |
367 | settings.all.app.alwaysShowWorkspaces, | 401 | settings.all.app.alwaysShowWorkspaces, |
368 | settings.all.app.showServiceName, | 402 | settings.all.app.showServiceName, |