From 2f571d868b0b7c3bdf83d9a2e8c7143c99d5e0f0 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Fri, 30 Oct 2020 15:38:23 -0700 Subject: [PATCH] show folder icon for some tree nodes (#13161) --- .../connection/browser/connectionBrowseTab.ts | 73 ++++++++++++------- .../browser/media/connectionBrowseTab.css | 10 +++ 2 files changed, 56 insertions(+), 27 deletions(-) diff --git a/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts b/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts index 687079155a..f01d0acda5 100644 --- a/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts +++ b/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts @@ -34,7 +34,7 @@ import { ConnectionProfile } from 'sql/platform/connection/common/connectionProf import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup'; import { TreeNode } from 'sql/workbench/services/objectExplorer/common/treeNode'; import { ServerTreeRenderer } from 'sql/workbench/services/objectExplorer/browser/serverTreeRenderer'; -import { ConnectionProfileGroupRenderer, ConnectionProfileRenderer, TreeNodeRenderer } from 'sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer'; +import { ConnectionProfileRenderer, TreeNodeRenderer } from 'sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer'; import { ColorScheme } from 'vs/platform/theme/common/theme'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; @@ -134,7 +134,7 @@ export class ConnectionBrowserView extends Disposable implements IPanelView { new ProviderElementRenderer(), this.instantiationService.createInstance(TreeItemRenderer, this.treeLabels), this.instantiationService.createInstance(ConnectionProfileRenderer, true), - this.instantiationService.createInstance(ConnectionProfileGroupRenderer, { showColor: false }), + this.instantiationService.createInstance(ConnectionProfileGroupRenderer), this.instantiationService.createInstance(TreeNodeRenderer), new SavedConnectionsNodeRenderer() ]; @@ -283,7 +283,7 @@ class ListDelegate implements IListVirtualDelegate { } else if (element instanceof ConnectionProfile) { return ServerTreeRenderer.CONNECTION_TEMPLATE_ID; } else if (element instanceof ConnectionProfileGroup) { - return ServerTreeRenderer.CONNECTION_GROUP_TEMPLATE_ID; + return ConnectionProfileGroupRenderer.TEMPLATE_ID; } else if (element instanceof TreeNode) { return ServerTreeRenderer.OBJECTEXPLORER_TEMPLATE_ID; } else if (element instanceof SavedConnectionNode) { @@ -294,49 +294,68 @@ class ListDelegate implements IListVirtualDelegate { } } -interface ProviderElementTemplate { +interface TreeElementTemplate { readonly icon: HTMLElement; readonly name: HTMLElement; } -class ProviderElementRenderer implements ITreeRenderer { +abstract class BaseTreeItemRender implements ITreeRenderer { + public readonly abstract templateId: string; + protected abstract getText(element: T): string; + protected abstract getIconClass(element: T): string; + + renderTemplate(container: HTMLElement): TreeElementTemplate { + const root = DOM.append(container, DOM.$('div.browse-tree-element')); + const icon = DOM.append(root, DOM.$('.icon')); + const name = DOM.append(root, DOM.$('.name')); + return { name, icon }; + } + + renderElement(element: ITreeNode, index: number, templateData: TreeElementTemplate, height: number): void { + templateData.name.innerText = this.getText(element.element); + templateData.icon.classList.add('codicon', this.getIconClass(element.element)); + } + + disposeTemplate(templateData: TreeElementTemplate): void { + } +} + +class ProviderElementRenderer extends BaseTreeItemRender { public static readonly TEMPLATE_ID = 'ProviderElementTemplate'; public readonly templateId = ProviderElementRenderer.TEMPLATE_ID; - renderTemplate(container: HTMLElement): ProviderElementTemplate { - const icon = DOM.append(container, DOM.$('.icon')); - const name = DOM.append(container, DOM.$('.name')); - return { name, icon }; + getText(element: ConnectionDialogTreeProviderElement): string { + return element.name; } - renderElement(element: ITreeNode, index: number, templateData: ProviderElementTemplate, height: number): void { - templateData.name.innerText = element.element.name; - } - - disposeTemplate(templateData: ProviderElementTemplate): void { + getIconClass(element: ConnectionDialogTreeProviderElement): string { + return 'codicon-folder'; } } -interface SavedConnectionNodeElementTemplate { - readonly icon: HTMLElement; - readonly name: HTMLElement; -} - -class SavedConnectionsNodeRenderer implements ITreeRenderer { +class SavedConnectionsNodeRenderer extends BaseTreeItemRender { public static readonly TEMPLATE_ID = 'savedConnectionNode'; public readonly templateId = SavedConnectionsNodeRenderer.TEMPLATE_ID; - renderTemplate(container: HTMLElement): SavedConnectionNodeElementTemplate { - const icon = DOM.append(container, DOM.$('.icon')); - const name = DOM.append(container, DOM.$('.name')); - return { name, icon }; + getText(element: SavedConnectionNode): string { + return localize('savedConnections', "Saved Connections"); } - renderElement(element: ITreeNode, index: number, templateData: SavedConnectionNodeElementTemplate, height: number): void { - templateData.name.innerText = localize('savedConnections', "Saved Connections"); + getIconClass(element: SavedConnectionNode): string { + return 'codicon-folder'; + } +} + +class ConnectionProfileGroupRenderer extends BaseTreeItemRender{ + public static readonly TEMPLATE_ID = 'connectionProfileGroup'; + public readonly templateId = ConnectionProfileGroupRenderer.TEMPLATE_ID; + + getText(element: ConnectionProfileGroup): string { + return element.name; } - disposeTemplate(templateData: SavedConnectionNodeElementTemplate): void { + getIconClass(element: ConnectionProfileGroup): string { + return 'codicon-folder'; } } diff --git a/src/sql/workbench/services/connection/browser/media/connectionBrowseTab.css b/src/sql/workbench/services/connection/browser/media/connectionBrowseTab.css index 5e8f8e3069..b6dc1dce60 100644 --- a/src/sql/workbench/services/connection/browser/media/connectionBrowseTab.css +++ b/src/sql/workbench/services/connection/browser/media/connectionBrowseTab.css @@ -37,3 +37,13 @@ padding-right: 12px; padding-left: 0px; } + +.connection-dialog .browse-tree-element { + height: 100%; + display: flex; + align-items: center; +} + +.connection-dialog .browse-tree-element .icon { + margin-right: 5px; +}