Add notebook grid actions (#7181)

* Add notebook grid actions

* pr comments
This commit is contained in:
Chris LaFreniere
2019-09-17 14:16:35 -07:00
committed by GitHub
parent 7e0a5205b2
commit 141226332c
4 changed files with 77 additions and 14 deletions

View File

@@ -3,6 +3,8 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/gridPanel';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import QueryRunner, { QueryGridDataProvider } from 'sql/platform/query/common/queryRunner';
import { VirtualizedCollection, AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
@@ -416,7 +418,22 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
this.scrolled = false;
}
private build(): void {
// actionsOrientation controls the orientation (horizontal or vertical) of the actionBar
private build(actionsOrientation?: ActionsOrientation): void {
// Default is VERTICAL
if (isUndefinedOrNull(actionsOrientation)) {
actionsOrientation = ActionsOrientation.VERTICAL;
}
let actionBarContainer = document.createElement('div');
// Create a horizontal actionbar if orientation passed in is HORIZONTAL
if (actionsOrientation === ActionsOrientation.HORIZONTAL) {
actionBarContainer.className = 'grid-panel action-bar horizontal';
this.container.appendChild(actionBarContainer);
}
let tableContainer = document.createElement('div');
tableContainer.style.display = 'inline-block';
tableContainer.style.width = `calc(100% - ${ACTIONBAR_WIDTH}px)`;
@@ -459,13 +476,12 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
if (this.styles) {
this.table.style(this.styles);
}
let actionBarContainer = document.createElement('div');
actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
actionBarContainer.style.display = 'inline-block';
actionBarContainer.style.height = '100%';
actionBarContainer.style.verticalAlign = 'top';
this.container.appendChild(actionBarContainer);
// If the actionsOrientation passed in is "VERTICAL" (or no actionsOrientation is passed in at all), create a vertical actionBar
if (actionsOrientation === ActionsOrientation.VERTICAL) {
actionBarContainer.className = 'grid-panel action-bar vertical';
actionBarContainer.style.width = ACTIONBAR_WIDTH + 'px';
this.container.appendChild(actionBarContainer);
}
let context: IGridActionContext = {
gridDataProvider: this.gridDataProvider,
table: this.table,
@@ -474,7 +490,7 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
resultId: this.resultSet.id
};
this.actionBar = new ActionBar(actionBarContainer, {
orientation: ActionsOrientation.VERTICAL, context: context
orientation: actionsOrientation, context: context
});
// update context before we run an action
this.selectionModel.onSelectedRangesChanged.subscribe(e => {
@@ -602,15 +618,17 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
protected abstract getContextActions(): IAction[];
public layout(size?: number): void {
// The actionsOrientation passed in controls the actionBar orientation
public layout(size?: number, orientation?: Orientation, actionsOrientation?: ActionsOrientation): void {
if (!this.table) {
this.build();
this.build(actionsOrientation);
}
if (!size) {
size = this.currentHeight;
} else {
this.currentHeight = size;
}
// Table is always called with Orientation as VERTICAL
this.table.layout(size, Orientation.VERTICAL);
}

View File

@@ -0,0 +1,15 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.grid-panel.action-bar.vertical {
display : inline-block;
height : 100%;
vertical-align : top;
}
.grid-panel.action-bar.horizontal {
width : 100%;
display: flex;
}