Skip to content

Commit ab491d3

Browse files
aeschliaeschli
committed
[themes] confusing alignment of file in folders in folder-less themes. Fixes microsoft#11762 
1 parent 8c00c0d commit ab491d3

9 files changed

Lines changed: 72 additions & 1 deletion

File tree

‎src/vs/workbench/parts/files/browser/media/collapsed-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/collapsed-hc.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/collapsed.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/expanded-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/expanded-hc.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/expanded.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/parts/files/browser/media/explorerviewlet.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,48 @@
4848
visibility: hidden;
4949
}
5050

51+
.explorer-folders-view .monaco-tree-row > .content {
52+
display: inline-block;
53+
}
54+
55+
.explorer-folders-view .monaco-tree-row::before {
56+
/* svg icons rendered as background image */
57+
background-size: 16px;
58+
background-position: left center;
59+
background-repeat: no-repeat;
60+
padding-right: 6px;
61+
width: 16px;
62+
height: 22px;
63+
display: inline-block;
64+
vertical-align: top;
65+
content: ' ';
66+
}
67+
68+
.explorer-folders-view .monaco-tree-row.has-children.expanded::before {
69+
background-image: url("expanded.svg");
70+
}
71+
72+
.explorer-folders-view .monaco-tree-row.has-children::before {
73+
display: inline-block;
74+
background-image: url("collapsed.svg");
75+
}
76+
77+
.vs-dark .explorer-folders-view .monaco-tree-row.has-children.expanded::before {
78+
background-image: url("expanded-dark.svg");
79+
}
80+
81+
.vs-dark .explorer-folders-view .monaco-tree-row.has-children::before {
82+
background-image: url("collapsed-dark.svg");
83+
}
84+
85+
.hc-black .explorer-folders-view .monaco-tree-row.has-children.expanded::before {
86+
background-image: url("expanded-hc.svg");
87+
}
88+
89+
.hc-black .explorer-folders-view .monaco-tree-row.has-children::before {
90+
background-image: url("collapsed-hc.svg");
91+
}
92+
5193
.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row:hover > .content .monaco-action-bar,
5294
.explorer-viewlet .explorer-open-editors .monaco-tree.focused .monaco-tree-row.focused > .content .monaco-action-bar,
5395
.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content.dirty > .monaco-action-bar {

‎src/vs/workbench/parts/files/browser/views/explorerView.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,9 @@ export class ExplorerView extends CollapsibleViewletView {
330330
accessibilityProvider
331331
}, {
332332
autoExpandSingleChildren: true,
333-
ariaLabel: nls.localize('treeAriaLabel', "Files Explorer")
333+
ariaLabel: nls.localize('treeAriaLabel', "Files Explorer"),
334+
twistiePixels: 16,
335+
showTwistie: false
334336
});
335337

336338
this.toDispose.push(lifecycle.toDisposable(() => renderer.dispose()));

‎src/vs/workbench/services/themes/electron-browser/themeService.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,10 @@ function _loadIconThemeDocument(fileSetPath: string): TPromise<IconThemeDocument
481481
}
482482

483483
function _processIconThemeDocument(id: string, iconThemeDocumentPath: string, iconThemeDocument: IconThemeDocument): string {
484+
485+
let hasFolderIcons = false;
486+
let hasIconAssociations = false;
487+
484488
if (!iconThemeDocument.iconDefinitions) {
485489
return '';
486490
}
@@ -498,6 +502,7 @@ function _processIconThemeDocument(id: string, iconThemeDocumentPath: string, ic
498502
list = selectorByDefinitionId[defId] = [];
499503
}
500504
list.push(selector);
505+
hasIconAssociations = true;
501506
}
502507
}
503508
if (associations) {
@@ -512,18 +517,25 @@ function _processIconThemeDocument(id: string, iconThemeDocumentPath: string, ic
512517
addSelector(`${qualifier} ${expanded} .folder-icon::before`, associations.folderExpanded);
513518
addSelector(`${qualifier} .file-icon::before`, associations.file);
514519

520+
if (associations.folder || associations.folderExpanded) {
521+
hasFolderIcons = true;
522+
}
523+
515524
let folderNames = associations.folderNames;
516525
if (folderNames) {
517526
for (let folderName in folderNames) {
518527
addSelector(`${qualifier} .${escapeCSS(folderName.toLowerCase())}-name-folder-icon.folder-icon::before`, folderNames[folderName]);
528+
hasFolderIcons = true;
519529
}
520530
}
521531
let folderNamesExpanded = associations.folderNamesExpanded;
522532
if (folderNamesExpanded) {
523533
for (let folderName in folderNamesExpanded) {
524534
addSelector(`${qualifier} ${expanded} .${escapeCSS(folderName.toLowerCase())}-name-folder-icon.folder-icon::before`, folderNamesExpanded[folderName]);
535+
hasFolderIcons = true;
525536
}
526537
}
538+
527539
let languageIds = associations.languageIds;
528540
if (languageIds) {
529541
for (let languageId in languageIds) {
@@ -561,8 +573,17 @@ function _processIconThemeDocument(id: string, iconThemeDocumentPath: string, ic
561573
collectSelectors(iconThemeDocument.light, '.vs');
562574
collectSelectors(iconThemeDocument.highContrast, '.hc-black');
563575

576+
if (!hasIconAssociations) {
577+
return '';
578+
}
579+
564580
let cssRules: string[] = [];
565581

582+
if (!hasFolderIcons) {
583+
// as we only show file icons, unindent rows representing files
584+
cssRules.push(`.explorer-folders-view .monaco-tree-row::before { display: none; }`);
585+
}
586+
566587
let fonts = iconThemeDocument.fonts;
567588
if (Array.isArray(fonts)) {
568589
fonts.forEach(font => {

0 commit comments

Comments
 (0)