diff options
author | vantezzen <hello@vantezzen.io> | 2019-11-28 17:07:32 +0100 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-11-28 17:07:32 +0100 |
commit | 6eb6f75223d3eebcf31b33897d72f07fe93f02ad (patch) | |
tree | 572e681b535ba102dd10df9096b6e0ae72e0506b /src/features/appearance | |
parent | Disable artifacts storage on AppVeyor (diff) | |
download | ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.tar.gz ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.tar.zst ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.zip |
Add appearance feature handler
Diffstat (limited to 'src/features/appearance')
-rw-r--r-- | src/features/appearance/index.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js new file mode 100644 index 000000000..cd4d60c20 --- /dev/null +++ b/src/features/appearance/index.js | |||
@@ -0,0 +1,107 @@ | |||
1 | import { reaction } from 'mobx'; | ||
2 | import themeInfo from '../../assets/themeInfo.json'; | ||
3 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
4 | |||
5 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | ||
6 | |||
7 | // Additional styles needed to make accent colors work properly | ||
8 | // "[ACCENT]" will be replaced with the accent color | ||
9 | const ACCENT_ADDITIONAL_STYLES = ` | ||
10 | .franz-form__button { | ||
11 | background: inherit !important; | ||
12 | border: 2px solid [ACCENT] !important; | ||
13 | } | ||
14 | `; | ||
15 | |||
16 | function createStyleElement() { | ||
17 | const styles = document.createElement('style'); | ||
18 | styles.id = STYLE_ELEMENT_ID; | ||
19 | |||
20 | document.querySelector('head').appendChild(styles); | ||
21 | } | ||
22 | |||
23 | function setAppearance(style) { | ||
24 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | ||
25 | |||
26 | styleElement.innerHTML = style; | ||
27 | } | ||
28 | |||
29 | function generateAccentStyle(color) { | ||
30 | let style = ''; | ||
31 | |||
32 | Object.keys(themeInfo).forEach((property) => { | ||
33 | style += ` | ||
34 | ${themeInfo[property]} { | ||
35 | ${property}: ${color}; | ||
36 | } | ||
37 | `; | ||
38 | }); | ||
39 | |||
40 | style += ACCENT_ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color); | ||
41 | |||
42 | return style; | ||
43 | } | ||
44 | |||
45 | function generateServiceRibbonWidthStyle(width) { | ||
46 | return ` | ||
47 | .sidebar { | ||
48 | width: ${width}px !important; | ||
49 | } | ||
50 | .tab-item { | ||
51 | width: ${width - 2}px !important; | ||
52 | height: ${width - 5}px !important; | ||
53 | } | ||
54 | .tab-item .tab-item__icon { | ||
55 | width: ${width / 2}px !important; | ||
56 | } | ||
57 | ` | ||
58 | } | ||
59 | |||
60 | function generateStyle(settings) { | ||
61 | let style = ''; | ||
62 | |||
63 | const { | ||
64 | accentColor, | ||
65 | serviceRibbonWidth | ||
66 | } = settings; | ||
67 | |||
68 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { | ||
69 | style += generateAccentStyle(accentColor); | ||
70 | } | ||
71 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth) { | ||
72 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth); | ||
73 | } | ||
74 | |||
75 | return style; | ||
76 | } | ||
77 | function updateStyle(settings) { | ||
78 | const style = generateStyle(settings); | ||
79 | setAppearance(style); | ||
80 | } | ||
81 | |||
82 | export default function initAppearance(stores) { | ||
83 | const { settings } = stores; | ||
84 | createStyleElement(); | ||
85 | |||
86 | // Update accent color | ||
87 | reaction( | ||
88 | () => ( | ||
89 | settings.all.app.accentColor | ||
90 | ), | ||
91 | () => { | ||
92 | updateStyle(settings.all.app); | ||
93 | }, | ||
94 | { | ||
95 | fireImmediately: true, | ||
96 | }, | ||
97 | ); | ||
98 | // Update service ribbon width | ||
99 | reaction( | ||
100 | () => ( | ||
101 | settings.all.app.serviceRibbonWidth | ||
102 | ), | ||
103 | () => { | ||
104 | updateStyle(settings.all.app); | ||
105 | }, | ||
106 | ); | ||
107 | } | ||