diff options
Diffstat (limited to 'src/features/appearance')
-rw-r--r-- | src/features/appearance/index.js | 26 |
1 files changed, 20 insertions, 6 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index f99e69b0d..6dcdfc986 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import { reaction } from 'mobx'; | 1 | import { reaction } from 'mobx'; |
2 | import themeInfo from '../../assets/themeInfo.json'; | 2 | import themeInfo from '../../assets/themeInfo.json'; |
3 | import { DEFAULT_APP_SETTINGS } from '../../config'; | 3 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; |
4 | 4 | ||
5 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 5 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
6 | 6 | ||
@@ -42,17 +42,20 @@ function generateAccentStyle(color) { | |||
42 | return style; | 42 | return style; |
43 | } | 43 | } |
44 | 44 | ||
45 | function generateServiceRibbonWidthStyle(width) { | 45 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) { |
46 | const width = Number(widthStr); | ||
47 | const iconSize = Number(iconSizeStr) - iconSizeBias; | ||
48 | |||
46 | return ` | 49 | return ` |
47 | .sidebar { | 50 | .sidebar { |
48 | width: ${width}px !important; | 51 | width: ${width}px !important; |
49 | } | 52 | } |
50 | .tab-item { | 53 | .tab-item { |
51 | width: ${width - 2}px !important; | 54 | width: ${width - 2}px !important; |
52 | height: ${width - 5}px !important; | 55 | height: ${width - 5 + iconSize}px !important; |
53 | } | 56 | } |
54 | .tab-item .tab-item__icon { | 57 | .tab-item .tab-item__icon { |
55 | width: ${width / 2}px !important; | 58 | width: ${(width / 2) + iconSize}px !important; |
56 | } | 59 | } |
57 | .sidebar__button { | 60 | .sidebar__button { |
58 | font-size: ${width / 3}px !important; | 61 | font-size: ${width / 3}px !important; |
@@ -66,13 +69,15 @@ function generateStyle(settings) { | |||
66 | const { | 69 | const { |
67 | accentColor, | 70 | accentColor, |
68 | serviceRibbonWidth, | 71 | serviceRibbonWidth, |
72 | iconSize, | ||
69 | } = settings; | 73 | } = settings; |
70 | 74 | ||
71 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { | 75 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { |
72 | style += generateAccentStyle(accentColor); | 76 | style += generateAccentStyle(accentColor); |
73 | } | 77 | } |
74 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth) { | 78 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth |
75 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth); | 79 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { |
80 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize); | ||
76 | } | 81 | } |
77 | 82 | ||
78 | return style; | 83 | return style; |
@@ -107,4 +112,13 @@ export default function initAppearance(stores) { | |||
107 | updateStyle(settings.all.app); | 112 | updateStyle(settings.all.app); |
108 | }, | 113 | }, |
109 | ); | 114 | ); |
115 | // Update icon size | ||
116 | reaction( | ||
117 | () => ( | ||
118 | settings.all.app.iconSize | ||
119 | ), | ||
120 | () => { | ||
121 | updateStyle(settings.all.app); | ||
122 | }, | ||
123 | ); | ||
110 | } | 124 | } |