diff options
-rw-r--r-- | src/features/appearance/index.ts | 80 | ||||
-rw-r--r-- | src/styles/tabs.scss | 5 | ||||
-rw-r--r-- | src/styles/vertical.scss | 33 |
3 files changed, 107 insertions, 11 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); |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ab7cee08d..c5111fa91 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -54,6 +54,9 @@ | |||
54 | .tab-item__icon { | 54 | .tab-item__icon { |
55 | margin-left: -4px; | 55 | margin-left: -4px; |
56 | } | 56 | } |
57 | .tab-item__label { | ||
58 | margin-left: -4px; | ||
59 | } | ||
57 | } | 60 | } |
58 | 61 | ||
59 | &.is-label-enabled{ | 62 | &.is-label-enabled{ |
@@ -91,7 +94,7 @@ | |||
91 | align-items: center; | 94 | align-items: center; |
92 | background: $theme-brand-danger; | 95 | background: $theme-brand-danger; |
93 | border-radius: 20px; | 96 | border-radius: 20px; |
94 | bottom: 8px; | 97 | top: 8px; |
95 | color: #fff; | 98 | color: #fff; |
96 | display: flex; | 99 | display: flex; |
97 | font-size: 11px; | 100 | font-size: 11px; |
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index 426032bf6..083f98c3d 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -1,6 +1,8 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | $sidebar-width: 64px; | 3 | $sidebar-width: 75px; |
4 | $sidebar-bias: 22px; | ||
5 | $tabitem-bias: 30px; | ||
4 | 6 | ||
5 | .sidebar { | 7 | .sidebar { |
6 | width: 100vw; | 8 | width: 100vw; |
@@ -10,6 +12,7 @@ $sidebar-width: 64px; | |||
10 | top: 0; | 12 | top: 0; |
11 | right: 0; | 13 | right: 0; |
12 | padding-bottom: 0px; | 14 | padding-bottom: 0px; |
15 | overflow: hidden !important; | ||
13 | 16 | ||
14 | &::after { | 17 | &::after { |
15 | top: -10px; | 18 | top: -10px; |
@@ -30,17 +33,32 @@ $sidebar-width: 64px; | |||
30 | .tab-item { | 33 | .tab-item { |
31 | 34 | ||
32 | &.is-active { | 35 | &.is-active { |
33 | border-left-width: 0px; | 36 | border-left-width: 0px !important; |
34 | border-top-width: 4px; | 37 | border-top-width: 4px; |
35 | border-top-style: solid; | 38 | border-top-style: solid; |
36 | padding-left: 4px; | 39 | overflow: hidden; |
40 | height: $sidebar-width + 4; | ||
37 | } | 41 | } |
38 | 42 | ||
39 | &:not(.is-active) { | 43 | &:not(.is-active) { |
40 | padding-top: 4px; | 44 | padding-top: 4px; |
41 | } | 45 | } |
46 | |||
47 | &.is-label-enabled{ | ||
48 | min-width: 70px; | ||
49 | max-width: 140px; | ||
50 | height: $sidebar-width + 10; | ||
51 | width: max-content !important; | ||
52 | overflow: hidden; | ||
53 | padding-left: 4px; | ||
54 | padding-right: 4px; | ||
55 | padding-top: 8px; | ||
56 | } | ||
42 | } | 57 | } |
43 | } | 58 | } |
59 | div{ | ||
60 | overflow: hidden !important; | ||
61 | } | ||
44 | 62 | ||
45 | .sidebar__button--workspaces.is-active { | 63 | .sidebar__button--workspaces.is-active { |
46 | position: absolute; | 64 | position: absolute; |
@@ -51,7 +69,7 @@ $sidebar-width: 64px; | |||
51 | } | 69 | } |
52 | 70 | ||
53 | .app .app__content { | 71 | .app .app__content { |
54 | padding-top: $sidebar-width; | 72 | padding-top: $sidebar-width + $sidebar-bias; |
55 | } | 73 | } |
56 | 74 | ||
57 | .workspaces-drawer { | 75 | .workspaces-drawer { |
@@ -86,9 +104,12 @@ $sidebar-width: 64px; | |||
86 | } | 104 | } |
87 | 105 | ||
88 | .darwin .sidebar { | 106 | .darwin .sidebar { |
89 | height: $sidebar-width + 22px; | 107 | height: $sidebar-width + $sidebar-bias; |
90 | 108 | ||
91 | .sidebar__button--workspaces.is-active { | 109 | .sidebar__button--workspaces.is-active { |
92 | height: $sidebar-width - 22px; | 110 | height: $sidebar-width - $sidebar-bias; |
111 | } | ||
112 | .tab-item .is-label-enabled{ | ||
113 | height: $sidebar-width + $tabitem-bias; | ||
93 | } | 114 | } |
94 | } | 115 | } |