diff options
author | 2020-10-11 20:16:18 +0200 | |
---|---|---|
committer | 2020-10-11 19:16:18 +0100 | |
commit | 3eb55287d9df74dae7e8196487e7038fec04d4ce (patch) | |
tree | b58ec428c018102b49ee719532a3c27e140d2a78 /src/features/appearance/index.js | |
parent | Improve Ferdi's design (#977) (diff) | |
download | ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.tar.gz ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.tar.zst ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.zip |
Add vertical style and "Always show workspace drawer" setting (#567)
Diffstat (limited to 'src/features/appearance/index.js')
-rw-r--r-- | src/features/appearance/index.js | 113 |
1 files changed, 78 insertions, 35 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index a14d1461e..039ef7711 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -42,13 +42,25 @@ function generateAccentStyle(color) { | |||
42 | return style; | 42 | return style; |
43 | } | 43 | } |
44 | 44 | ||
45 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) { | 45 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { |
46 | const width = Number(widthStr); | 46 | const width = Number(widthStr); |
47 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 47 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
48 | 48 | ||
49 | return ` | 49 | return vertical ? ` |
50 | .tab-item { | ||
51 | width: ${width - 2}px !important; | ||
52 | height: ${width - 5 + iconSize}px !important; | ||
53 | min-height: unset; | ||
54 | } | ||
55 | .tab-item .tab-item__icon { | ||
56 | width: ${(width / 2) + iconSize}px !important; | ||
57 | } | ||
58 | .sidebar__button { | ||
59 | font-size: ${width / 3}px !important; | ||
60 | } | ||
61 | ` : ` | ||
50 | .sidebar { | 62 | .sidebar { |
51 | width: ${width}px !important; | 63 | width: ${width - 1}px !important; |
52 | } | 64 | } |
53 | .tab-item { | 65 | .tab-item { |
54 | width: ${width - 2}px !important; | 66 | width: ${width - 2}px !important; |
@@ -79,6 +91,48 @@ function generateShowDragAreaStyle(accentColor) { | |||
79 | `; | 91 | `; |
80 | } | 92 | } |
81 | 93 | ||
94 | function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | ||
95 | if (!document.getElementById('vertical-style')) { | ||
96 | const link = document.createElement('link'); | ||
97 | link.id = 'vertical-style'; | ||
98 | link.rel = 'stylesheet'; | ||
99 | link.type = 'text/css'; | ||
100 | link.href = './styles/vertical.css'; | ||
101 | |||
102 | document.head.appendChild(link); | ||
103 | } | ||
104 | const width = Number(widthStr); | ||
105 | |||
106 | return ` | ||
107 | .app_service { | ||
108 | top: ${width}px !important; | ||
109 | } | ||
110 | .darwin .sidebar { | ||
111 | height: ${width + 19}px !important; | ||
112 | } | ||
113 | .darwin .sidebar .sidebar__button--workspaces.is-active { | ||
114 | height: ${width - 20}px !important; | ||
115 | } | ||
116 | ${alwaysShowWorkspaces ? ` | ||
117 | .sidebar { | ||
118 | width: calc(100% - 300px) !important; | ||
119 | } | ||
120 | ` : ''} | ||
121 | `; | ||
122 | } | ||
123 | |||
124 | function generateOpenWorkspaceStyle() { | ||
125 | return ` | ||
126 | .app .app__content { | ||
127 | width: 100%; | ||
128 | transform: translateX(0px); | ||
129 | } | ||
130 | .sidebar__button--workspaces { | ||
131 | display: none; | ||
132 | } | ||
133 | `; | ||
134 | } | ||
135 | |||
82 | function generateStyle(settings) { | 136 | function generateStyle(settings) { |
83 | let style = ''; | 137 | let style = ''; |
84 | 138 | ||
@@ -87,6 +141,8 @@ function generateStyle(settings) { | |||
87 | serviceRibbonWidth, | 141 | serviceRibbonWidth, |
88 | iconSize, | 142 | iconSize, |
89 | showDragArea, | 143 | showDragArea, |
144 | useVerticalStyle, | ||
145 | alwaysShowWorkspaces, | ||
90 | } = settings; | 146 | } = settings; |
91 | 147 | ||
92 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { | 148 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { |
@@ -94,11 +150,20 @@ function generateStyle(settings) { | |||
94 | } | 150 | } |
95 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth | 151 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth |
96 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { | 152 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { |
97 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize); | 153 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle); |
98 | } | 154 | } |
99 | if (showDragArea) { | 155 | if (showDragArea) { |
100 | style += generateShowDragAreaStyle(accentColor); | 156 | style += generateShowDragAreaStyle(accentColor); |
101 | } | 157 | } |
158 | if (useVerticalStyle) { | ||
159 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | ||
160 | } else if (document.getElementById('vertical-style')) { | ||
161 | const link = document.getElementById('vertical-style'); | ||
162 | document.head.removeChild(link); | ||
163 | } | ||
164 | if (alwaysShowWorkspaces) { | ||
165 | style += generateOpenWorkspaceStyle(); | ||
166 | } | ||
102 | 167 | ||
103 | return style; | 168 | return style; |
104 | } | 169 | } |
@@ -111,11 +176,16 @@ export default function initAppearance(stores) { | |||
111 | const { settings } = stores; | 176 | const { settings } = stores; |
112 | createStyleElement(); | 177 | createStyleElement(); |
113 | 178 | ||
114 | // Update accent color | 179 | // Update style when settings change |
115 | reaction( | 180 | reaction( |
116 | () => ( | 181 | () => ([ |
117 | settings.all.app.accentColor | 182 | settings.all.app.accentColor, |
118 | ), | 183 | settings.all.app.serviceRibbonWidth, |
184 | settings.all.app.iconSize, | ||
185 | settings.all.app.showDragArea, | ||
186 | settings.all.app.useVerticalStyle, | ||
187 | settings.all.app.alwaysShowWorkspaces, | ||
188 | ]), | ||
119 | () => { | 189 | () => { |
120 | updateStyle(settings.all.app); | 190 | updateStyle(settings.all.app); |
121 | }, | 191 | }, |
@@ -123,31 +193,4 @@ export default function initAppearance(stores) { | |||
123 | fireImmediately: true, | 193 | fireImmediately: true, |
124 | }, | 194 | }, |
125 | ); | 195 | ); |
126 | // Update service ribbon width | ||
127 | reaction( | ||
128 | () => ( | ||
129 | settings.all.app.serviceRibbonWidth | ||
130 | ), | ||
131 | () => { | ||
132 | updateStyle(settings.all.app); | ||
133 | }, | ||
134 | ); | ||
135 | // Update icon size | ||
136 | reaction( | ||
137 | () => ( | ||
138 | settings.all.app.iconSize | ||
139 | ), | ||
140 | () => { | ||
141 | updateStyle(settings.all.app); | ||
142 | }, | ||
143 | ); | ||
144 | // Update draggable area | ||
145 | reaction( | ||
146 | () => ( | ||
147 | settings.all.app.showDragArea | ||
148 | ), | ||
149 | () => { | ||
150 | updateStyle(settings.all.app); | ||
151 | }, | ||
152 | ); | ||
153 | } | 196 | } |