make the tree theme aware and remove group color (#13143)

* make the tree theme aware and remove group color

* fix eslint error
This commit is contained in:
Alan Ren
2020-10-29 22:46:11 -07:00
committed by GitHub
parent 7857e8aeb9
commit ac476ba973
3 changed files with 18 additions and 8 deletions

View File

@@ -134,7 +134,7 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
new ProviderElementRenderer(), new ProviderElementRenderer(),
this.instantiationService.createInstance(TreeItemRenderer, this.treeLabels), this.instantiationService.createInstance(TreeItemRenderer, this.treeLabels),
this.instantiationService.createInstance(ConnectionProfileRenderer, true), this.instantiationService.createInstance(ConnectionProfileRenderer, true),
this.instantiationService.createInstance(ConnectionProfileGroupRenderer), this.instantiationService.createInstance(ConnectionProfileGroupRenderer, { showColor: false }),
this.instantiationService.createInstance(TreeNodeRenderer), this.instantiationService.createInstance(TreeNodeRenderer),
new SavedConnectionsNodeRenderer() new SavedConnectionsNodeRenderer()
]; ];
@@ -215,6 +215,10 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
this._register(this.capabilitiesService.onCapabilitiesRegistered(() => { this._register(this.capabilitiesService.onCapabilitiesRegistered(() => {
this.updateSavedConnectionsNode(); this.updateSavedConnectionsNode();
})); }));
this._register(this.themeService.onDidColorThemeChange(async () => {
await this.refresh();
}));
} }
private updateSavedConnectionsNode(): void { private updateSavedConnectionsNode(): void {
@@ -411,7 +415,7 @@ class DataSource implements IAsyncDataSource<TreeModel, TreeElement> {
} else if (element instanceof ConnectionProfile) { } else if (element instanceof ConnectionProfile) {
return false; return false;
} else if (element instanceof ConnectionProfileGroup) { } else if (element instanceof ConnectionProfileGroup) {
return element.hasChildren(); return true;
} else if (element instanceof TreeNode) { } else if (element instanceof TreeNode) {
return element.children.length > 0; return element.children.length > 0;
} else if (element instanceof SavedConnectionNode) { } else if (element instanceof SavedConnectionNode) {

View File

@@ -26,12 +26,17 @@ import { withNullAsUndefined } from 'vs/base/common/types';
const DefaultConnectionIconClass = 'server-page'; const DefaultConnectionIconClass = 'server-page';
export interface ConnectionProfileGroupDisplayOptions {
showColor: boolean;
}
class ConnectionProfileGroupTemplate extends Disposable { class ConnectionProfileGroupTemplate extends Disposable {
private _root: HTMLElement; private _root: HTMLElement;
private _nameContainer: HTMLElement; private _nameContainer: HTMLElement;
constructor( constructor(
container: HTMLElement container: HTMLElement,
private _option: ConnectionProfileGroupDisplayOptions
) { ) {
super(); super();
container.parentElement!.classList.add('server-group'); container.parentElement!.classList.add('server-group');
@@ -42,7 +47,7 @@ class ConnectionProfileGroupTemplate extends Disposable {
set(element: ConnectionProfileGroup) { set(element: ConnectionProfileGroup) {
let rowElement = findParentElement(this._root, 'monaco-list-row'); let rowElement = findParentElement(this._root, 'monaco-list-row');
if (rowElement) { if (this._option.showColor && rowElement) {
rowElement.style.color = element.textColor; rowElement.style.color = element.textColor;
if (element.color) { if (element.color) {
rowElement.style.background = element.color; rowElement.style.background = element.color;
@@ -63,10 +68,11 @@ export class ConnectionProfileGroupRenderer implements ITreeRenderer<ConnectionP
readonly templateId: string = ServerTreeRenderer.CONNECTION_GROUP_TEMPLATE_ID; readonly templateId: string = ServerTreeRenderer.CONNECTION_GROUP_TEMPLATE_ID;
constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService) { } constructor(private _options: ConnectionProfileGroupDisplayOptions,
@IInstantiationService private readonly _instantiationService: IInstantiationService) { }
renderTemplate(container: HTMLElement): ConnectionProfileGroupTemplate { renderTemplate(container: HTMLElement): ConnectionProfileGroupTemplate {
return this._instantiationService.createInstance(ConnectionProfileGroupTemplate, container); return this._instantiationService.createInstance(ConnectionProfileGroupTemplate, container, this._options);
} }
renderElement(node: ITreeNode<ConnectionProfileGroup, FuzzyScore>, index: number, template: ConnectionProfileGroupTemplate): void { renderElement(node: ITreeNode<ConnectionProfileGroup, FuzzyScore>, index: number, template: ConnectionProfileGroupTemplate): void {
template.set(node.element); template.set(node.element);

View File

@@ -33,7 +33,7 @@ export class TreeCreationUtils {
public static createConnectionTree(treeContainer: HTMLElement, instantiationService: IInstantiationService, configurationService: IConfigurationService, ariaLabel: string, useController?: IController): Tree | AsyncServerTree { public static createConnectionTree(treeContainer: HTMLElement, instantiationService: IInstantiationService, configurationService: IConfigurationService, ariaLabel: string, useController?: IController): Tree | AsyncServerTree {
if (useAsyncServerTree(configurationService)) { if (useAsyncServerTree(configurationService)) {
const dataSource = instantiationService.createInstance(AsyncRecentConnectionTreeDataSource); const dataSource = instantiationService.createInstance(AsyncRecentConnectionTreeDataSource);
const connectionProfileGroupRender = instantiationService.createInstance(ConnectionProfileGroupRenderer); const connectionProfileGroupRender = instantiationService.createInstance(ConnectionProfileGroupRenderer, { showColor: true });
const connectionProfileRenderer = instantiationService.createInstance(ConnectionProfileRenderer, true); const connectionProfileRenderer = instantiationService.createInstance(ConnectionProfileRenderer, true);
const treeNodeRenderer = instantiationService.createInstance(TreeNodeRenderer); const treeNodeRenderer = instantiationService.createInstance(TreeNodeRenderer);
const dnd = instantiationService.createInstance(AsyncRecentConnectionsDragAndDrop); const dnd = instantiationService.createInstance(AsyncRecentConnectionsDragAndDrop);
@@ -88,7 +88,7 @@ export class TreeCreationUtils {
if (useAsyncServerTree(configurationService)) { if (useAsyncServerTree(configurationService)) {
const dataSource = instantiationService.createInstance(AsyncServerTreeDataSource); const dataSource = instantiationService.createInstance(AsyncServerTreeDataSource);
const connectionProfileGroupRender = instantiationService.createInstance(ConnectionProfileGroupRenderer); const connectionProfileGroupRender = instantiationService.createInstance(ConnectionProfileGroupRenderer, { showColor: true });
const connectionProfileRenderer = instantiationService.createInstance(ConnectionProfileRenderer, false); const connectionProfileRenderer = instantiationService.createInstance(ConnectionProfileRenderer, false);
const treeNodeRenderer = instantiationService.createInstance(TreeNodeRenderer); const treeNodeRenderer = instantiationService.createInstance(TreeNodeRenderer);
const dnd = instantiationService.createInstance(AsyncServerTreeDragAndDrop); const dnd = instantiationService.createInstance(AsyncServerTreeDragAndDrop);