Add icon for resource view items (#13009)

* Add icon for resource view items

* Remove unneeded stuff
This commit is contained in:
Charles Gagnon
2020-10-21 07:43:04 -07:00
committed by GitHub
parent f783a26a56
commit 660c1d6f21
4 changed files with 45 additions and 12 deletions

View File

@@ -8,6 +8,30 @@
width: 100%;
}
.resource-view .monaco-list .monaco-list-row .resource-type-row {
display: flex;
height: 100%;
width: 100%;
}
.resource-view .monaco-list .monaco-list-row .monaco-tl-twistie {
width: 0px;
}
.resource-view .monaco-list .monaco-list-row .resource-type-icon {
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 30px;
margin: 5px;
}
.resource-view .monaco-list .monaco-list-row .resource-type-name {
margin: auto;
font-size: 13px;
width: 100%;
}
.resource-viewer .actions-container .action-item .action-label {
padding-left: 20px;
padding-right: 5px;

View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/resourceViewerView';
import { ResourceType, ResourceViewerResourcesRegistry, Extensions } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
import { append, $ } from 'vs/base/browser/dom';
import { append, $, asCSSUrl } from 'vs/base/browser/dom';
import { IIdentityProvider, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
import { IDataSource, ITreeMouseEvent, ITreeNode, ITreeRenderer } from 'vs/base/browser/ui/tree/tree';
@@ -22,6 +22,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IViewPaneOptions, ViewPane } from 'vs/workbench/browser/parts/views/viewPaneContainer';
import { IViewDescriptorService } from 'vs/workbench/common/views';
import { localize } from 'vs/nls';
type TreeElement = ResourceType;
@@ -73,10 +74,10 @@ export class ResourceViewerView extends ViewPane {
this.tree.setInput(this.model);
this._register(Registry.as<ResourceViewerResourcesRegistry>(Extensions.ResourceViewerExtension).onDidRegisterResource(() => this.tree.updateChildren(this.model)));
this._register(this.tree.onMouseDblClick(this.onDoubleClick, this));
this._register(this.tree.onMouseClick(this.onMouseClick, this));
}
private onDoubleClick(event: ITreeMouseEvent<TreeElement | null>) {
private onMouseClick(event: ITreeMouseEvent<TreeElement | null>) {
if (event.element) {
this.commandService.executeCommand('resourceViewer.openResourceViewer', event.element.id);
}
@@ -98,14 +99,15 @@ class ResourceRenderer implements ITreeRenderer<ResourceType, void, ResourceType
public readonly templateId = ResourceRenderer.TEMPLATEID;
renderTemplate(parent: HTMLElement): ResourceTypeTemplate {
const container = append(parent, $('span'));
const icon = append(container, $('.icon'));
const name = append(container, $('.name'));
const container = append(parent, $('span.resource-type-row'));
const icon = append(container, $('.resource-type-icon'));
const name = append(container, $('.resource-type-name'));
return { name, icon };
}
renderElement(element: ITreeNode<ResourceType, void>, index: number, templateData: ResourceTypeTemplate, height: number): void {
templateData.name.innerText = element.element.name;
templateData.icon.style.backgroundImage = asCSSUrl(element.element.icon);
}
disposeTemplate(templateData: ResourceTypeTemplate): void {
@@ -116,7 +118,7 @@ class ResourceRenderer implements ITreeRenderer<ResourceType, void, ResourceType
class ListDelegate implements IListVirtualDelegate<TreeElement> {
getHeight(): number {
return 22;
return 40;
}
getTemplateId(element: TreeElement): string {
@@ -144,7 +146,7 @@ class ListAccessibilityProvider implements IListAccessibilityProvider<TreeElemen
}
getWidgetAriaLabel(): string {
return 'Resource Viewer Tree';
return localize('resourceViewer.ariaLabel', "Resource Viewer Tree");
}
}

View File

@@ -8,7 +8,8 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
import { Registry } from 'vs/platform/registry/common/platform';
import { IExtensionPoint, ExtensionsRegistry, ExtensionMessageCollector } from 'vs/workbench/services/extensions/common/extensionsRegistry';
import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
import { ResourceViewerResourcesRegistry, Extensions } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
import { ResourceViewerResourcesRegistry, Extensions, ResourceType } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
import * as resources from 'vs/base/common/resources';
interface IUserFriendlyViewDescriptor {
id: string;
@@ -59,8 +60,13 @@ export class ResourceViewResourcesExtensionHandler implements IWorkbenchContribu
if (!this.isValidResource(descriptor, collector)) {
return;
}
resourceRegistry.registerResource(descriptor);
const iconPath = resources.joinPath(extension.description.extensionLocation, descriptor.icon);
const resourceType: ResourceType = {
name: descriptor.name,
id: descriptor.id,
icon: iconPath
};
resourceRegistry.registerResource(resourceType);
}
}
});