Adding keyboard shortcuts for column resizing in slickgrid (#21100)

* Adding column resize keyboard shortcuts in slickgrid

* Switching to standard keyboard evt

* Adding comment for the functionality

* Cleaning up code and adding more comments

* Using quick input to get column resize width

* Adding check for negative sizes

* Fixing some stuff
This commit is contained in:
Aasim Khan
2022-11-04 16:15:04 -07:00
committed by GitHub
parent e98f2e2745
commit 00b797b4f3
33 changed files with 192 additions and 62 deletions

View File

@@ -19,6 +19,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { Codicon } from 'vs/base/common/codicons';
import { deepClone } from 'vs/base/common/objects';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
export enum ExecutionPlanCompareOrientation {
Horizontal = 'horizontal',
@@ -64,9 +65,10 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
@IInstantiationService instantiationService: IInstantiationService,
@IContextMenuService contextMenuService: IContextMenuService,
@IContextViewService contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
@IAccessibilityService accessibilityService: IAccessibilityService,
@IQuickInputService quickInputService: IQuickInputService
) {
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService);
this._model = <ExecutionPlanComparisonPropertiesViewModel>{};
this._parentContainer.style.display = 'none';
const header = DOM.$('.compare-operation-name');

View File

@@ -14,6 +14,7 @@ import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workben
import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase {
// Div that holds the name of the element selected
@@ -26,9 +27,10 @@ export class ExecutionPlanPropertiesView extends ExecutionPlanPropertiesViewBase
@IInstantiationService instantiationService: IInstantiationService,
@IContextMenuService contextMenuService: IContextMenuService,
@IContextViewService contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
@IAccessibilityService accessibilityService: IAccessibilityService,
@IQuickInputService quickInputService: IQuickInputService
) {
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService);
super(parentContainer, themeService, instantiationService, contextMenuService, contextViewService, accessibilityService, quickInputService);
this._model = <ExecutionPlanPropertiesView>{};
this._operationName = DOM.$('h3');
this._operationName.classList.add('operation-name');

View File

@@ -26,6 +26,7 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { deepClone } from 'vs/base/common/objects';
import { Disposable } from 'vs/base/common/lifecycle';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
export abstract class ExecutionPlanPropertiesViewBase extends Disposable implements IVerticalSashLayoutProvider {
// Title bar with close button action
@@ -69,7 +70,8 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService,
@IAccessibilityService accessibilityService: IAccessibilityService
@IAccessibilityService accessibilityService: IAccessibilityService,
@IQuickInputService quickInputService: IQuickInputService
) {
super();
const sashContainer = DOM.$('.properties-sash');
@@ -157,7 +159,7 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme
this._selectionModel = new CellSelectionModel<Slick.SlickData>();
this._tableComponent = this._register(new TreeGrid(table, accessibilityService, {
this._tableComponent = this._register(new TreeGrid(table, accessibilityService, quickInputService, {
columns: []
}, {
rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,

View File

@@ -25,6 +25,7 @@ import { CopyKeybind } from 'sql/base/browser/ui/table/plugins/copyKeybind.plugi
import { Disposable } from 'vs/base/common/lifecycle';
import { deepClone } from 'vs/base/common/objects';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
export class ExecutionPlanTreeTab extends Disposable implements IPanelTab {
public readonly title: string = localize('planTreeTab.title', 'Plan Tree');
@@ -53,7 +54,8 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
@IThemeService private _themeService: IThemeService,
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IAccessibilityService private accessibilityService: IAccessibilityService
@IAccessibilityService private _accessibilityService: IAccessibilityService,
@IQuickInputService private _quickInputService: IQuickInputService
) {
super();
}
@@ -194,7 +196,7 @@ export class ExecutionPlanTreeTabView extends Disposable implements IPanelView {
const selectionModel = new CellSelectionModel<Slick.SlickData>();
const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this.accessibilityService, {
const treeGrid = this._register(new TreeGrid<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
columns: columns,
sorter: (args) => {
const sortColumn = args.sortCol.field;

View File

@@ -31,6 +31,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
import { filterIconClassNames, searchPlaceholder, topOperationsSearchDescription } from 'sql/workbench/contrib/executionPlan/browser/constants';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
const TABLE_SORT_COLUMN_KEY = 'tableCostColumnForSorting';
@@ -63,7 +64,8 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextMenuService private _contextMenuService: IContextMenuService,
@IContextViewService private _contextViewService: IContextViewService,
@IAccessibilityService private _accessibilityService: IAccessibilityService
@IAccessibilityService private _accessibilityService: IAccessibilityService,
@IQuickInputService private _quickInputService: IQuickInputService,
) {
super();
}
@@ -238,7 +240,7 @@ export class TopOperationsTabView extends Disposable implements IPanelView {
const selectionModel = new CellSelectionModel<Slick.SlickData>({ hasRowSelector: true });
const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, {
const table = this._register(new Table<Slick.SlickData>(tableContainer, this._accessibilityService, this._quickInputService, {
columns: columns,
sorter: (args) => {
const column = args.sortCol.field;