Skip to content

Commit 12ee052

Browse files
daiyamdaiyam
authored
fix(font): button on extensions panel (#2719)
1 parent 88a290a commit 12ee052

File tree

2 files changed

+83
-30
lines changed

2 files changed

+83
-30
lines changed

‎font-size/generate-css.ts‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const AREAS: Record<string, Area> = {
3939
sidebar: {
4040
name: 'sidebar',
4141
defaultSize: 13,
42-
files: ['src/vs/base/browser/ui/button/button.css', 'src/vs/workbench/contrib/scm/browser/media/scm.css'],
42+
files: ['src/vs/base/browser/ui/button/button.css', 'src/vs/workbench/contrib/scm/browser/media/scm.css', 'src/vs/base/browser/ui/actionbar/actionbar.css', 'src/vs/workbench/contrib/extensions/browser/media/extension.css', 'src/vs/workbench/contrib/extensions/browser/media/extensionActions.css'],
4343
prefixes: ['.monaco-workbench .part.sidebar', '.monaco-workbench .part.auxiliarybar'],
4444
},
4545
tabs: {
@@ -89,20 +89,20 @@ async function processFile(filePath: string, area: Area): Promise<Result<void, s
8989
const generatedRoot = postcss.root();
9090

9191
postcssResult.value.walkRules((rule: Rule) => {
92-
let hasPx = false;
9392
const declarationsToAdd: Array<{ prop: string; value: string }> = [];
9493

9594
rule.walkDecls((declaration) => {
9695
if(PX_REGEX.test(declaration.value)) {
9796
const newValue = transformPxValue(declaration.value, area);
9897

9998
declarationsToAdd.push({ prop: declaration.prop, value: newValue });
100-
101-
hasPx = true;
99+
}
100+
else if(declaration.value === 'auto' && (declaration.prop === 'height' || declaration.prop === 'width')) {
101+
declarationsToAdd.push({ prop: declaration.prop, value: 'auto' });
102102
}
103103
});
104104

105-
if(hasPx && declarationsToAdd.length > 0) {
105+
if(declarationsToAdd.length > 0) {
106106
const selectors = (rule.selectors && rule.selectors.length > 0) ? rule.selectors : [rule.selector];
107107
const prefixeds: string[] = [];
108108

@@ -207,18 +207,29 @@ async function main(): Promise<void> {
207207
const name = process.argv[2];
208208
const area = AREAS[name];
209209

210-
if(!area) {
210+
if(area) {
211+
for(const file of area.files) {
212+
const result = await processFile(path.join('..', 'vscode', file), area);
213+
if(result.fails) {
214+
console.error(`Error processing ${file}:`, result.error);
215+
}
216+
}
217+
}
218+
else if(name === 'all') {
219+
for(const area of Object.values(AREAS)) {
220+
for(const file of area.files) {
221+
const result = await processFile(path.join('..', 'vscode', file), area);
222+
if(result.fails) {
223+
console.error(`Error processing ${file}:`, result.error);
224+
}
225+
}
226+
}
227+
}
228+
else {
211229
console.log(`No area found for ${name}`);
212230
console.log(`\nAvailable areas:\n- ${Object.keys(AREAS).join('\n- ')}`);
213231
return;
214232
}
215-
216-
for(const file of area.files) {
217-
const result = await processFile(path.join('..', 'vscode', file), area);
218-
if(result.fails) {
219-
console.error(`Error processing ${file}:`, result.error);
220-
}
221-
}
222233
}
223234

224235
await main();

‎patches/feat-experimental-font.patch‎

Lines changed: 59 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
diff --git a/src/vs/base/browser/ui/actionbar/actionbar.css b/src/vs/base/browser/ui/actionbar/actionbar.css
2-
index 467b1ff..91fd5a0 100644
2+
index 467b1ff..16e6d69 100644
33
--- a/src/vs/base/browser/ui/actionbar/actionbar.css
44
+++ b/src/vs/base/browser/ui/actionbar/actionbar.css
5-
@@ -127 +127,33 @@
5+
@@ -127 +127,35 @@
66
}
77
+
88
+
99
+
10+
+/*** Generated for Custom Font Size ***/
11+
+
1012
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item .codicon, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .codicon {
1113
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769);
1214
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769)
@@ -16,14 +18,14 @@ index 467b1ff..91fd5a0 100644
1618
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.230769)
1719
+}
1820
+.monaco-workbench .part.sidebar .monaco-action-bar.vertical .action-item .action-label.separator, .monaco-workbench .part.auxiliarybar .monaco-action-bar.vertical .action-item .action-label.separator {
19-
+ padding-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923);
21+
+ padding-top: 1px;
2022
+ margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692) .8em
2123
+}
2224
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.separator, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.separator {
23-
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923);
25+
+ width: 1px;
2426
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.230769);
2527
+ margin: calc(var(--vscode-workbench-sidebar-font-size) * 0.384615) calc(var(--vscode-workbench-sidebar-font-size) * 0.307692);
26-
+ min-width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
28+
+ min-width: 1px
2729
+}
2830
+.monaco-workbench .part.sidebar .secondary-actions .monaco-action-bar .action-label, .monaco-workbench .part.auxiliarybar .secondary-actions .monaco-action-bar .action-label {
2931
+ margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.461538)
@@ -34,7 +36,7 @@ index 467b1ff..91fd5a0 100644
3436
+ margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231)
3537
+}
3638
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
37-
+ width: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
39+
+ width: 1px
3840
+}
3941
\ No newline at end of file
4042
diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css
@@ -1486,7 +1488,7 @@ index a24f761..4f3bc89 100644
14861488
+}
14871489
\ No newline at end of file
14881490
diff --git a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
1489-
index 924d9b3..9775338 100644
1491+
index 924d9b3..07b29cc 100644
14901492
--- a/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
14911493
+++ b/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css
14921494
@@ -168,4 +168,4 @@
@@ -1501,7 +1503,7 @@ index 924d9b3..9775338 100644
15011503
- min-width: calc(var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)) - 1px);
15021504
+ min-width: 50px - 1px;
15031505
}
1504-
@@ -560 +560,109 @@
1506+
@@ -560 +560,112 @@
15051507
}
15061508
+
15071509
+
@@ -1511,6 +1513,9 @@ index 924d9b3..9775338 100644
15111513
+.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.tabs-border-bottom::after {
15121514
+ height: 1px
15131515
+}
1516+
+.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container {
1517+
+ height: auto
1518+
+}
15141519
+.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
15151520
+ padding-left: calc(var(--vscode-workbench-tabs-font-size) * 0.769231);
15161521
+ outline-offset: calc(var(--vscode-workbench-tabs-font-size) * -0.153846)
@@ -1956,7 +1961,7 @@ index 101b9c6..970cdaa 100644
19561961
+
19571962
private registerActions(): void {
19581963
diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css
1959-
index 7faaf9e..a29027c 100644
1964+
index 7faaf9e..6cd8fbd 100644
19601965
--- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css
19611966
+++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css
19621967
@@ -11,2 +11,3 @@
@@ -1983,7 +1988,7 @@ index 7faaf9e..a29027c 100644
19831988
+ font-size: calc(var(--vscode-workbench-statusbar-font-size) * 1)
19841989
+}
19851990
+.monaco-workbench .part.statusbar:not(:focus).status-border-top::after {
1986-
+ height: calc(var(--vscode-workbench-statusbar-font-size) * 0.083333)
1991+
+ height: 1px
19871992
+}
19881993
+.monaco-workbench .part.statusbar > .items-container > .statusbar-item {
19891994
+ line-height: calc(var(--vscode-workbench-statusbar-font-size) * 1.833333)
@@ -2021,11 +2026,11 @@ index 7faaf9e..a29027c 100644
20212026
+ padding-right: calc(var(--vscode-workbench-statusbar-font-size) * 0.25)
20222027
+}
20232028
+.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:active:not(.disabled) {
2024-
+ outline: calc(var(--vscode-workbench-statusbar-font-size) * 0.083333) solid var(--vscode-contrastActiveBorder);
2029+
+ outline: 1px solid var(--vscode-contrastActiveBorder);
20252030
+ outline-offset: calc(var(--vscode-workbench-statusbar-font-size) * -0.083333)
20262031
+}
20272032
+.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:hover:not(.disabled) {
2028-
+ outline: calc(var(--vscode-workbench-statusbar-font-size) * 0.083333) dashed var(--vscode-contrastActiveBorder);
2033+
+ outline: 1px dashed var(--vscode-contrastActiveBorder);
20292034
+ outline-offset: calc(var(--vscode-workbench-statusbar-font-size) * -0.083333)
20302035
+}
20312036
\ No newline at end of file
@@ -2880,14 +2885,16 @@ index 8bfac42..6430bf4 100644
28802885
+ const headerHeight = this.header && !!this.notificationContainer?.childNodes.length ? this.notificationContainer.clientHeight + searchBoxHeight + FONT.sidebarSize10 /*margin*/ : searchBoxHeight;
28812886
this.header!.style.height = `${headerHeight}px`;
28822887
diff --git a/src/vs/workbench/contrib/extensions/browser/media/extension.css b/src/vs/workbench/contrib/extensions/browser/media/extension.css
2883-
index 8454447..bf4b116 100644
2888+
index 8454447..733b9a6 100644
28842889
--- a/src/vs/workbench/contrib/extensions/browser/media/extension.css
28852890
+++ b/src/vs/workbench/contrib/extensions/browser/media/extension.css
2886-
@@ -302 +302,83 @@
2891+
@@ -302 +302,91 @@
28872892
}
28882893
+
28892894
+
28902895
+
2896+
+/*** Generated for Custom Font Size ***/
2897+
+
28912898
+.monaco-workbench .part.sidebar .extension-list-item, .monaco-workbench .part.auxiliarybar .extension-list-item {
28922899
+ padding: 0 0 0 calc(var(--vscode-workbench-sidebar-font-size) * 1.230769)
28932900
+}
@@ -2905,13 +2912,19 @@ index 8454447..bf4b116 100644
29052912
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 1.461538);
29062913
+ padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154)
29072914
+}
2915+
+.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .restart-required, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .restart-required {
2916+
+ margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.615385)
2917+
+}
2918+
+.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .restart-required > .extension-restart-required-label, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .restart-required > .extension-restart-required-label {
2919+
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154)
2920+
+}
29082921
+.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header .extension-kind-indicator, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header .extension-kind-indicator {
29092922
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154);
29102923
+ margin-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692)
29112924
+}
29122925
+.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .install-count:not(:empty), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .install-count:not(:empty) {
29132926
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154);
2914-
+ margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538)
2927+
+ margin: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.461538) 0 auto
29152928
+}
29162929
+.monaco-workbench .part.sidebar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .header-container > .header > .activation-status:not(:empty) {
29172930
+ font-size: calc(var(--vscode-workbench-sidebar-font-size) * 0.846154);
@@ -2942,7 +2955,7 @@ index 8454447..bf4b116 100644
29422955
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.846154)
29432956
+}
29442957
+.monaco-workbench .part.sidebar .extension-list-item > .details > .footer .publisher > .publisher-name:not(:first-child), .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer .publisher > .publisher-name:not(:first-child) {
2945-
+ padding-left: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923)
2958+
+ padding-left: 1px
29462959
+}
29472960
+.monaco-workbench .part.sidebar .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action.label, .monaco-workbench .part.auxiliarybar .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action.label {
29482961
+ max-width: calc(var(--vscode-workbench-sidebar-font-size) * 11.538462);
@@ -2952,7 +2965,7 @@ index 8454447..bf4b116 100644
29522965
+ margin-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692)
29532966
+}
29542967
+.monaco-workbench .part.sidebar .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .extension-list-item .monaco-action-bar .action-label.icon {
2955-
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0.076923) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
2968+
+ padding: 1px calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
29562969
+}
29572970
+.monaco-workbench .part.sidebar .hc-black .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.sidebar .hc-light .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .hc-black .extension-list-item .monaco-action-bar .action-label.icon, .monaco-workbench .part.auxiliarybar .hc-light .extension-list-item .monaco-action-bar .action-label.icon {
29582971
+ padding: calc(var(--vscode-workbench-sidebar-font-size) * 0) calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
@@ -2968,6 +2981,35 @@ index 8454447..bf4b116 100644
29682981
+ height: calc(var(--vscode-workbench-sidebar-font-size) * 0.769231)
29692982
+}
29702983
\ No newline at end of file
2984+
diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css
2985+
index 6326d45..8e9a0f1 100644
2986+
--- a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css
2987+
+++ b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css
2988+
@@ -166 +166,23 @@
2989+
}
2990+
+
2991+
+
2992+
+
2993+
+/*** Generated for Custom Font Size ***/
2994+
+
2995+
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item > .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item > .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item > .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item > .action-label.extension-action.label {
2996+
+ padding: 0 calc(var(--vscode-workbench-sidebar-font-size) * 0.384615)
2997+
+}
2998+
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.label {
2999+
+ outline-offset: 1px
3000+
+}
3001+
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.text, .monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.text, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label {
3002+
+ width: auto;
3003+
+ height: auto;
3004+
+ line-height: calc(var(--vscode-workbench-sidebar-font-size) * 1.076923)
3005+
+}
3006+
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.text, .monaco-workbench .part.sidebar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.label, .monaco-workbench .part.sidebar .monaco-action-bar .action-item .action-label.extension-action.icon, .monaco-workbench .part.sidebar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.text, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.label, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item .action-label.extension-action.icon, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-dropdown-item .action-label.extension-action.label {
3007+
+ margin-top: calc(var(--vscode-workbench-sidebar-font-size) * 0.153846)
3008+
+}
3009+
+.monaco-workbench .part.sidebar .monaco-action-bar .action-item.disabled .action-label.extension-status-label:before, .monaco-workbench .part.auxiliarybar .monaco-action-bar .action-item.disabled .action-label.extension-status-label:before {
3010+
+ padding-right: calc(var(--vscode-workbench-sidebar-font-size) * 0.307692)
3011+
+}
3012+
\ No newline at end of file
29713013
diff --git a/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css b/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css
29723014
index db5712f..0f75b63 100644
29733015
--- a/src/vs/workbench/contrib/files/browser/media/explorerviewlet.css

0 commit comments

Comments
 (0)