diff --git a/src/webviews/apps/plus/patchDetails/components/gl-tree-base.ts b/src/webviews/apps/plus/patchDetails/components/gl-tree-base.ts index ca9a5ee..92b14c5 100644 --- a/src/webviews/apps/plus/patchDetails/components/gl-tree-base.ts +++ b/src/webviews/apps/plus/patchDetails/components/gl-tree-base.ts @@ -208,7 +208,7 @@ export class GlTreeBase extends GlElement extends TreeItemBase { label: string; @@ -55,7 +55,7 @@ interface TreeModelBase extends TreeItemBase { description?: string; context?: Context; actions?: TreeItemAction[]; - decorators?: TreeItemDecorator[]; + decorations?: TreeItemDecoration[]; contextData?: unknown; } diff --git a/src/webviews/apps/shared/components/tree/tree-generator.ts b/src/webviews/apps/shared/components/tree/tree-generator.ts index 493abd6..e3cc2da 100644 --- a/src/webviews/apps/shared/components/tree/tree-generator.ts +++ b/src/webviews/apps/shared/components/tree/tree-generator.ts @@ -86,25 +86,25 @@ export class GlTreeGenerator extends GlElement { }); } - private renderDecorators(model: TreeModelFlat) { - const decorators = model.decorators; - if (decorators == null || decorators.length === 0) return nothing; + private renderDecorations(model: TreeModelFlat) { + const decorations = model.decorations; + if (decorations == null || decorations.length === 0) return nothing; - return decorators.map(decorator => { - if (decorator.type === 'icon') { + return decorations.map(decoration => { + if (decoration.type === 'icon') { return html``; } - if (decorator.type === 'text') { - return html`${decorator.label}`; + if (decoration.type === 'text') { + return html`${decoration.label}`; } - // TODO: implement badge and indicator decorators + // TODO: implement badge and indicator decorations return undefined; }); @@ -132,7 +132,7 @@ export class GlTreeGenerator extends GlElement { model.description != null, () => html`${model.description}`, )} - ${this.renderActions(model)} ${this.renderDecorators(model)} + ${this.renderActions(model)} ${this.renderDecorations(model)} `; } diff --git a/src/webviews/apps/shared/components/tree/tree-item.ts b/src/webviews/apps/shared/components/tree/tree-item.ts index d648aac..037be48 100644 --- a/src/webviews/apps/shared/components/tree/tree-item.ts +++ b/src/webviews/apps/shared/components/tree/tree-item.ts @@ -164,8 +164,8 @@ export class GlTreeItem extends GlElement { return html``; } - private renderDecorators() { - return html``; + private renderDecorations() { + return html``; } override render() { @@ -184,7 +184,7 @@ export class GlTreeItem extends GlElement { - ${this.renderActions()}${this.renderDecorators()} + ${this.renderActions()}${this.renderDecorations()} `; } diff --git a/src/webviews/apps/shared/components/tree/tree.css.ts b/src/webviews/apps/shared/components/tree/tree.css.ts index ac7ae4a..0058144 100644 --- a/src/webviews/apps/shared/components/tree/tree.css.ts +++ b/src/webviews/apps/shared/components/tree/tree.css.ts @@ -11,7 +11,8 @@ export const treeItemStyles = [ --tree-connector-size: var(--gitlens-tree-indent, 1.6rem); box-sizing: border-box; padding-left: var(--gitlens-gutter-width); - padding-right: var(--gitlens-scrollbar-gutter-width); + /* padding-right: var(--gitlens-scrollbar-gutter-width); */ + padding-right: 0.5rem; padding-top: 0.1rem; padding-bottom: 0.1rem; line-height: 2.2rem; @@ -213,5 +214,10 @@ export const treeItemStyles = [ .checkbox__input:checked + .checkbox__check { opacity: 1; } + + slot[name='decorations'] { + display: inline-block; + margin-left: 0.4rem; + } `, ];