ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding image support to list view (#20449)

Browse Source
This commit is contained in:
Aasim Khan
2022-08-31 09:02:40 -07:00
committed by GitHub
parent 3fc3c106bb
commit 010fe91921
11 changed files with 152 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sql/workbench/browser/modelComponents/listView.component.html
View File

@@ -1,4 +1,4 @@
<div class="modelview-listview-container" [ngStyle]="CSSStyles">
<div class="modelview-listview-container" [ngStyle]="CSSStyles" [style.width]="width">
<div *ngIf="title" class="modelview-listview-title">{{title.text}}</div>
<div #vscodelist> </div>
</div>

35
src/sql/workbench/browser/modelComponents/listView.component.ts
View File

@@ -2,6 +2,7 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
@@ -18,6 +19,7 @@ import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/lis
import { attachListStyler } from 'vs/platform/theme/common/styler';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { ILogService } from 'vs/platform/log/common/log';
import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
@Component({
templateUrl: decodeURI(require.toUrl('./listView.component.html'))
@@ -28,6 +30,7 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
@Input() modelStore: IModelStore;
@ViewChild('vscodelist', { read: ElementRef }) private _vscodeList: ElementRef;
private _optionsList!: List<azdata.ListViewOption>;
private _optionsListRenderer: OptionsListRenderer;
private _selectedElementIdx!: number;
static ROW_HEIGHT = 26;
@@ -50,9 +53,11 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
accessibilityProvider: new OptionsListAccessibilityProvider(this)
};
this._optionsListRenderer = new OptionsListRenderer();
this._optionsList = new List<azdata.ListViewOption>('ModelViewListView',
this._vscodeList.nativeElement,
new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()],
new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [this._optionsListRenderer],
vscodelistOption);
this._register(attachListStyler(this._optionsList, this.themeService));
@@ -109,6 +114,11 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
this._optionsList!.splice(0, this._optionsList!.length, this.options);
let height = (<number>this.height) ?? (this.options.length * ListViewComponent.ROW_HEIGHT);
this._optionsList.layout(height);
if (!this.options.find(o => o.icon !== undefined)) {
this._vscodeList.nativeElement.classList.add('hide-icon');
} else {
this._vscodeList.nativeElement.classList.remove('hide-icon');
}
}
// This is the entry point for the extension to set the selectedOptionId
@@ -144,8 +154,8 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
public override get CSSStyles(): azdata.CssStyles {
return this.mergeCss(super.CSSStyles, {
'width': this.getWidth(),
'height': this.getHeight()
'width': super.CSSStyles['width'] ?? this.getWidth(),
'height': super.CSSStyles['height'] ?? this.getHeight()
});
}
}
@@ -166,7 +176,10 @@ class OptionListDelegate implements IListVirtualDelegate<azdata.ListViewOption>
}
interface ExtensionListTemplate {
parent: HTMLElement;
root: HTMLElement;
labelContainer: HTMLElement;
iconContainer: HTMLElement;
}
class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, ExtensionListTemplate> {
@@ -178,12 +191,26 @@ class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, Extens
public renderTemplate(container: HTMLElement): ExtensionListTemplate {
const tableTemplate: ExtensionListTemplate = Object.create(null);
tableTemplate.parent = container;
tableTemplate.root = DOM.append(container, DOM.$('div.list-row.listview-option'));
tableTemplate.iconContainer = DOM.$('div.list-row.listview-option-icon');
tableTemplate.labelContainer = DOM.$('div.list-row.listview-option-label');
DOM.append(tableTemplate.root, tableTemplate.iconContainer);
DOM.append(tableTemplate.root, tableTemplate.labelContainer);
return tableTemplate;
}
public renderElement(option: azdata.ListViewOption, index: number, templateData: ExtensionListTemplate): void {
templateData.root.innerText = option.label ?? '';
templateData.labelContainer.innerText = option.label ?? '';
if (option.icon) {
templateData.iconContainer.classList.add('icon');
templateData.iconContainer.classList.add(createIconCssClass(option.icon));
} else {
templateData.iconContainer.className = '';
templateData.iconContainer.classList.add('list-row', 'listview-option-icon');
}
templateData.parent.title = option.label ?? '';
templateData.parent.setAttribute('aria-label', option.ariaLabel ?? option.label ?? '');
}
public disposeTemplate(template: ExtensionListTemplate): void {

21
src/sql/workbench/browser/modelComponents/media/listView.css
View File

@@ -7,8 +7,6 @@
display: flex;
flex-direction: column;
height: 100%;
max-width: 150px;
min-width: 120px;
font-size: 100%;
font-weight: inherit;
overflow: auto;
@@ -24,10 +22,29 @@
}
.modelview-listview-container .listview-option {
display: flex;
line-height: 16px;
width: 95%;
padding: 5px 0px 5px 5px;
}
.modelview-listview-container .listview-option .listview-option-icon {
width: 16px;
height: 16px;
margin-right: 5px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.modelview-listview-container .hide-icon .listview-option .listview-option-icon{
display: none;
}
.modelview-listview-container .listview-option .listview-option-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}