diff options
author | vantezzen <hello@vantezzen.io> | 2020-01-31 21:03:49 +0100 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2020-01-31 21:03:49 +0100 |
commit | d54ceb639862788c053e21f217ca39ac36003db6 (patch) | |
tree | 40bfd8bb6a8a85c222f9c67d7dd862a835394e80 /src/features | |
parent | Add publish debug log option (diff) | |
parent | Merge branch 'develop' of https://github.com/getferdi/ferdi into develop (diff) | |
download | ferdium-app-d54ceb639862788c053e21f217ca39ac36003db6.tar.gz ferdium-app-d54ceb639862788c053e21f217ca39ac36003db6.tar.zst ferdium-app-d54ceb639862788c053e21f217ca39ac36003db6.zip |
Merge branch 'develop' into publish-debug
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/accentColor/index.js | 55 | ||||
-rw-r--r-- | src/features/appearance/index.js | 107 | ||||
-rw-r--r-- | src/features/quickSwitch/Component.js | 8 | ||||
-rw-r--r-- | src/features/serviceProxy/index.js | 3 |
4 files changed, 115 insertions, 58 deletions
diff --git a/src/features/accentColor/index.js b/src/features/accentColor/index.js deleted file mode 100644 index a0f57a2fa..000000000 --- a/src/features/accentColor/index.js +++ /dev/null | |||
@@ -1,55 +0,0 @@ | |||
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 = 'accent-color'; | ||
6 | |||
7 | function createAccentStyleElement() { | ||
8 | const styles = document.createElement('style'); | ||
9 | styles.id = STYLE_ELEMENT_ID; | ||
10 | |||
11 | document.querySelector('head').appendChild(styles); | ||
12 | } | ||
13 | |||
14 | function setAccentStyle(style) { | ||
15 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | ||
16 | styleElement.innerHTML = style; | ||
17 | } | ||
18 | |||
19 | function generateAccentStyle(color) { | ||
20 | let style = ''; | ||
21 | |||
22 | Object.keys(themeInfo).forEach((property) => { | ||
23 | style += ` | ||
24 | ${themeInfo[property]} { | ||
25 | ${property}: ${color}; | ||
26 | } | ||
27 | `; | ||
28 | }); | ||
29 | |||
30 | return style; | ||
31 | } | ||
32 | |||
33 | export default function initAccentColor(stores) { | ||
34 | const { settings } = stores; | ||
35 | createAccentStyleElement(); | ||
36 | |||
37 | // Update accent color | ||
38 | reaction( | ||
39 | () => ( | ||
40 | settings.all.app.accentColor | ||
41 | ), | ||
42 | (color) => { | ||
43 | if (color === DEFAULT_APP_SETTINGS.accentColor) { | ||
44 | // Reset accent style to return to default color scheme | ||
45 | setAccentStyle(''); | ||
46 | } else { | ||
47 | const style = generateAccentStyle(color); | ||
48 | setAccentStyle(style); | ||
49 | } | ||
50 | }, | ||
51 | { | ||
52 | fireImmediately: true, | ||
53 | }, | ||
54 | ); | ||
55 | } | ||
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js new file mode 100644 index 000000000..8a81054df --- /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 | } | ||
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index 797589e9b..0f44385e1 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -56,6 +56,9 @@ const styles = theme => ({ | |||
56 | marginBottom: 10, | 56 | marginBottom: 10, |
57 | display: 'flex', | 57 | display: 'flex', |
58 | alignItems: 'center', | 58 | alignItems: 'center', |
59 | '&:last-child': { | ||
60 | marginBottom: 0, | ||
61 | }, | ||
59 | '&:hover': { | 62 | '&:hover': { |
60 | background: theme.styleTypes.primary.accent, | 63 | background: theme.styleTypes.primary.accent, |
61 | color: theme.styleTypes.primary.contrast, | 64 | color: theme.styleTypes.primary.contrast, |
@@ -319,7 +322,10 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
319 | ))} | 322 | ))} |
320 | </div> | 323 | </div> |
321 | 324 | ||
322 | <p>{intl.formatMessage(messages.info)}</p> | 325 | <p> |
326 | <br /> | ||
327 | {intl.formatMessage(messages.info)} | ||
328 | </p> | ||
323 | </Modal> | 329 | </Modal> |
324 | ); | 330 | ); |
325 | } | 331 | } |
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js index e9a01b156..e78607667 100644 --- a/src/features/serviceProxy/index.js +++ b/src/features/serviceProxy/index.js | |||
@@ -22,7 +22,6 @@ export default function init(stores) { | |||
22 | config.isIncludedInCurrentPlan = true; | 22 | config.isIncludedInCurrentPlan = true; |
23 | 23 | ||
24 | const services = stores.services.enabled; | 24 | const services = stores.services.enabled; |
25 | const isPremiumUser = stores.user.data.isPremium; | ||
26 | const proxySettings = stores.settings.proxy; | 25 | const proxySettings = stores.settings.proxy; |
27 | 26 | ||
28 | debug('Service Proxy autorun'); | 27 | debug('Service Proxy autorun'); |
@@ -30,7 +29,7 @@ export default function init(stores) { | |||
30 | services.forEach((service) => { | 29 | services.forEach((service) => { |
31 | const s = session.fromPartition(`persist:service-${service.id}`); | 30 | const s = session.fromPartition(`persist:service-${service.id}`); |
32 | 31 | ||
33 | if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) { | 32 | if (config.isEnabled) { |
34 | const serviceProxyConfig = proxySettings[service.id]; | 33 | const serviceProxyConfig = proxySettings[service.id]; |
35 | 34 | ||
36 | if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) { | 35 | if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) { |