Skip to content

Commit 4e64aa3

Browse files
aeschliaeschli
committed
Explorer twistie spacing and issues. Fixes microsoft#18031 
1 parent 016d35f commit 4e64aa3

3 files changed

Lines changed: 25 additions & 18 deletions

File tree

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,13 @@
5353
visibility: hidden;
5454
}
5555

56-
.explorer-folders-view .monaco-tree-row > .content {
57-
display: inline-block;
56+
.explorer-folders-view .monaco-tree-row .sub-content {
57+
display: flex;
5858
}
5959

60-
.explorer-folders-view .monaco-tree-row::before {
61-
/* svg icons rendered as background image */
60+
.explorer-folders-view .monaco-tree-row .sub-content::before {
6261
background-size: 16px;
63-
background-position: left center;
62+
background-position: 50% 50%;
6463
background-repeat: no-repeat;
6564
padding-right: 6px;
6665
width: 16px;
@@ -70,28 +69,32 @@
7069
content: ' ';
7170
}
7271

73-
.explorer-folders-view .monaco-tree-row.has-children.expanded::before {
72+
.explorer-folders-view.align-icons-and-twisties .monaco-tree-row:not(.has-children) .sub-content::before {
73+
display: none;
74+
}
75+
76+
.explorer-folders-view .monaco-tree-row.has-children.expanded .sub-content::before {
7477
background-image: url("expanded.svg");
7578
}
7679

77-
.explorer-folders-view .monaco-tree-row.has-children::before {
80+
.explorer-folders-view .monaco-tree-row.has-children .sub-content::before {
7881
display: inline-block;
7982
background-image: url("collapsed.svg");
8083
}
8184

82-
.vs-dark .explorer-folders-view .monaco-tree-row.has-children.expanded::before {
85+
.vs-dark .explorer-folders-view .monaco-tree-row.has-children.expanded .sub-content::before {
8386
background-image: url("expanded-dark.svg");
8487
}
8588

86-
.vs-dark .explorer-folders-view .monaco-tree-row.has-children::before {
89+
.vs-dark .explorer-folders-view .monaco-tree-row.has-children .sub-content::before {
8790
background-image: url("collapsed-dark.svg");
8891
}
8992

90-
.hc-black .explorer-folders-view .monaco-tree-row.has-children.expanded::before {
93+
.hc-black .explorer-folders-view .monaco-tree-row.has-children.expanded .sub-content::before {
9194
background-image: url("expanded-hc.svg");
9295
}
9396

94-
.hc-black .explorer-folders-view .monaco-tree-row.has-children::before {
97+
.hc-black .explorer-folders-view .monaco-tree-row.has-children .sub-content::before {
9598
background-image: url("collapsed-hc.svg");
9699
}
97100

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { IContextMenuService } from 'vs/platform/contextview/browser/contextView
3939
import { IMessageService, Severity } from 'vs/platform/message/common/message';
4040
import { RawContextKey, IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
4141
import { ResourceContextKey } from 'vs/workbench/common/resourceContextKey';
42+
import { IThemeService, IFileIconTheme } from 'vs/workbench/services/themes/common/themeService';
4243

4344
export class ExplorerView extends CollapsibleViewletView {
4445

@@ -81,7 +82,8 @@ export class ExplorerView extends CollapsibleViewletView {
8182
@IPartService private partService: IPartService,
8283
@IKeybindingService keybindingService: IKeybindingService,
8384
@IContextKeyService contextKeyService: IContextKeyService,
84-
@IConfigurationService private configurationService: IConfigurationService
85+
@IConfigurationService private configurationService: IConfigurationService,
86+
@IThemeService private themeService: IThemeService
8587
) {
8688
super(actionRunner, false, nls.localize('explorerSection', "Files Explorer Section"), messageService, keybindingService, contextMenuService, headerSize);
8789

@@ -114,6 +116,13 @@ export class ExplorerView extends CollapsibleViewletView {
114116
if (this.toolBar) {
115117
this.toolBar.setActions(prepareActions(this.getActions()), [])();
116118
}
119+
120+
const onFileIconThemeChange = (fileIconTheme: IFileIconTheme) => {
121+
DOM.toggleClass(this.treeContainer, 'align-icons-and-twisties', fileIconTheme.hasFileIcons && !fileIconTheme.hasFolderIcons);
122+
};
123+
124+
this.themeService.onDidFileIconThemeChange(onFileIconThemeChange);
125+
onFileIconThemeChange(this.themeService.getFileIconTheme());
117126
}
118127

119128
public getActions(): IAction[] {
@@ -331,7 +340,7 @@ export class ExplorerView extends CollapsibleViewletView {
331340
}, {
332341
autoExpandSingleChildren: true,
333342
ariaLabel: nls.localize('treeAriaLabel', "Files Explorer"),
334-
twistiePixels: 16,
343+
twistiePixels: 12,
335344
showTwistie: false
336345
});
337346

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -644,11 +644,6 @@ function _processIconThemeDocument(id: string, iconThemeDocumentPath: string, ic
644644

645645
let cssRules: string[] = [];
646646

647-
/*if (!hasFolderIcons) {
648-
// as we only show file icons, unindent rows representing files
649-
cssRules.push(`.explorer-folders-view .monaco-tree-row .sub-content::before { display: none; }`);
650-
}*/
651-
652647
let fonts = iconThemeDocument.fonts;
653648
if (Array.isArray(fonts)) {
654649
fonts.forEach(font => {

0 commit comments

Comments
 (0)