Skip to content

Commit e8c2ca4

Browse files
daiyamdaiyam
authored
fix(font): scm panel (#2718)
1 parent 419245d commit e8c2ca4

File tree

2 files changed

+81
-89
lines changed

2 files changed

+81
-89
lines changed

‎font-size/generate-css.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ const AREAS: Record<string, Area> = {
3636
files: ['src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css'],
3737
prefixes: ['.monaco-workbench .part.statusbar'],
3838
},
39+
sidebar: {
40+
name: 'sidebar',
41+
defaultSize: 13,
42+
files: ['src/vs/base/browser/ui/button/button.css', 'src/vs/workbench/contrib/scm/browser/media/scm.css'],
43+
prefixes: ['.monaco-workbench .part.sidebar', '.monaco-workbench .part.auxiliarybar'],
44+
},
3945
tabs: {
4046
name: 'tabs',
4147
defaultSize: 13,
@@ -150,7 +156,7 @@ function extractOriginal(content: string): string {
150156
}
151157

152158
function extractStyle(selector: string): string {
153-
const match = /^(\.\w+)/.exec(selector);
159+
const match = /^(\.[\w-]+)/.exec(selector);
154160

155161
return match?.[1] ?? '';
156162
}
@@ -160,9 +166,8 @@ function mergeSelector(selectors: string[], prefixes: string[], index: number):
160166
return;
161167
}
162168

163-
const selector = selectors[index];
164169
const prefix = prefixes[index];
165-
170+
const selector = selectors[index];
166171
const style = extractStyle(prefix);
167172

168173
if(selector === style) {
@@ -175,6 +180,9 @@ function mergeSelector(selectors: string[], prefixes: string[], index: number):
175180
else if(selector.startsWith(style)) {
176181
mergeSelector(selectors, prefixes, index + 1);
177182
}
183+
else if(index === 0) {
184+
selectors.unshift(...prefixes)
185+
}
178186
else {
179187
selectors.splice(index + 1, 0, ...prefixes.slice(index));
180188
}
@@ -196,7 +204,7 @@ function prefixSelector(selector: string, prefixParts: string[]): string {
196204
}
197205

198206
async function main(): Promise<void> {
199-
const name = process.argv[2] || 'sidebar';
207+
const name = process.argv[2];
200208
const area = AREAS[name];
201209

202210
if(!area) {

‎patches/feat-experimental-font.patch‎

Lines changed: 69 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,55 @@ index 467b1ff..91fd5a0 100644
3737
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
3838
+}
3939
\ No newline at end of file
40+
diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css
41+
index 8496f1b..964455a 100644
42+
--- a/src/vs/base/browser/ui/button/button.css
43+
+++ b/src/vs/base/browser/ui/button/button.css
44+
@@ -183 +183,43 @@
45+
}
46+
+
47+
+
48+
+
49+
+/*** Generated for Custom Font Size ***/
50+
+
51+
+.monaco-workbench .part.sidebar .monaco-text-button, .monaco-workbench .part.auxiliarybar .monaco-text-button {
52+
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 0.615385);
53+
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769);
54+
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077)
55+
+}
56+
+.monaco-workbench .part.sidebar .monaco-text-button.small, .monaco-workbench .part.auxiliarybar .monaco-text-button.small {
57+
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923);
58+
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154);
59+
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538)
60+
+}
61+
+.monaco-workbench .part.sidebar .monaco-text-button:focus, .monaco-workbench .part.auxiliarybar .monaco-text-button:focus {
62+
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
63+
+}
64+
+.monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label {
65+
+ padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692);
66+
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 2.153846)
67+
+}
68+
+.monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label, .monaco-workbench .part.sidebar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label, .monaco-workbench .part.auxiliarybar .monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
69+
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.384615);
70+
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0
71+
+}
72+
+.monaco-workbench .part.sidebar .monaco-button-dropdown > .monaco-button:focus, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown > .monaco-button:focus {
73+
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923)
74+
+}
75+
+.monaco-workbench .part.sidebar .monaco-button-dropdown .monaco-button-dropdown-separator, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown .monaco-button-dropdown-separator {
76+
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) 0
77+
+}
78+
+.monaco-workbench .part.sidebar .monaco-button-dropdown .monaco-button-dropdown-separator > div, .monaco-workbench .part.auxiliarybar .monaco-button-dropdown .monaco-button-dropdown-separator > div {
79+
+ width: 1px
80+
+}
81+
+.monaco-workbench .part.sidebar .monaco-description-button, .monaco-workbench .part.auxiliarybar .monaco-description-button {
82+
+ margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 0.384615)
83+
+}
84+
+.monaco-workbench .part.sidebar .monaco-description-button .monaco-button-description, .monaco-workbench .part.auxiliarybar .monaco-description-button .monaco-button-description {
85+
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154);
86+
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) calc(var(--vscode-workbench-sidebar-font-size) * 1.538462)
87+
+}
88+
\ No newline at end of file
4089
diff --git a/src/vs/base/browser/ui/codicons/codicon/codicon.css b/src/vs/base/browser/ui/codicons/codicon/codicon.css
4190
index d7f257d..af55bdd 100644
4291
--- a/src/vs/base/browser/ui/codicons/codicon/codicon.css
@@ -1788,7 +1837,7 @@ index 9afcf59..a8d4c2e 100644
17881837
+ this._onDidChange.fire(undefined); // Signal grid that size constraints changed
17891838
}
17901839
diff --git a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
1791-
index decb51a..3a5ff82 100644
1840+
index decb51a..d0db436 100644
17921841
--- a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
17931842
+++ b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css
17941843
@@ -15,3 +15,3 @@
@@ -1834,80 +1883,11 @@ index decb51a..3a5ff82 100644
18341883
- left: 5px; /* place icon in center */
18351884
+ left: calc(var(--vscode-workbench-sidebar-font-size) * 0.385); /* place icon in center */
18361885
}
1837-
@@ -124,3 +130,76 @@
1886+
@@ -124,3 +130,7 @@
18381887
.monaco-workbench .sidebar.pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item {
18391888
- max-width: 150px;
18401889
+ max-width: calc(var(--vscode-workbench-sidebar-font-size) * 11.538);
1841-
+}
1842-
+
1843-
+.monaco-workbench .part.sidebar .monaco-tl-contents {
1844-
+ display: flex;
1845-
+ align-items: center;
1846-
+}
1847-
+
1848-
+/* .monaco-workbench .part.sidebar .pane > .pane-header h3.title {
1849-
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846);
1850-
+}
1851-
+
1852-
+.monaco-workbench .part.sidebar .monaco-text-button {
1853-
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923);
1854-
+}
1855-
+
1856-
+.monaco-workbench .part.sidebar .monaco-icon-label::before {
1857-
+ background-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.231);
1858-
+ padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.462);
1859-
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 1.231);
1860-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692);
1861-
+}
1862-
+
1863-
+.monaco-workbench .part.sidebar .open-editors .open-editor,
1864-
+.monaco-workbench .part.sidebar .open-editors .editor-group {
1865-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692);
1866-
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692);
1867-
+}
1868-
+
1869-
+.monaco-workbench .part.sidebar > .title,
1870-
+.monaco-workbench .part.sidebar > .header-or-footer {
1871-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 2.692);
1872-
+}
1873-
+
1874-
+.monaco-workbench .part.sidebar > .title > .title-label {
1875-
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 2.692);
1876-
+}
1877-
+
1878-
+.monaco-workbench .part.sidebar .pane > .pane-header {
1879-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.692);
1880-
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846);
1881-
+}
1882-
+
1883-
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item .codicon {
1884-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.231);
1885-
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 1.231);
1886-
+}
1887-
+.monaco-workbench .part.sidebar .codicon[class*='codicon-'] {
1888-
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.231);
1889-
+}
1890-
+
1891-
+.monaco-workbench .part.sidebar .pane > .pane-header > .actions {
1892-
+ margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.616);
18931890
}
1894-
+.monaco-workbench .part.sidebar .monaco-pane-view .pane > .pane-header > .actions .action-item {
1895-
+ margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.308);
1896-
+}
1897-
+
1898-
+.monaco-workbench .part.sidebar .monaco-inputbox > .ibwrapper > .input {
1899-
+ font-size: var(--vscode-workbench-sidebar-font-size);
1900-
+}
1901-
+
1902-
+.monaco-workbench .part.sidebar .monaco-tl-contents {
1903-
+ display: flex;
1904-
+ align-items: center;
1905-
+}
1906-
+
1907-
+.monaco-workbench .part.sidebar .monaco-custom-toggle {
1908-
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.539);
1909-
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 1.539);
1910-
+} */
19111891
+
19121892
+.monaco-workbench .part.sidebar > .content {
19131893
+ font-family: var(--vscode-workbench-sidebar-font-family, inherit);
@@ -3216,12 +3196,16 @@ index 530b0c4..b3c979d 100644
32163196
+ return FONT.sidebarSize22;
32173197
}
32183198
diff --git a/src/vs/workbench/contrib/scm/browser/media/scm.css b/src/vs/workbench/contrib/scm/browser/media/scm.css
3219-
index 20c78c3..eb5a61d 100644
3199+
index 20c78c3..54b982d 100644
32203200
--- a/src/vs/workbench/contrib/scm/browser/media/scm.css
32213201
+++ b/src/vs/workbench/contrib/scm/browser/media/scm.css
3222-
@@ -799 +799,207 @@
3202+
@@ -799 +799,211 @@
32233203
}
32243204
+
3205+
+
3206+
+
3207+
+/*** Generated for Custom Font Size ***/
3208+
+
32253209
+.monaco-workbench .part.sidebar .scm-view .monaco-tl-contents > div, .monaco-workbench .part.auxiliarybar .scm-view .monaco-tl-contents > div {
32263210
+ padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077)
32273211
+}
@@ -3270,7 +3254,7 @@ index 20c78c3..eb5a61d 100644
32703254
+ padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692)
32713255
+}
32723256
+.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon {
3273-
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
3257+
+ padding: 1px
32743258
+}
32753259
+.monaco-workbench .part.sidebar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon.codicon-git-branch, .monaco-workbench .part.auxiliarybar .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon.codicon-git-branch {
32763260
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.923077);
@@ -3308,7 +3292,7 @@ index 20c78c3..eb5a61d 100644
33083292
+ padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154)
33093293
+}
33103294
+.monaco-workbench .part.sidebar .scm-view .scm-input .scm-editor .scm-editor-toolbar, .monaco-workbench .part.auxiliarybar .scm-view .scm-input .scm-editor .scm-editor-toolbar {
3311-
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
3295+
+ padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.230769) 1px 1px
33123296
+}
33133297
+.monaco-workbench .part.sidebar .scm-view .scm-input .scm-editor .scm-editor-toolbar.scroll-decoration, .monaco-workbench .part.auxiliarybar .scm-view .scm-input .scm-editor .scm-editor-toolbar.scroll-decoration {
33143298
+ box-shadow: var(--vscode-scrollbar-shadow) 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) calc(var(--vscode-workbench-sidebar-font-size) * -0.461538) inset
@@ -3325,33 +3309,33 @@ index 20c78c3..eb5a61d 100644
33253309
+.monaco-workbench .part.sidebar .scm-view .button-container > .monaco-button-dropdown > .monaco-dropdown-button, .monaco-workbench .part.auxiliarybar .scm-view .button-container > .monaco-button-dropdown > .monaco-dropdown-button {
33263310
+ padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.307692)
33273311
+}
3328-
+.monaco-workbench .part.sidebar .part.panel .scm-view .scm-editor-container, .monaco-workbench .part.auxiliarybar .part.panel .scm-view .scm-editor-container {
3329-
+ outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid var(--vscode-panelInput-border)
3312+
+.monaco-workbench .part.panel .scm-view .scm-editor-container, .monaco-workbench .part.panel .scm-view .scm-editor-container {
3313+
+ outline: 1px solid var(--vscode-panelInput-border)
33303314
+}
3331-
+.monaco-workbench .part.sidebar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.sidebar .part.panel .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.auxiliarybar .part.panel .scm-view .scm-editor.synthetic-focus {
3332-
+ outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid var(--vscode-focusBorder);
3315+
+.monaco-workbench .part.sidebar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.panel .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.synthetic-focus, .monaco-workbench .part.panel .scm-view .scm-editor.synthetic-focus {
3316+
+ outline: 1px solid var(--vscode-focusBorder);
33333317
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923)
33343318
+}
33353319
+.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-info, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-info {
3336-
+ outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid var(--vscode-inputValidation-infoBorder);
3320+
+ outline: 1px solid var(--vscode-inputValidation-infoBorder);
33373321
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923)
33383322
+}
33393323
+.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-warning, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-warning {
3340-
+ outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid var(--vscode-inputValidation-warningBorder);
3324+
+ outline: 1px solid var(--vscode-inputValidation-warningBorder);
33413325
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923)
33423326
+}
33433327
+.monaco-workbench .part.sidebar .scm-view .scm-editor.validation-error, .monaco-workbench .part.auxiliarybar .scm-view .scm-editor.validation-error {
3344-
+ outline: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) solid var(--vscode-inputValidation-errorBorder);
3328+
+ outline: 1px solid var(--vscode-inputValidation-errorBorder);
33453329
+ outline-offset: calc(var(--vscode-workbench-sidebar-font-size) * -0.076923)
33463330
+}
33473331
+.monaco-workbench .part.sidebar .scm-editor-validation-container, .monaco-workbench .part.auxiliarybar .scm-editor-validation-container {
33483332
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
33493333
+}
33503334
+.monaco-workbench .part.sidebar .scm-editor-validation, .monaco-workbench .part.auxiliarybar .scm-editor-validation {
3351-
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) calc(var(--vscode-workbench-sidebar-font-size) * 0.230769)
3335+
+ padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.230769)
33523336
+}
33533337
+.monaco-workbench .part.sidebar .scm-editor-validation-actions, .monaco-workbench .part.auxiliarybar .scm-editor-validation-actions {
3354-
+ margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
3338+
+ margin-top: 1px
33553339
+}
33563340
+.monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact-group, .monaco-workbench .part.sidebar .scm-repositories-view .scm-artifact, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact-group, .monaco-workbench .part.auxiliarybar .scm-repositories-view .scm-artifact {
33573341
+ margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
@@ -3396,7 +3380,7 @@ index 20c78c3..eb5a61d 100644
33963380
+}
33973381
+.monaco-workbench .part.sidebar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-cloud, .monaco-workbench .part.auxiliarybar .monaco-hover.history-item-hover .history-item-hover-container p > span > span.codicon.codicon-cloud {
33983382
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923);
3399-
+ margin-bottom: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
3383+
+ margin-bottom: 1px
34003384
+}
34013385
+.monaco-workbench .part.sidebar .pane-header .scm-graph-view-badge-container > .scm-graph-view-badge.monaco-count-badge.long, .monaco-workbench .part.auxiliarybar .pane-header .scm-graph-view-badge-container > .scm-graph-view-badge.monaco-count-badge.long {
34023386
+ margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538);

0 commit comments

Comments
 (0)