Add IconPath type (#14420)

* Add IconPath type

* Add ThemedIconPath subtype

* Update type
This commit is contained in:
Charles Gagnon
2021-02-24 12:49:54 -08:00
committed by GitHub
parent 587ac45418
commit 4b40d66bca
11 changed files with 34 additions and 36 deletions

View File

@@ -4,7 +4,6 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
import * as azdata from 'azdata'; import * as azdata from 'azdata';
import * as vscode from 'vscode';
import { ApiWrapper } from '../common/apiWrapper'; import { ApiWrapper } from '../common/apiWrapper';
import { ModelViewBase } from './models/modelViewBase'; import { ModelViewBase } from './models/modelViewBase';
import { ViewBase } from './viewBase'; import { ViewBase } from './viewBase';
@@ -16,7 +15,7 @@ export interface iconSettings {
containerWidth?: number, containerWidth?: number,
containerHeight?: number, containerHeight?: number,
css?: { [key: string]: string }, css?: { [key: string]: string },
path?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri } path?: azdata.IconPath;
} }
/** /**
* View to pick model source * View to pick model source

View File

@@ -14,7 +14,7 @@ interface IActionMetadata {
title?: string, title?: string,
description?: string, description?: string,
link?: string, link?: string,
iconPath?: { light: string | vscode.Uri; dark: string | vscode.Uri }, iconPath?: azdata.ThemedIconPath,
command?: string command?: string
} }

View File

@@ -13,7 +13,7 @@ interface IActionMetadata {
title?: string, title?: string,
description?: string, description?: string,
link?: string, link?: string,
iconPath?: { light: string | vscode.Uri; dark: string | vscode.Uri }, iconPath?: azdata.ThemedIconPath,
command?: string; command?: string;
} }

5
src/sql/azdata.d.ts vendored
View File

@@ -3180,11 +3180,14 @@ declare module 'azdata' {
CSSStyles?: { [key: string]: string }; CSSStyles?: { [key: string]: string };
} }
export type ThemedIconPath = { light: string | vscode.Uri; dark: string | vscode.Uri };
export type IconPath = string | vscode.Uri | ThemedIconPath;
export interface ComponentWithIcon { export interface ComponentWithIcon {
/** /**
* @deprecated This will be moved to `ComponentWithIconProperties` * @deprecated This will be moved to `ComponentWithIconProperties`
*/ */
iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; iconPath?: IconPath;
/** /**
* @deprecated This will be moved to `ComponentWithIconProperties` * @deprecated This will be moved to `ComponentWithIconProperties`
*/ */

View File

