Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-08 17:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve Nest Rendering

Browse Source 
- Force nests to render with a twistie
- Resolve alignment issues by hiding nested parent icon to match folders
Fixes #142938, #141428, #141359
This commit is contained in:
Jackson Kearl
2022-03-08 16:59:33 -08:00
parent b20e5beb3c
commit c811becbbb
1 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/contrib/files/browser/views/explorerViewer.ts
+34 -10
View File
@@ -365,28 +365,52 @@ export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, Fu
}
private renderStat(stat: ExplorerItem, label: string | string[], domId: string | undefined, filterData: FuzzyScore | undefined, templateData: IFileTemplateData): IDisposable {
const elementDisposables = new DisposableStore();
templateData.label.element.style.display = 'flex';
const extraClasses = ['explorer-item'];
if (this.explorerService.isCut(stat)) {
extraClasses.push('cut');
}
templateData.label.setResource({ resource: stat.resource, name: label }, {
fileKind: stat.isRoot ? FileKind.ROOT_FOLDER : stat.isDirectory ? FileKind.FOLDER : FileKind.FILE,
extraClasses,
fileDecorations: this.config.explorer.decorations,
matches: createMatches(filterData),
separator: this.labelService.getSeparator(stat.resource.scheme, stat.resource.authority),
domId
});
// Always render chevrons for file nests, or else may not be able to identify them.
const twistieContainer = (templateData.container.parentElement?.parentElement?.querySelector('.monaco-tl-twistie') as HTMLElement);
if (twistieContainer) {
if (stat.hasNests) {
twistieContainer.classList.add('force-twistie');
} else {
twistieContainer.classList.remove('force-twistie');
}
}
return templateData.label.onDidRender(() => {
const setResourceData = () => {
const theme = this.themeService.getFileIconTheme();
// Dont render file icons for nest parents unless folders have both chevrons and icons, otherwise alignment breaks
const hideNestParentFileIcons = theme.hidesExplorerArrows || !theme.hasFolderIcons;
templateData.label.setResource({ resource: stat.resource, name: label }, {
fileKind: stat.isRoot ? FileKind.ROOT_FOLDER : stat.isDirectory ? FileKind.FOLDER : FileKind.FILE,
extraClasses,
hideIcon: stat.hasNests && hideNestParentFileIcons,
fileDecorations: this.config.explorer.decorations,
matches: createMatches(filterData),
separator: this.labelService.getSeparator(stat.resource.scheme, stat.resource.authority),
domId
});
};
elementDisposables.add(this.themeService.onDidFileIconThemeChange(() => setResourceData()));
setResourceData();
elementDisposables.add(templateData.label.onDidRender(() => {
try {
this.updateWidth(stat);
} catch (e) {
// noop since the element might no longer be in the tree, no update of width necessary
}
});
}));
return elementDisposables;
}
private renderInputBox(container: HTMLElement, stat: ExplorerItem, editableData: IEditableData): IDisposable {