Skip to content

Commit ff1aedd

Browse files
sandy081sandy081
committed
1 parent 31419e2 commit ff1aedd

2 files changed

Lines changed: 50 additions & 19 deletions

File tree

‎src/vs/workbench/browser/parts/views/customView.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { FileKind } from 'vs/platform/files/common/files';
3434
import { WorkbenchTreeController } from 'vs/platform/list/browser/listService';
3535
import { ViewletPanel, IViewletPanelOptions } from 'vs/workbench/browser/parts/views/panelViewlet';
3636
import { IMouseEvent } from 'vs/base/browser/mouseEvent';
37+
import { localize } from 'vs/nls';
3738

3839
export class CustomTreeViewPanel extends ViewletPanel {
3940

@@ -176,7 +177,9 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
176177
private _hasIconForParentNode = false;
177178
private _hasIconForLeafNode = false;
178179

180+
private domNode: HTMLElement;
179181
private treeContainer: HTMLElement;
182+
private message: HTMLDivElement;
180183
private tree: FileIconThemableWorkbenchTree;
181184
private root: ITreeItem;
182185
private elementsToRefresh: ITreeItem[] = [];
@@ -213,6 +216,8 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
213216
this.doRefresh([this.root]); /** soft refresh **/
214217
}
215218
}));
219+
220+
this.create();
216221
}
217222

218223
get dataProvider(): ITreeViewDataProvider {
@@ -233,10 +238,13 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
233238
});
234239
}
235240
};
241+
DOM.removeClass(this.domNode, 'message');
242+
this.refresh();
236243
} else {
237244
this._dataProvider = null;
245+
DOM.addClass(this.domNode, 'message');
246+
this.message.innerText = localize('no-dataprovider', "There is no data provider registered that can provide view data.");
238247
}
239-
this.refresh();
240248
}
241249

242250
get hasIconForParentNode(): boolean {
@@ -301,11 +309,16 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
301309
if (!this.tree) {
302310
this.createTree();
303311
}
304-
DOM.append(container, this.treeContainer);
312+
DOM.append(container, this.domNode);
313+
}
314+
315+
private create() {
316+
this.domNode = DOM.$('.tree-explorer-viewlet-tree-view');
317+
this.message = DOM.append(this.domNode, DOM.$('.customview-message'));
318+
this.treeContainer = DOM.append(this.domNode, DOM.$('.customview-tree'));
305319
}
306320

307321
private createTree() {
308-
this.treeContainer = DOM.$('.tree-explorer-viewlet-tree-view');
309322
const actionItemProvider = (action: IAction) => action instanceof MenuItemAction ? this.instantiationService.createInstance(ContextAwareMenuItemActionItem, action) : undefined;
310323
const menus = this.instantiationService.createInstance(TreeMenus, this.id);
311324
const dataSource = this.instantiationService.createInstance(TreeDataSource, this, this.container);
@@ -322,8 +335,8 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
322335
}
323336

324337
layout(size: number) {
338+
this.domNode.style.height = size + 'px';
325339
if (this.tree) {
326-
this.treeContainer.style.height = size + 'px';
327340
this.tree.layout(size);
328341
}
329342
}
@@ -338,7 +351,7 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
338351
}
339352

340353
refresh(elements?: ITreeItem[]): TPromise<void> {
341-
if (this.tree) {
354+
if (this.dataProvider && this.tree) {
342355
elements = elements || [this.root];
343356
for (const element of elements) {
344357
element.children = null; // reset children
@@ -353,7 +366,7 @@ export class CustomTreeViewer extends Disposable implements ITreeViewer {
353366
}
354367

355368
reveal(item: ITreeItem, parentChain: ITreeItem[], options?: { select?: boolean, focus?: boolean }): TPromise<void> {
356-
if (this.tree && this.isVisible) {
369+
if (this.dataProvider && this.tree && this.isVisible) {
357370
options = options ? options : { select: false, focus: false };
358371
const select = isUndefinedOrNull(options.select) ? false : options.select;
359372
const focus = isUndefinedOrNull(options.focus) ? false : options.focus;

‎src/vs/workbench/browser/parts/views/media/views.css‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,19 +50,37 @@
5050
display: none;
5151
}
5252

53-
.tree-explorer-viewlet-tree-view.file-icon-themable-tree .monaco-tree-row .content.align-icon-with-twisty::before {
53+
.monaco-workbench .tree-explorer-viewlet-tree-view .customview-message {
5454
display: none;
55+
padding: 10px 22px 0 22px;
56+
opacity: 0.5;
5557
}
5658

57-
.tree-explorer-viewlet-tree-view.file-icon-themable-tree .monaco-tree-row .content:not(.align-icon-with-twisty)::before {
59+
.monaco-workbench .tree-explorer-viewlet-tree-view.message .customview-message {
60+
display: inherit;
61+
}
62+
63+
.monaco-workbench .tree-explorer-viewlet-tree-view.message .customview-tree {
64+
display: none;
65+
}
66+
67+
.monaco-workbench .tree-explorer-viewlet-tree-view .customview-tree {
68+
height: 100%;
69+
}
70+
71+
.customview-tree.file-icon-themable-tree .monaco-tree-row .content.align-icon-with-twisty::before {
72+
display: none;
73+
}
74+
75+
.customview-tree.file-icon-themable-tree .monaco-tree-row .content:not(.align-icon-with-twisty)::before {
5876
display: inline-block;
5977
}
6078

61-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row {
79+
.customview-tree .monaco-tree .monaco-tree-row {
6280
padding-right: 12px;
6381
}
6482

65-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item {
83+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item {
6684
display: flex;
6785
height: 22px;
6886
line-height: 22px;
@@ -72,13 +90,13 @@
7290
flex-wrap: nowrap
7391
}
7492

75-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel {
93+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel {
7694
flex: 1;
7795
text-overflow: ellipsis;
7896
overflow: hidden;
7997
}
8098

81-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon {
99+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon {
82100
background-size: 16px;
83101
background-position: left center;
84102
background-repeat: no-repeat;
@@ -88,25 +106,25 @@
88106
-webkit-font-smoothing: antialiased;
89107
}
90108

91-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel .monaco-icon-label-description-container {
109+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel .monaco-icon-label-description-container {
92110
flex: 1;
93111
}
94112

95-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel::after {
113+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel::after {
96114
padding-right: 0px;
97115
}
98116

99-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
117+
.customview-tree .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
100118
display: none;
101119
}
102120

103-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row:hover .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
104-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
105-
.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.focused .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
121+
.customview-tree .monaco-tree .monaco-tree-row:hover .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
122+
.customview-tree .monaco-tree .monaco-tree-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
123+
.customview-tree .monaco-tree .monaco-tree-row.focused .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
106124
display: block;
107125
}
108126

109-
.tree-explorer-viewlet-tree-view .monaco-tree .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions .action-label {
127+
.customview-tree .monaco-tree .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions .action-label {
110128
width: 16px;
111129
height: 100%;
112130
background-position: 50% 50%;

0 commit comments

Comments
 (0)