@@ -349,7 +349,7 @@ declare module 'azdata' {
export interface RadioCard { export interface RadioCard {
id: string; id: string;
descriptions: RadioCardDescription[]; descriptions: RadioCardDescription[];
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
} }
export interface RadioCardDescription { export interface RadioCardDescription {
@@ -441,7 +441,7 @@ declare module 'azdata' {
/** /**
* The path for the icon with optional dark-theme away alternative * The path for the icon with optional dark-theme away alternative
*/ */
iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; iconPath?: IconPath;
/** /**
* The height of the icon * The height of the icon
*/ */
@@ -538,7 +538,7 @@ declare module 'azdata' {
/** /**
* Icon of the tab * Icon of the tab
*/ */
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
} }
/** /**
@@ -820,7 +820,7 @@ declare module 'azdata' {
} }
export interface ButtonColumnOption { export interface ButtonColumnOption {
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
} }
export interface ButtonCell extends TableCell { export interface ButtonCell extends TableCell {
@@ -963,7 +963,7 @@ declare module 'azdata' {
/** /**
* The icon to be displayed. * The icon to be displayed.
*/ */
icon: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon: IconPath;
/** /**
* The title of the icon. * The title of the icon.
*/ */
@@ -974,7 +974,7 @@ declare module 'azdata' {
/** /**
* The icon to be displayed. * The icon to be displayed.
*/ */
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
/** /**
* The title of the button. * The title of the button.
*/ */
@@ -985,7 +985,7 @@ declare module 'azdata' {
/** /**
* The icon to be displayed. * The icon to be displayed.
*/ */
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
/** /**
* The title of the hyperlink. * The title of the hyperlink.
*/ */
@@ -1013,7 +1013,7 @@ declare module 'azdata' {
/** /**
* The icon to use for all the cells in this column. * The icon to use for all the cells in this column.
*/ */
icon?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; icon?: IconPath;
} }
export interface ButtonColumn extends IconColumnOptions, TableColumn { export interface ButtonColumn extends IconColumnOptions, TableColumn {

View File

@@ -540,7 +540,7 @@ function createFromTabs(items: (azdata.Tab | azdata.TabGroup)[]): InternalItemCo
return itemConfigs; return itemConfigs;
} }
function toTabItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig { function toTabItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: azdata.IconPath): InternalItemConfig {
return new InternalItemConfig(content as ComponentWrapper, { return new InternalItemConfig(content as ComponentWrapper, {
title: title, title: title,
group: group, group: group,
@@ -860,10 +860,10 @@ class ComponentWithIconWrapper extends ComponentWrapper {
super(proxy, handle, type, id); super(proxy, handle, type, id);
} }
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } { public get iconPath(): azdata.IconPath {
return this.properties['iconPath']; return this.properties['iconPath'];
} }
public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) { public set iconPath(v: azdata.IconPath) {
this.setProperty('iconPath', v); this.setProperty('iconPath', v);
} }
@@ -927,10 +927,10 @@ class CardWrapper extends ComponentWrapper implements azdata.CardComponent {
public set actions(a: azdata.ActionDescriptor[]) { public set actions(a: azdata.ActionDescriptor[]) {
this.setProperty('actions', a); this.setProperty('actions', a);
} }
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } { public get iconPath(): azdata.IconPath {
return this.properties['iconPath']; return this.properties['iconPath'];
} }
public set iconPath(v: string | URI | { light: string | URI; dark: string | URI }) { public set iconPath(v: azdata.IconPath) {
this.setProperty('iconPath', v); this.setProperty('iconPath', v);
} }

View File

@@ -14,7 +14,6 @@ import * as azdata from 'azdata';
import { Emitter } from 'vs/base/common/event'; import { Emitter } from 'vs/base/common/event';
import { IDisposable, Disposable } from 'vs/base/common/lifecycle'; import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
import { ModelComponentWrapper } from 'sql/workbench/browser/modelComponents/modelComponentWrapper.component'; import { ModelComponentWrapper } from 'sql/workbench/browser/modelComponents/modelComponentWrapper.component';
import { URI } from 'vs/base/common/uri';
import * as nls from 'vs/nls'; import * as nls from 'vs/nls';
import { EventType, addDisposableListener } from 'vs/base/browser/dom'; import { EventType, addDisposableListener } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -23,8 +22,6 @@ import { convertSize } from 'sql/base/browser/dom';
import { onUnexpectedError } from 'vs/base/common/errors'; import { onUnexpectedError } from 'vs/base/common/errors';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
export class ItemDescriptor<T> { export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { } constructor(public descriptor: IComponentDescriptor, public config: T) { }
} }

View File

@@ -6,9 +6,8 @@
import { ChangeDetectorRef, ElementRef } from '@angular/core'; import { ChangeDetectorRef, ElementRef } from '@angular/core';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { createIconCssClass, IUserFriendlyIcon } from 'sql/workbench/browser/modelComponents/iconUtils'; import { createIconCssClass, IconPath } from 'sql/workbench/browser/modelComponents/iconUtils';
import { removeCSSRulesContainingSelector } from 'vs/base/browser/dom'; import { removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
import { URI } from 'vs/base/common/uri';
import { IComponentDescriptor } from 'sql/platform/dashboard/browser/interfaces'; import { IComponentDescriptor } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom'; import { convertSize } from 'sql/base/browser/dom';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
@@ -20,7 +19,7 @@ export class ItemDescriptor<T> {
export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconProperties> extends ComponentBase<T> { export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconProperties> extends ComponentBase<T> {
protected _iconClass: string; protected _iconClass: string;
protected _iconPath: IUserFriendlyIcon; protected _iconPath: IconPath;
constructor( constructor(
changeRef: ChangeDetectorRef, changeRef: ChangeDetectorRef,
el: ElementRef, el: ElementRef,
@@ -58,8 +57,8 @@ export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconPr
return convertSize(this.iconHeight, `${this.defaultIconHeight}px`); return convertSize(this.iconHeight, `${this.defaultIconHeight}px`);
} }
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } { public get iconPath(): IconPath {
return this.getPropertyOrDefault<IUserFriendlyIcon>((props) => props.iconPath, undefined); return this.getPropertyOrDefault<IconPath>((props) => props.iconPath, undefined);
} }
public get iconHeight(): number | string { public get iconHeight(): number | string {

View File

@@ -9,7 +9,7 @@ import { URI } from 'vs/base/common/uri';
const ids = new IdGenerator('model-view-component-icon-'); const ids = new IdGenerator('model-view-component-icon-');
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI }; export type IconPath = string | URI | { light: string | URI; dark: string | URI };
/** /**
* Create a CSS class for the specified icon, if a class with the name already exists, it will be deleted first. * Create a CSS class for the specified icon, if a class with the name already exists, it will be deleted first.
@@ -17,7 +17,7 @@ export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: stri
* @param className optional, the class name you want to reuse. * @param className optional, the class name you want to reuse.
* @returns the CSS class name * @returns the CSS class name
*/ */
export function createIconCssClass(iconPath: IUserFriendlyIcon, className?: string): string { export function createIconCssClass(iconPath: IconPath, className?: string): string {
let iconClass = className; let iconClass = className;
if (!iconClass) { if (!iconClass) {
iconClass = ids.nextId(); iconClass = ids.nextId();
@@ -30,7 +30,7 @@ export function createIconCssClass(iconPath: IUserFriendlyIcon, className?: stri
return iconClass; return iconClass;
} }
function getLightIconUri(iconPath: IUserFriendlyIcon): URI { function getLightIconUri(iconPath: IconPath): URI {
if (iconPath && iconPath['light']) { if (iconPath && iconPath['light']) {
return getIconUri(iconPath['light']); return getIconUri(iconPath['light']);
} else { } else {
@@ -38,7 +38,7 @@ function getLightIconUri(iconPath: IUserFriendlyIcon): URI {
} }
} }
function getDarkIconUri(iconPath: IUserFriendlyIcon): URI { function getDarkIconUri(iconPath: IconPath): URI {
if (iconPath && iconPath['dark']) { if (iconPath && iconPath['dark']) {
return getIconUri(iconPath['dark']); return getIconUri(iconPath['dark']);
} }
@@ -53,6 +53,6 @@ function getIconUri(iconPath: string | URI): URI {
} }
} }
export function getIconKey(iconPath: IUserFriendlyIcon): string { export function getIconKey(iconPath: IconPath): string {
return getLightIconUri(iconPath).toString(true) + getDarkIconUri(iconPath)?.toString(true); return getLightIconUri(iconPath).toString(true) + getDarkIconUri(iconPath)?.toString(true);
} }

View File

@@ -8,7 +8,7 @@ import { NavigationBarLayout, PanelComponent } from 'sql/base/browser/ui/panel/p
import { TabType } from 'sql/base/browser/ui/panel/tab.component'; import { TabType } from 'sql/base/browser/ui/panel/tab.component';
import { ContainerBase, ItemDescriptor } from 'sql/workbench/browser/modelComponents/componentBase'; import { ContainerBase, ItemDescriptor } from 'sql/workbench/browser/modelComponents/componentBase';
import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces'; import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils'; import { IconPath, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { attachTabbedPanelStyler } from 'sql/workbench/common/styler'; import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
import { TabbedPanelLayout } from 'azdata'; import { TabbedPanelLayout } from 'azdata';
@@ -18,7 +18,7 @@ export interface TabConfig {
title: string; title: string;
id?: string; id?: string;
group: string; group: string;
icon?: IUserFriendlyIcon; icon?: IconPath;
} }
interface Tab { interface Tab {

View File

@@ -28,7 +28,7 @@ import { isUndefinedOrNull } from 'vs/base/common/types';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
import { convertSizeToNumber } from 'sql/base/browser/dom'; import { convertSizeToNumber } from 'sql/base/browser/dom';
import { ButtonCellValue, ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin'; import { ButtonCellValue, ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import { IUserFriendlyIcon, createIconCssClass, getIconKey } from 'sql/workbench/browser/modelComponents/iconUtils'; import { IconPath, createIconCssClass, getIconKey } from 'sql/workbench/browser/modelComponents/iconUtils';
import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin'; import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
import { onUnexpectedError } from 'vs/base/common/errors'; import { onUnexpectedError } from 'vs/base/common/errors';
import { ILogService } from 'vs/platform/log/common/log'; import { ILogService } from 'vs/platform/log/common/log';
@@ -207,7 +207,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
} }
} }
private createIconCssClassInternal(icon: IUserFriendlyIcon): string { private createIconCssClassInternal(icon: IconPath): string {
const iconKey: string = getIconKey(icon); const iconKey: string = getIconKey(icon);
const iconCssClass = this._iconCssMap[iconKey] ?? createIconCssClass(icon); const iconCssClass = this._iconCssMap[iconKey] ?? createIconCssClass(icon);
if (!this._iconCssMap[iconKey]) { if (!this._iconCssMap[iconKey]) {
@@ -430,7 +430,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
private createButtonPlugin(col: azdata.ButtonColumn) { private createButtonPlugin(col: azdata.ButtonColumn) {
let name = col.value; let name = col.value;
if (!this._buttonColumns[col.value]) { if (!this._buttonColumns[col.value]) {
const icon = <IUserFriendlyIcon>(col.options ? (<any>col.options).icon : col.icon); const icon = <IconPath>(col.options ? (<any>col.options).icon : col.icon);
this._buttonColumns[col.value] = new ButtonColumn({ this._buttonColumns[col.value] = new ButtonColumn({
title: col.value, title: col.value,
iconCssClass: icon ? this.createIconCssClassInternal(icon) : undefined, iconCssClass: icon ? this.createIconCssClassInternal(icon) : undefined,