diff options
author | Vijay A <vraravam@users.noreply.github.com> | 2022-06-18 11:47:47 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-06-18 22:16:09 +0530 |
commit | 8c3323bc6c1743f04dee7598e186e07cd793ab7f (patch) | |
tree | 16b7421bb46cece0692b22e74ed228ad153bea48 /src/features/appearance | |
parent | 6.0.0-nightly.66 [skip ci] (diff) | |
download | ferdium-app-8c3323bc6c1743f04dee7598e186e07cd793ab7f.tar.gz ferdium-app-8c3323bc6c1743f04dee7598e186e07cd793ab7f.tar.zst ferdium-app-8c3323bc6c1743f04dee7598e186e07cd793ab7f.zip |
Add ability to set the progressbar color from the Settings screen
Diffstat (limited to 'src/features/appearance')
-rw-r--r-- | src/features/appearance/index.ts | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index 7562475a6..42de5e4cc 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -1,5 +1,7 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { reaction } from 'mobx'; | 2 | import { reaction } from 'mobx'; |
3 | import TopBarProgress from 'react-topbar-progress-indicator'; | ||
4 | |||
3 | import { isWindows, isLinux } from '../../environment'; | 5 | import { isWindows, isLinux } from '../../environment'; |
4 | import { | 6 | import { |
5 | DEFAULT_APP_SETTINGS, | 7 | DEFAULT_APP_SETTINGS, |
@@ -9,8 +11,6 @@ import { | |||
9 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, | 11 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, |
10 | } from '../../config'; | 12 | } from '../../config'; |
11 | 13 | ||
12 | |||
13 | |||
14 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 14 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
15 | 15 | ||
16 | function createStyleElement() { | 16 | function createStyleElement() { |
@@ -398,19 +398,33 @@ function generateStyle(settings) { | |||
398 | 398 | ||
399 | return style; | 399 | return style; |
400 | } | 400 | } |
401 | |||
402 | function updateProgressbar(settings) { | ||
403 | TopBarProgress.config({ | ||
404 | barThickness: 4, | ||
405 | barColors: { | ||
406 | '0': settings.progressbarAccentColor, | ||
407 | }, | ||
408 | shadowBlur: 5 | ||
409 | }); | ||
410 | } | ||
411 | |||
401 | function updateStyle(settings) { | 412 | function updateStyle(settings) { |
402 | const style = generateStyle(settings); | 413 | const style = generateStyle(settings); |
403 | setAppearance(style); | 414 | setAppearance(style); |
415 | updateProgressbar(settings); | ||
404 | } | 416 | } |
405 | 417 | ||
406 | export default function initAppearance(stores) { | 418 | export default function initAppearance(stores) { |
407 | const { settings } = stores; | 419 | const { settings } = stores; |
408 | createStyleElement(); | 420 | createStyleElement(); |
421 | updateProgressbar(settings); | ||
409 | 422 | ||
410 | // Update style when settings change | 423 | // Update style when settings change |
411 | reaction( | 424 | reaction( |
412 | () => [ | 425 | () => [ |
413 | settings.all.app.accentColor, | 426 | settings.all.app.accentColor, |
427 | settings.all.app.progressbarAccentColor, | ||
414 | settings.all.app.serviceRibbonWidth, | 428 | settings.all.app.serviceRibbonWidth, |
415 | settings.all.app.iconSize, | 429 | settings.all.app.iconSize, |
416 | settings.all.app.showDragArea, | 430 | settings.all.app.showDragArea, |