diff options
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/appearance/index.ts | 80 |
1 files changed, 76 insertions, 4 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index bb93507dc..21c9554ed 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -114,16 +114,67 @@ function generateAccentStyle(accentColorStr) { | |||
114 | `; | 114 | `; |
115 | } | 115 | } |
116 | 116 | ||
117 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | 117 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical, isLabelEnabled) { |
118 | const width = Number(widthStr); | 118 | const width = Number(widthStr); |
119 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 119 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
120 | let fontSize = 11; | ||
121 | let tabItemHeightBias = -5; | ||
122 | let sidebarSizeBias = 22; | ||
123 | const tabItemWidthBias = 2; | ||
124 | |||
125 | switch(width){ | ||
126 | case (35): | ||
127 | fontSize = 9; | ||
128 | tabItemHeightBias = 25; | ||
129 | sidebarSizeBias = 48; | ||
130 | break; | ||
131 | case (45): | ||
132 | fontSize = 10; | ||
133 | tabItemHeightBias = 21; | ||
134 | sidebarSizeBias = 44; | ||
135 | break; | ||
136 | case (55): | ||
137 | fontSize = 11; | ||
138 | tabItemHeightBias = 13; | ||
139 | sidebarSizeBias = 37; | ||
140 | break; | ||
141 | case (80): | ||
142 | fontSize = 11; | ||
143 | tabItemHeightBias = 3; | ||
144 | sidebarSizeBias = 27; | ||
145 | break; | ||
146 | case (90): | ||
147 | fontSize = 12; | ||
148 | tabItemHeightBias = 0; | ||
149 | sidebarSizeBias = 25; | ||
150 | break; | ||
151 | case (100): | ||
152 | fontSize = 13; | ||
153 | tabItemHeightBias = 2; | ||
154 | sidebarSizeBias = 25; | ||
155 | break; | ||
156 | default: | ||
157 | fontSize = 11; | ||
158 | tabItemHeightBias = 13; | ||
159 | sidebarSizeBias = 37; | ||
160 | } | ||
161 | |||
162 | if(!isLabelEnabled){ | ||
163 | sidebarSizeBias = 22; | ||
164 | tabItemHeightBias = -5; | ||
165 | } | ||
120 | 166 | ||
121 | return vertical | 167 | return vertical |
122 | ? ` | 168 | ? ` |
169 | .sidebar { | ||
170 | height: ${width}px !important; | ||
171 | overflow: hidden !important; | ||
172 | } | ||
123 | .tab-item { | 173 | .tab-item { |
124 | width: ${width - 2}px !important; | 174 | width: ${width - tabItemWidthBias}px !important; |
125 | height: ${width - 5 + iconSize}px !important; | 175 | height: ${width + iconSize + tabItemHeightBias}px !important; |
126 | min-height: unset; | 176 | min-height: unset; |
177 | overflow: hidden !important; | ||
127 | } | 178 | } |
128 | .tab-item .tab-item__icon { | 179 | .tab-item .tab-item__icon { |
129 | width: ${width / 2 + iconSize}px !important; | 180 | width: ${width / 2 + iconSize}px !important; |
@@ -131,6 +182,24 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | |||
131 | .sidebar__button { | 182 | .sidebar__button { |
132 | font-size: ${width / 3}px !important; | 183 | font-size: ${width / 3}px !important; |
133 | } | 184 | } |
185 | .app .app__content { | ||
186 | padding-top: ${width + sidebarSizeBias}px !important; | ||
187 | } | ||
188 | .workspaces-drawer { | ||
189 | margin-top: -${width}px !important; | ||
190 | } | ||
191 | .darwin .sidebar { | ||
192 | height: ${width + sidebarSizeBias}px !important; | ||
193 | } | ||
194 | .darwin .sidebar .sidebar__button--workspaces.is-active { | ||
195 | height: ${width - sidebarSizeBias}px !important; | ||
196 | } | ||
197 | .tab-item .tab-item__label{ | ||
198 | font-size: ${fontSize}px !important; | ||
199 | } | ||
200 | .tab-item div{ | ||
201 | overflow: hidden !important; | ||
202 | } | ||
134 | ` | 203 | ` |
135 | : ` | 204 | : ` |
136 | .sidebar { | 205 | .sidebar { |
@@ -138,7 +207,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | |||
138 | } | 207 | } |
139 | .tab-item { | 208 | .tab-item { |
140 | width: ${width}px !important; | 209 | width: ${width}px !important; |
141 | height: ${width - 5 + iconSize}px !important; | 210 | height: min-content !important; |
142 | } | 211 | } |
143 | .tab-item .tab-item__icon { | 212 | .tab-item .tab-item__icon { |
144 | width: ${width / 2 + iconSize}px !important; | 213 | width: ${width / 2 + iconSize}px !important; |
@@ -229,6 +298,7 @@ function generateStyle(settings) { | |||
229 | showDragArea, | 298 | showDragArea, |
230 | useVerticalStyle, | 299 | useVerticalStyle, |
231 | alwaysShowWorkspaces, | 300 | alwaysShowWorkspaces, |
301 | showServiceName, | ||
232 | } = settings; | 302 | } = settings; |
233 | 303 | ||
234 | if ( | 304 | if ( |
@@ -244,6 +314,7 @@ function generateStyle(settings) { | |||
244 | serviceRibbonWidth, | 314 | serviceRibbonWidth, |
245 | iconSize, | 315 | iconSize, |
246 | useVerticalStyle, | 316 | useVerticalStyle, |
317 | showServiceName | ||
247 | ); | 318 | ); |
248 | } | 319 | } |
249 | if (showDragArea) { | 320 | if (showDragArea) { |
@@ -281,6 +352,7 @@ export default function initAppearance(stores) { | |||
281 | settings.all.app.showDragArea, | 352 | settings.all.app.showDragArea, |
282 | settings.all.app.useVerticalStyle, | 353 | settings.all.app.useVerticalStyle, |
283 | settings.all.app.alwaysShowWorkspaces, | 354 | settings.all.app.alwaysShowWorkspaces, |
355 | settings.all.app.showServiceName, | ||
284 | ], | 356 | ], |
285 | () => { | 357 | () => { |
286 | updateStyle(settings.all.app); | 358 | updateStyle(settings.all.app); |