diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index e3ae03aff9..7fd4c08748 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -260,7 +260,8 @@ declare module 'azdata' { export enum DeclarativeDataType { - component = 'component' + component = 'component', + menu = 'menu' } export type DeclarativeTableRowSelectedEvent = { @@ -394,11 +395,23 @@ declare module 'azdata' { selectedRow?: number; } + + export interface DeclarativeTableMenuCellValue { + /** + * commands for the menu. Use an array for a group and menu separators will be added. + */ + commands: (string | string[])[]; + /** + * context that will be passed to the commands. + */ + context: { [key: string]: string | boolean | number } | string | boolean | number | undefined + } + export interface DeclarativeTableCellValue { /** * The cell value */ - value: string | number | boolean | Component; + value: string | number | boolean | Component | DeclarativeTableMenuCellValue; /** * The aria-label of the cell */ diff --git a/src/sql/workbench/api/common/sqlExtHostTypes.ts b/src/sql/workbench/api/common/sqlExtHostTypes.ts index 1602a4ca5b..670ed4949f 100644 --- a/src/sql/workbench/api/common/sqlExtHostTypes.ts +++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts @@ -387,7 +387,8 @@ export enum DeclarativeDataType { category = 'category', boolean = 'boolean', editableCategory = 'editableCategory', - component = 'component' + component = 'component', + menu = 'menu' } export enum CardType { diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html index 909e8209e3..197fea4e2c 100644 --- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html +++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html @@ -1,13 +1,13 @@ - +
@@ -20,8 +20,7 @@ diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts index ed613102d0..73b656aea6 100644 --- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts +++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts @@ -19,13 +19,18 @@ import { ILogService } from 'vs/platform/log/common/log'; import * as colorRegistry from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; import { equals } from 'vs/base/common/objects'; +import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { MenuItemAction, MenuRegistry } from 'vs/platform/actions/common/actions'; +import { IAction, Separator } from 'vs/base/common/actions'; export enum DeclarativeDataType { string = 'string', category = 'category', boolean = 'boolean', editableCategory = 'editableCategory', - component = 'component' + component = 'component', + menu = 'menu' } @Component({ @@ -53,7 +58,9 @@ export default class DeclarativeTableComponent extends ContainerBase ChangeDetectorRef)) changeRef: ChangeDetectorRef, @Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(ILogService) logService: ILogService, - @Inject(IThemeService) themeService: IThemeService + @Inject(IThemeService) themeService: IThemeService, + @Inject(IContextMenuService) private contextMenuService: IContextMenuService, + @Inject(IInstantiationService) private instantiationService: IInstantiationService ) { super(changeRef, el, logService); this._colorTheme = themeService.getColorTheme(); @@ -89,6 +96,10 @@ export default class DeclarativeTableComponent extends ContainerBase { + return this.createMenuItem(cmd); + })); + } + } + this.contextMenuService.showContextMenu({ + getAnchor: () => event.currentTarget as HTMLElement, + getActions: () => actions, + getActionsContext: () => cellValue.context + }); + } + + private createMenuItem(commandId: string): MenuItemAction { + const command = MenuRegistry.getCommand(commandId); + return this.instantiationService.createInstance(MenuItemAction, command, undefined, { shouldForwardArgs: true }); + } + public onKey(e: KeyboardEvent, row: number) { // Ignore the bubble up events if (e.target !== e.currentTarget) { diff --git a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css index 9eba631d91..86e99bc8b4 100644 --- a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css +++ b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css @@ -26,3 +26,11 @@ width: 100%; text-align: center; } + +.declarative-table .declarative-table-cell .codicon.toggle-more { + border-width: 0px; + height: 16px; + width: 26px; + vertical-align: middle; + cursor: pointer; +}
+ [ngStyle]="column.headerCssStyles" [attr.aria-label]="getHeaderAriaLabel(c)"> {{column.displayName}} + [ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)" role="gridcell"> @@ -42,6 +41,8 @@ +