From 6440ae84d993b8a02bfeeea8790327a2d8f2d550 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Mon, 20 Jun 2022 21:33:06 -0700 Subject: [PATCH] designer table improvements (#19785) * designer table improvements * remove async --- .../ui/table/plugins/buttonColumn.plugin.ts | 3 +- .../plugins/media/buttonColumn.plugin.css | 8 +-- .../workbench/browser/designer/designer.ts | 49 +++++++++++++------ 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/sql/base/browser/ui/table/plugins/buttonColumn.plugin.ts b/src/sql/base/browser/ui/table/plugins/buttonColumn.plugin.ts index 3e5a2e7a34..921cab915a 100644 --- a/src/sql/base/browser/ui/table/plugins/buttonColumn.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/buttonColumn.plugin.ts @@ -45,7 +45,8 @@ export class ButtonColumn extends BaseClickableColumn name: this.options.name, toolTip: this.options.title, resizable: this.options.resizable, - selectable: false + selectable: false, + cssClass: 'slick-plugin-button-cell' }; } } diff --git a/src/sql/base/browser/ui/table/plugins/media/buttonColumn.plugin.css b/src/sql/base/browser/ui/table/plugins/media/buttonColumn.plugin.css index 25f131a147..3284068fe3 100644 --- a/src/sql/base/browser/ui/table/plugins/media/buttonColumn.plugin.css +++ b/src/sql/base/browser/ui/table/plugins/media/buttonColumn.plugin.css @@ -7,9 +7,7 @@ cursor: pointer; height: 100%; text-align: center; - padding-right: 0px; - padding-top: 0px; - padding-bottom: 0px; + padding: 0px; } .slick-plugin-button:disabled { @@ -32,3 +30,7 @@ border-width: 0px; background-color: transparent; } + +.slick-plugin-button-cell { + text-align: center; +} diff --git a/src/sql/workbench/browser/designer/designer.ts b/src/sql/workbench/browser/designer/designer.ts index 568b7028d7..65f0be51be 100644 --- a/src/sql/workbench/browser/designer/designer.ts +++ b/src/sql/workbench/browser/designer/designer.ts @@ -16,7 +16,7 @@ import { Orientation, Sizing, SplitView } from 'vs/base/browser/ui/splitview/spl import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import 'vs/css!./media/designer'; -import { ITableMouseEvent, ITableStyles } from 'sql/base/browser/ui/table/interfaces'; +import { ITableStyles } from 'sql/base/browser/ui/table/interfaces'; import { IThemable } from 'vs/base/common/styler'; import { Checkbox, ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox'; import { Table } from 'sql/base/browser/ui/table/table'; @@ -850,21 +850,15 @@ export class Designer extends Disposable implements IThemable { this._actionsMap.get(taskbar).map(a => a.table = table); } const columns: Slick.Column[] = []; - if (tableProperties.canInsertRows || tableProperties.canMoveRows) { - // Add move context menu actions - this._register(table.onContextMenu((e) => { - this.openContextMenu(table, e, propertyPath, view, tableProperties); - })); - } if (tableProperties.canMoveRows) { // Add row move drag and drop const moveRowsPlugin = new RowMoveManager({ cancelEditOnDrag: true, id: 'moveRow', iconCssClass: Codicon.grabber.classNames, - title: localize('designer.moveRowText', 'Move Row'), - width: 20, - resizable: false, + name: localize('designer.moveRowText', 'Move'), + width: 50, + resizable: true, isFontIcon: true, behavior: 'selectAndMove' }); @@ -928,12 +922,14 @@ export class Designer extends Disposable implements IThemable { } })); if (tableProperties.canRemoveRows) { + const removeText = localize('designer.removeRowText', "Remove"); const deleteRowColumn = new ButtonColumn({ id: 'deleteRow', iconCssClass: Codicon.trash.classNames, - title: localize('designer.removeRowText', "Remove"), - width: 20, - resizable: false, + name: removeText, + title: removeText, + width: 60, + resizable: true, isFontIcon: true, enabledField: CanBeDeletedProperty }); @@ -957,6 +953,27 @@ export class Designer extends Disposable implements IThemable { table.registerPlugin(deleteRowColumn); columns.push(deleteRowColumn.definition); } + if (tableProperties.canInsertRows || tableProperties.canMoveRows) { + const moreActionsText = localize('designer.actions', "More Actions"); + const actionsColumn = new ButtonColumn({ + id: 'actions', + iconCssClass: Codicon.ellipsis.classNames, + name: moreActionsText, + title: moreActionsText, + width: 100, + resizable: true, + isFontIcon: true + }); + this._register(actionsColumn.onClick((e) => { + this.openContextMenu(table, e.row, e.position, propertyPath, view, tableProperties); + })); + table.registerPlugin(actionsColumn); + columns.push(actionsColumn.definition); + // Add move context menu actions + this._register(table.onContextMenu((e) => { + this.openContextMenu(table, e.cell.row, e.anchor, propertyPath, view, tableProperties); + })); + } table.columns = columns; table.grid.onBeforeEditCell.subscribe((e, data): boolean => { return data.item[data.column.field].enabled !== false; @@ -1029,12 +1046,12 @@ export class Designer extends Disposable implements IThemable { private openContextMenu( table: Table, - event: ITableMouseEvent, + rowIndex: number, + anchor: HTMLElement | { x: number, y: number }, propertyPath: DesignerPropertyPath, view: DesignerUIArea, tableProperties: DesignerTableProperties ): void { - const rowIndex = event.cell.row; const tableActionContext: DesignerTableActionContext = { table: table, path: propertyPath, @@ -1053,7 +1070,7 @@ export class Designer extends Disposable implements IThemable { } }); this._contextMenuService.showContextMenu({ - getAnchor: () => event.anchor, + getAnchor: () => anchor, getActions: () => actions, getActionsContext: () => (tableActionContext) });