diff options
Diffstat (limited to 'src/features/appearance/index.js')
-rw-r--r-- | src/features/appearance/index.js | 80 |
1 files changed, 56 insertions, 24 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index 039ef7711..3bd6a6575 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -1,18 +1,10 @@ | |||
1 | import color from 'color'; | ||
1 | import { reaction } from 'mobx'; | 2 | import { reaction } from 'mobx'; |
2 | import themeInfo from '../../assets/themeInfo.json'; | 3 | import themeInfo from '../../assets/themeInfo.json'; |
3 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; | 4 | import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config'; |
4 | 5 | ||
5 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 6 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
6 | 7 | ||
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() { | 8 | function createStyleElement() { |
17 | const styles = document.createElement('style'); | 9 | const styles = document.createElement('style'); |
18 | styles.id = STYLE_ELEMENT_ID; | 10 | styles.id = STYLE_ELEMENT_ID; |
@@ -26,18 +18,53 @@ function setAppearance(style) { | |||
26 | styleElement.innerHTML = style; | 18 | styleElement.innerHTML = style; |
27 | } | 19 | } |
28 | 20 | ||
29 | function generateAccentStyle(color) { | 21 | function generateAccentStyle(accentColorStr) { |
30 | let style = ''; | 22 | let style = ''; |
31 | 23 | ||
32 | Object.keys(themeInfo).forEach((property) => { | 24 | Object.keys(themeInfo).forEach((property) => { |
33 | style += ` | 25 | style += ` |
34 | ${themeInfo[property]} { | 26 | ${themeInfo[property]} { |
35 | ${property}: ${color}; | 27 | ${property}: ${accentColorStr}; |
36 | } | 28 | } |
37 | `; | 29 | `; |
38 | }); | 30 | }); |
39 | 31 | ||
40 | style += ACCENT_ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color); | 32 | let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); |
33 | try { | ||
34 | accentColor = color(accentColorStr); | ||
35 | } catch (e) { | ||
36 | // Ignore invalid accent color. | ||
37 | } | ||
38 | const darkerColorStr = accentColor.darken(0.05).hex(); | ||
39 | style += ` | ||
40 | a.button:hover, button.button:hover { | ||
41 | background: ${accentColor.darken(0.1).hex()}; | ||
42 | } | ||
43 | |||
44 | .franz-form__button:hover, | ||
45 | .franz-form__button.franz-form__button--inverted:hover, | ||
46 | .settings .settings__close:hover, | ||
47 | .theme__dark .franz-form__button:hover, | ||
48 | .theme__dark .franz-form__button.franz-form__button--inverted:hover, | ||
49 | .theme__dark .settings .settings__close:hover { | ||
50 | background: ${darkerColorStr}; | ||
51 | } | ||
52 | |||
53 | .franz-form__button:active, | ||
54 | .theme__dark .franz-form__button:active { | ||
55 | background: ${darkerColorStr}; | ||
56 | } | ||
57 | |||
58 | .theme__dark .franz-form__button.franz-form__button--inverted, | ||
59 | .franz-form__button.franz-form__button--inverted { | ||
60 | background: none; | ||
61 | border-color: ${accentColorStr}; | ||
62 | } | ||
63 | |||
64 | .tab-item.is-active { | ||
65 | background: ${accentColor.lighten(0.35).hex()}; | ||
66 | } | ||
67 | `; | ||
41 | 68 | ||
42 | return style; | 69 | return style; |
43 | } | 70 | } |
@@ -60,7 +87,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | |||
60 | } | 87 | } |
61 | ` : ` | 88 | ` : ` |
62 | .sidebar { | 89 | .sidebar { |
63 | width: ${width - 1}px !important; | 90 | width: ${width - 2}px !important; |
64 | } | 91 | } |
65 | .tab-item { | 92 | .tab-item { |
66 | width: ${width - 2}px !important; | 93 | width: ${width - 2}px !important; |
@@ -102,22 +129,27 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | |||
102 | document.head.appendChild(link); | 129 | document.head.appendChild(link); |
103 | } | 130 | } |
104 | const width = Number(widthStr); | 131 | const width = Number(widthStr); |
132 | const sidebarWidthStr = `${width - 4}px`; | ||
105 | 133 | ||
106 | return ` | 134 | return ` |
107 | .app_service { | 135 | .sidebar { |
108 | top: ${width}px !important; | 136 | height: ${sidebarWidthStr} !important; |
137 | ${alwaysShowWorkspaces ? ` | ||
138 | width: calc(100% - 300px) !important; | ||
139 | ` : ''} | ||
109 | } | 140 | } |
110 | .darwin .sidebar { | 141 | |
111 | height: ${width + 19}px !important; | 142 | .sidebar .sidebar__button { |
143 | width: ${width}px; | ||
112 | } | 144 | } |
113 | .darwin .sidebar .sidebar__button--workspaces.is-active { | 145 | |
114 | height: ${width - 20}px !important; | 146 | .app .app__content { |
147 | padding-top: ${sidebarWidthStr} !important; | ||
115 | } | 148 | } |
116 | ${alwaysShowWorkspaces ? ` | 149 | |
117 | .sidebar { | 150 | .workspaces-drawer { |
118 | width: calc(100% - 300px) !important; | 151 | maring-top: -${sidebarWidthStr} !important; |
119 | } | 152 | } |
120 | ` : ''} | ||
121 | `; | 153 | `; |
122 | } | 154 | } |
123 | 155 | ||
@@ -145,7 +177,7 @@ function generateStyle(settings) { | |||
145 | alwaysShowWorkspaces, | 177 | alwaysShowWorkspaces, |
146 | } = settings; | 178 | } = settings; |
147 | 179 | ||
148 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { | 180 | if (accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()) { |
149 | style += generateAccentStyle(accentColor); | 181 | style += generateAccentStyle(accentColor); |
150 | } | 182 | } |
151 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth | 183 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth |