mirror of
https://github.com/microsoft/vscode.git
synced 2026-07-14 07:54:36 +01:00
better icon support
This commit is contained in:
Johannes Rieken
@@ -1,160 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-workbench .outline-item .icon {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.constant {
|
||||
background-image: url('Constant_16x.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.constant,
|
||||
.hc-black .monaco-workbench .outline-item .icon.constant {
|
||||
background-image: url('Constant_16x_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.enum-member {
|
||||
background-image: url('EnumItem_16x.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.enum-member,
|
||||
.hc-black .monaco-workbench .outline-item .icon.enum-member {
|
||||
background-image: url('EnumItem_inverse_16x.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.struct {
|
||||
background-image: url('Structure_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.struct,
|
||||
.hc-black .monaco-workbench .outline-item .icon.struct {
|
||||
background-image: url('Structure_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.event {
|
||||
background-image: url('Event_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.event,
|
||||
.hc-black .monaco-workbench .outline-item .icon.event {
|
||||
background-image: url('Event_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.operator {
|
||||
background-image: url('Operator_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.operator,
|
||||
.hc-black .monaco-workbench .outline-item .icon.operator {
|
||||
background-image: url('Operator_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.type-parameter {
|
||||
background-image: url('Template_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
.vs-dark .monaco-workbench .outline-item .icon.type-parameter,
|
||||
.hc-black .monaco-workbench .outline-item .icon.type-parameter {
|
||||
background-image: url('Template_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-item .icon.method,
|
||||
.monaco-workbench .outline-item .icon.function,
|
||||
.monaco-workbench .outline-item .icon.constructor,
|
||||
.monaco-workbench .outline-item .icon.field,
|
||||
.monaco-workbench .outline-item .icon.variable,
|
||||
.monaco-workbench .outline-item .icon.class,
|
||||
.monaco-workbench .outline-item .icon.interface,
|
||||
.monaco-workbench .outline-item .icon.object,
|
||||
.monaco-workbench .outline-item .icon.namespace,
|
||||
.monaco-workbench .outline-item .icon.package,
|
||||
.monaco-workbench .outline-item .icon.module,
|
||||
.monaco-workbench .outline-item .icon.property,
|
||||
.monaco-workbench .outline-item .icon.enum,
|
||||
.monaco-workbench .outline-item .icon.key,
|
||||
.monaco-workbench .outline-item .icon.string,
|
||||
.monaco-workbench .outline-item .icon.rule,
|
||||
.monaco-workbench .outline-item .icon.file,
|
||||
.monaco-workbench .outline-item .icon.array,
|
||||
.monaco-workbench .outline-item .icon.number,
|
||||
.monaco-workbench .outline-item .icon.null,
|
||||
.monaco-workbench .outline-item .icon.boolean {
|
||||
background-image: url('symbol-sprite.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .outline-item .icon.method,
|
||||
.vs .monaco-workbench .outline-item .icon.function,
|
||||
.vs .monaco-workbench .outline-item .icon.constructor { background-position: 0 -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.field,
|
||||
.vs .monaco-workbench .outline-item .icon.variable { background-position: -22px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.class { background-position: -43px -3px; }
|
||||
.vs .monaco-workbench .outline-item .icon.interface { background-position: -63px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.object,
|
||||
.vs .monaco-workbench .outline-item .icon.namespace,
|
||||
.vs .monaco-workbench .outline-item .icon.package,
|
||||
.vs .monaco-workbench .outline-item .icon.module { background-position: -82px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.property { background-position: -102px -3px; }
|
||||
.vs .monaco-workbench .outline-item .icon.enum { background-position: -122px -3px; }
|
||||
.vs .monaco-workbench .outline-item .icon.key,
|
||||
.vs .monaco-workbench .outline-item .icon.string { background-position: -202px -3px; }
|
||||
.vs .monaco-workbench .outline-item .icon.rule { background-position: -242px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.file { background-position: -262px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.array { background-position: -302px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.number { background-position: -322px -4px; }
|
||||
.vs .monaco-workbench .outline-item .icon.null,
|
||||
.vs .monaco-workbench .outline-item .icon.boolean { background-position: -343px -4px; }
|
||||
|
||||
.vs-dark .monaco-workbench .outline-item .icon.method,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.function,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.constructor,
|
||||
.hc-black .monaco-workbench .outline-item .icon.method,
|
||||
.hc-black .monaco-workbench .outline-item .icon.function,
|
||||
.hc-black .monaco-workbench .outline-item .icon.constructor { background-position: 0 -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.field,
|
||||
.hc-black .monaco-workbench .outline-item .icon.field,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.variable,
|
||||
.hc-black .monaco-workbench .outline-item .icon.variable { background-position: -22px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.class,
|
||||
.hc-black .monaco-workbench .outline-item .icon.class { background-position: -43px -23px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.interface,
|
||||
.hc-black .monaco-workbench .outline-item .icon.interface { background-position: -63px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.object,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.namespace,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.package,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.module,
|
||||
.hc-black .monaco-workbench .outline-item .icon.object,
|
||||
.hc-black .monaco-workbench .outline-item .icon.namespace,
|
||||
.hc-black .monaco-workbench .outline-item .icon.package,
|
||||
.hc-black .monaco-workbench .outline-item .icon.module { background-position: -82px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.property,
|
||||
.hc-black .monaco-workbench .outline-item .icon.property { background-position: -102px -23px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.key,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.string,
|
||||
.hc-black .monaco-workbench .outline-item .icon.key,
|
||||
.hc-black .monaco-workbench .outline-item .icon.string { background-position: -202px -23px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.enum,
|
||||
.hc-black .monaco-workbench .outline-item .icon.enum { background-position: -122px -23px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.rule,
|
||||
.hc-black .monaco-workbench .outline-item .icon.rule { background-position: -242px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.file,
|
||||
.hc-black .monaco-workbench .outline-item .icon.file { background-position: -262px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.array,
|
||||
.hc-black .monaco-workbench .outline-item .icon.array { background-position: -302px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.number,
|
||||
.hc-black .monaco-workbench .outline-item .icon.number { background-position: -322px -24px; }
|
||||
.vs-dark .monaco-workbench .outline-item .icon.null,
|
||||
.vs-dark .monaco-workbench .outline-item .icon.boolean,
|
||||
.hc-black .monaco-workbench .outline-item .icon.null,
|
||||
.hc-black .monaco-workbench .outline-item .icon.boolean { background-position: -342px -24px; }
|
||||
@@ -0,0 +1,181 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-workbench .symbol-icon {
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
min-height: 14px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.constant {
|
||||
background-image: url('Constant_16x.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.constant, .hc-black .monaco-workbench .symbol-icon.constant {
|
||||
background-image: url('Constant_16x_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.enum-member {
|
||||
background-image: url('EnumItem_16x.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.enum-member, .hc-black .monaco-workbench .symbol-icon.enum-member {
|
||||
background-image: url('EnumItem_inverse_16x.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.struct {
|
||||
background-image: url('Structure_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.struct, .hc-black .monaco-workbench .symbol-icon.struct {
|
||||
background-image: url('Structure_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.event {
|
||||
background-image: url('Event_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.event, .hc-black .monaco-workbench .symbol-icon.event {
|
||||
background-image: url('Event_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.operator {
|
||||
background-image: url('Operator_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.operator, .hc-black .monaco-workbench .symbol-icon.operator {
|
||||
background-image: url('Operator_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.type-parameter {
|
||||
background-image: url('Template_16x_vscode.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.type-parameter, .hc-black .monaco-workbench .symbol-icon.type-parameter {
|
||||
background-image: url('Template_16x_vscode_inverse.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .symbol-icon.method, .monaco-workbench .symbol-icon.function, .monaco-workbench .symbol-icon.constructor, .monaco-workbench .symbol-icon.field, .monaco-workbench .symbol-icon.variable, .monaco-workbench .symbol-icon.class, .monaco-workbench .symbol-icon.interface, .monaco-workbench .symbol-icon.object, .monaco-workbench .symbol-icon.namespace, .monaco-workbench .symbol-icon.package, .monaco-workbench .symbol-icon.module, .monaco-workbench .symbol-icon.property, .monaco-workbench .symbol-icon.enum, .monaco-workbench .symbol-icon.key, .monaco-workbench .symbol-icon.string, .monaco-workbench .symbol-icon.rule, .monaco-workbench .symbol-icon.file, .monaco-workbench .symbol-icon.array, .monaco-workbench .symbol-icon.number, .monaco-workbench .symbol-icon.null, .monaco-workbench .symbol-icon.boolean {
|
||||
background-image: url('symbol-sprite.svg');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.method, .vs .monaco-workbench .symbol-icon.function, .vs .monaco-workbench .symbol-icon.constructor {
|
||||
background-position: 0 -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.field, .vs .monaco-workbench .symbol-icon.variable {
|
||||
background-position: -22px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.class {
|
||||
background-position: -43px -3px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.interface {
|
||||
background-position: -63px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.object, .vs .monaco-workbench .symbol-icon.namespace, .vs .monaco-workbench .symbol-icon.package, .vs .monaco-workbench .symbol-icon.module {
|
||||
background-position: -82px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.property {
|
||||
background-position: -102px -3px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.enum {
|
||||
background-position: -122px -3px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.key, .vs .monaco-workbench .symbol-icon.string {
|
||||
background-position: -202px -3px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.rule {
|
||||
background-position: -242px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.file {
|
||||
background-position: -262px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.array {
|
||||
background-position: -302px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.number {
|
||||
background-position: -322px -4px;
|
||||
}
|
||||
|
||||
.vs .monaco-workbench .symbol-icon.null, .vs .monaco-workbench .symbol-icon.boolean {
|
||||
background-position: -343px -4px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.method, .vs-dark .monaco-workbench .symbol-icon.function, .vs-dark .monaco-workbench .symbol-icon.constructor, .hc-black .monaco-workbench .symbol-icon.method, .hc-black .monaco-workbench .symbol-icon.function, .hc-black .monaco-workbench .symbol-icon.constructor {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.field, .hc-black .monaco-workbench .symbol-icon.field, .vs-dark .monaco-workbench .symbol-icon.variable, .hc-black .monaco-workbench .symbol-icon.variable {
|
||||
background-position: -22px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.class, .hc-black .monaco-workbench .symbol-icon.class {
|
||||
background-position: -43px -23px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.interface, .hc-black .monaco-workbench .symbol-icon.interface {
|
||||
background-position: -63px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.object, .vs-dark .monaco-workbench .symbol-icon.namespace, .vs-dark .monaco-workbench .symbol-icon.package, .vs-dark .monaco-workbench .symbol-icon.module, .hc-black .monaco-workbench .symbol-icon.object, .hc-black .monaco-workbench .symbol-icon.namespace, .hc-black .monaco-workbench .symbol-icon.package, .hc-black .monaco-workbench .symbol-icon.module {
|
||||
background-position: -82px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.property, .hc-black .monaco-workbench .symbol-icon.property {
|
||||
background-position: -102px -23px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.key, .vs-dark .monaco-workbench .symbol-icon.string, .hc-black .monaco-workbench .symbol-icon.key, .hc-black .monaco-workbench .symbol-icon.string {
|
||||
background-position: -202px -23px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.enum, .hc-black .monaco-workbench .symbol-icon.enum {
|
||||
background-position: -122px -23px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.rule, .hc-black .monaco-workbench .symbol-icon.rule {
|
||||
background-position: -242px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.file, .hc-black .monaco-workbench .symbol-icon.file {
|
||||
background-position: -262px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.array, .hc-black .monaco-workbench .symbol-icon.array {
|
||||
background-position: -302px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.number, .hc-black .monaco-workbench .symbol-icon.number {
|
||||
background-position: -322px -24px;
|
||||
}
|
||||
|
||||
.vs-dark .monaco-workbench .symbol-icon.null, .vs-dark .monaco-workbench .symbol-icon.boolean, .hc-black .monaco-workbench .symbol-icon.null, .hc-black .monaco-workbench .symbol-icon.boolean {
|
||||
background-position: -342px -24px;
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
.monaco-workbench .outline-panel .outline-input {
|
||||
box-sizing: border-box;
|
||||
padding: 5px 9px 9px 16px;
|
||||
padding: 5px 9px 9px 9px;
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-panel .outline-input .monaco-inputbox {
|
||||
@@ -21,3 +21,18 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-panel .outline-element {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-panel .outline-element .outline-element-icon {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.monaco-workbench .outline-panel .outline-element .outline-element-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/edi
|
||||
import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
|
||||
import { OneOutline, OutlineItem, getOutline } from './outlineModel';
|
||||
import { OutlineDataSource, OutlineRenderer, OutlineItemComparator, OutlineItemFilter } from './outlineTree';
|
||||
import { localize } from '../../../../nls';
|
||||
|
||||
class ActiveEditorOracle {
|
||||
|
||||
@@ -104,7 +105,8 @@ export class OutlinePanel extends ViewsViewletPanel {
|
||||
let treeContainer = dom.$('.outline-tree');
|
||||
dom.append(container, inputContainer, treeContainer);
|
||||
|
||||
this._input = new InputBox(inputContainer, null, {});
|
||||
this._input = new InputBox(inputContainer, null, { placeholder: localize('filter', "Filter") });
|
||||
this._input.disable();
|
||||
this.disposables.push(attachInputBoxStyler(this._input, this._themeService));
|
||||
|
||||
const dataSource = new OutlineDataSource();
|
||||
@@ -113,7 +115,7 @@ export class OutlinePanel extends ViewsViewletPanel {
|
||||
this._treeFilter = new OutlineItemFilter();
|
||||
this._tree = this._instantiationService.createInstance(WorkbenchTree, treeContainer, { dataSource, renderer, sorter: this._treeComparator, filter: this._treeFilter }, {});
|
||||
|
||||
this._disposables.push(this._tree);
|
||||
this._disposables.push(this._tree, this._input);
|
||||
}
|
||||
|
||||
protected layoutBody(height: number): void {
|
||||
@@ -149,6 +151,8 @@ export class OutlinePanel extends ViewsViewletPanel {
|
||||
this._tree.setInput(first);
|
||||
}
|
||||
|
||||
this._input.enable();
|
||||
|
||||
this._editorDisposables.push(this._input.onDidChange(query => {
|
||||
model.updateFilter(query);
|
||||
this._tree.refresh(undefined, true);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
'use strict';
|
||||
|
||||
import 'vs/css!./media/outline';
|
||||
import 'vs/css!./media/symbol-icons';
|
||||
import { TPromise } from 'vs/base/common/winjs.base';
|
||||
import * as dom from 'vs/base/browser/dom';
|
||||
import { symbolKindToCssClass } from 'vs/editor/common/modes';
|
||||
@@ -52,6 +52,10 @@ export class OutlineDataSource implements IDataSource {
|
||||
async getParent(tree: ITree, element: OneOutline | OutlineItem): TPromise<any, any> {
|
||||
return element instanceof OutlineItem ? element.parent : undefined;
|
||||
}
|
||||
|
||||
shouldAutoexpand(tree: ITree, element: OutlineItem): boolean {
|
||||
return !Boolean(element.parent);
|
||||
}
|
||||
}
|
||||
|
||||
export interface OutlineItemTemplate {
|
||||
@@ -60,22 +64,28 @@ export interface OutlineItemTemplate {
|
||||
}
|
||||
|
||||
export class OutlineRenderer implements IRenderer {
|
||||
|
||||
getHeight(tree: ITree, element: OutlineItem): number {
|
||||
return 22;
|
||||
}
|
||||
|
||||
getTemplateId(tree: ITree, element: OutlineItem): string {
|
||||
return 'outline.element';
|
||||
}
|
||||
|
||||
renderTemplate(tree: ITree, templateId: string, container: HTMLElement): OutlineItemTemplate {
|
||||
const icon = dom.$('.icon');
|
||||
container.appendChild(icon);
|
||||
const label = new HighlightedLabel(container);
|
||||
return { icon, label };
|
||||
const icon = dom.$('.outline-element-icon symbol-icon');
|
||||
const labelContainer = dom.$('.outline-element-label');
|
||||
dom.addClass(container, 'outline-element');
|
||||
dom.append(container, icon, labelContainer);
|
||||
return { icon, label: new HighlightedLabel(labelContainer) };
|
||||
}
|
||||
|
||||
renderElement(tree: ITree, element: OutlineItem, templateId: string, template: OutlineItemTemplate): void {
|
||||
template.icon.classList.add(symbolKindToCssClass((<OutlineItem>element).symbol.kind));
|
||||
template.label.set(element.symbol.name, element.matches ? createMatches(element.matches[1]) : []);
|
||||
}
|
||||
|
||||
disposeTemplate(tree: ITree, templateId: string, template: OutlineItemTemplate): void {
|
||||
template.label.dispose();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user