diff options
author | André Oliveira <oliveira.andrerodrigues95@gmail.com> | 2022-05-06 08:56:27 +0100 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-05-06 09:57:02 -0500 |
commit | abec4c80bf4241194e2704136db4f66d064cce38 (patch) | |
tree | 3e740790185b7eb178121b74b46ecb7e77fdfb3c /src/features/appearance | |
parent | docs: add cedricroijakkers as a contributor for infra (#109) [skip ci] (diff) | |
download | ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.tar.gz ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.tar.zst ferdium-app-abec4c80bf4241194e2704136db4f66d064cce38.zip |
Feature: Add monochromatic Service icons option with Dim adjustment
Diffstat (limited to 'src/features/appearance')
-rw-r--r-- | src/features/appearance/index.ts | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 04b4b059d..aa569af73 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -132,6 +132,8 @@ function generateServiceRibbonWidthStyle( | |||
132 | vertical, | 132 | vertical, |
133 | isLabelEnabled, | 133 | isLabelEnabled, |
134 | sidebarServicesLocation, | 134 | sidebarServicesLocation, |
135 | useGrayscaleServices, | ||
136 | grayscaleServicesDim, | ||
135 | ) { | 137 | ) { |
136 | const width = Number(widthStr); | 138 | const width = Number(widthStr); |
137 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 139 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
@@ -205,6 +207,10 @@ function generateServiceRibbonWidthStyle( | |||
205 | break; | 207 | break; |
206 | } | 208 | } |
207 | 209 | ||
210 | const graysacleServices = | ||
211 | `filter: grayscale(1); | ||
212 | opacity: ${grayscaleServicesDim}%;` | ||
213 | |||
208 | return vertical | 214 | return vertical |
209 | ? ` | 215 | ? ` |
210 | .sidebar { | 216 | .sidebar { |
@@ -222,6 +228,7 @@ function generateServiceRibbonWidthStyle( | |||
222 | } | 228 | } |
223 | .tab-item .tab-item__icon { | 229 | .tab-item .tab-item__icon { |
224 | width: ${minimumAdjustedIconSize}px !important; | 230 | width: ${minimumAdjustedIconSize}px !important; |
231 | ${useGrayscaleServices ? graysacleServices : null}, | ||
225 | } | 232 | } |
226 | .sidebar__button { | 233 | .sidebar__button { |
227 | font-size: ${width / 3}px !important; | 234 | font-size: ${width / 3}px !important; |
@@ -258,6 +265,7 @@ function generateServiceRibbonWidthStyle( | |||
258 | } | 265 | } |
259 | .tab-item .tab-item__icon { | 266 | .tab-item .tab-item__icon { |
260 | width: ${minimumAdjustedIconSize}px !important; | 267 | width: ${minimumAdjustedIconSize}px !important; |
268 | ${useGrayscaleServices ? graysacleServices : null}, | ||
261 | } | 269 | } |
262 | .sidebar__button { | 270 | .sidebar__button { |
263 | font-size: ${width / 3}px !important; | 271 | font-size: ${width / 3}px !important; |
@@ -342,6 +350,8 @@ function generateStyle(settings) { | |||
342 | accentColor, | 350 | accentColor, |
343 | serviceRibbonWidth, | 351 | serviceRibbonWidth, |
344 | sidebarServicesLocation, | 352 | sidebarServicesLocation, |
353 | useGrayscaleServices, | ||
354 | grayscaleServicesDim, | ||
345 | iconSize, | 355 | iconSize, |
346 | showDragArea, | 356 | showDragArea, |
347 | useVerticalStyle, | 357 | useVerticalStyle, |
@@ -361,6 +371,8 @@ function generateStyle(settings) { | |||
361 | useVerticalStyle, | 371 | useVerticalStyle, |
362 | showServiceName, | 372 | showServiceName, |
363 | sidebarServicesLocation, | 373 | sidebarServicesLocation, |
374 | useGrayscaleServices, | ||
375 | grayscaleServicesDim, | ||
364 | ); | 376 | ); |
365 | 377 | ||
366 | if (showDragArea) { | 378 | if (showDragArea) { |
@@ -397,6 +409,8 @@ export default function initAppearance(stores) { | |||
397 | settings.all.app.iconSize, | 409 | settings.all.app.iconSize, |
398 | settings.all.app.showDragArea, | 410 | settings.all.app.showDragArea, |
399 | settings.all.app.sidebarServicesLocation, | 411 | settings.all.app.sidebarServicesLocation, |
412 | settings.all.app.useGrayscaleServices, | ||
413 | settings.all.app.grayscaleServicesDim, | ||
400 | settings.all.app.useVerticalStyle, | 414 | settings.all.app.useVerticalStyle, |
401 | settings.all.app.alwaysShowWorkspaces, | 415 | settings.all.app.alwaysShowWorkspaces, |
402 | settings.all.app.showServiceName, | 416 | settings.all.app.showServiceName, |