diff --git a/src/sql/parts/notebook/cellViews/code.component.ts b/src/sql/parts/notebook/cellViews/code.component.ts index 20300df0fe..f3192966e6 100644 --- a/src/sql/parts/notebook/cellViews/code.component.ts +++ b/src/sql/parts/notebook/cellViews/code.component.ts @@ -29,7 +29,7 @@ import { IModelService } from 'vs/editor/common/services/modelService'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces'; import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar'; -import { RunCellAction, DeleteCellAction, AddCellAction, CellContext } from 'sql/parts/notebook/cellViews/codeActions'; +import { RunCellAction, CellContext, NotebookCellToggleMoreActon } from 'sql/parts/notebook/cellViews/codeActions'; import { NotebookModel } from 'sql/parts/notebook/models/notebookModel'; import { ToggleMoreWidgetAction } from 'sql/parts/dashboard/common/actions'; import { CellTypes } from 'sql/parts/notebook/models/contracts'; @@ -46,6 +46,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange @ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef; @ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef; @Input() cellModel: ICellModel; + @Input() hideVerticalToolbar: boolean = false; @Output() public onContentChanged = new EventEmitter(); @@ -58,15 +59,14 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange } protected _actionBar: Taskbar; - protected _moreActions: ActionBar; private readonly _minimumHeight = 30; private _editor: QueryTextEditor; private _editorInput: UntitledEditorInput; private _editorModel: ITextModel; private _uri: string; private _model: NotebookModel; - private _actions: Action[] = []; private _activeCellId: string; + private _toggleMoreActions: NotebookCellToggleMoreActon; constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface, @@ -85,30 +85,25 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange ngOnInit() { this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this.updateTheme(this.themeService.getColorTheme()); - this.initActionBar(); - this._actions.push( - this._instantiationService.createInstance(AddCellAction, 'codeBefore', localize('codeBefore', 'Insert Code before'), CellTypes.Code, false), - this._instantiationService.createInstance(AddCellAction, 'codeAfter', localize('codeAfter', 'Insert Code after'), CellTypes.Code, true), - this._instantiationService.createInstance(AddCellAction, 'markdownBefore', localize('markdownBefore', 'Insert Markdown before'), CellTypes.Markdown, false), - this._instantiationService.createInstance(AddCellAction, 'markdownAfter', localize('markdownAfter', 'Insert Markdown after'), CellTypes.Markdown, true), - this._instantiationService.createInstance(DeleteCellAction, 'delete', localize('delete', 'Delete')) - ); + if (!this.hideVerticalToolbar) { + this.initActionBar(); + } + } + + ngAfterViewInit() { + this._toggleMoreActions = new NotebookCellToggleMoreActon( + this._instantiationService, + this.contextMenuService, + this.notificationService, + this.moreActionsElementRef, + this.model); } ngOnChanges(changes: { [propKey: string]: SimpleChange }) { this.updateLanguageMode(); this.updateModel(); - for (let propName in changes) { - if (propName === 'activeCellId') { - let changedProp = changes[propName]; - if (this.cellModel.id === changedProp.currentValue) { - this.toggleMoreActions(true); - } - else { - this.toggleMoreActions(false); - } - break; - } + if (this._toggleMoreActions) { + this._toggleMoreActions.onChange(this.cellModel, changes); } } @@ -170,17 +165,6 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange ]); } - private toggleMoreActions(showIcon: boolean) { - let context = new CellContext(this.model, this.cellModel); - if (showIcon) { - let moreActionsElement = this.moreActionsElementRef.nativeElement; - this._moreActions = new ActionBar(moreActionsElement, { orientation: ActionsOrientation.VERTICAL }); - this._moreActions.context = { target: moreActionsElement }; - this._moreActions.push(this._instantiationService.createInstance(ToggleMoreWidgetAction, this._actions, context), { icon: showIcon, label: false }); - } else if (this._moreActions !== undefined) { - this._moreActions.clear(); - } - } private createUri(): URI { let uri = URI.from({ scheme: Schemas.untitled, path: `notebook-editor-${this.cellModel.id}` }); diff --git a/src/sql/parts/notebook/cellViews/code.css b/src/sql/parts/notebook/cellViews/code.css index 99dc0b8292..0666d3176e 100644 --- a/src/sql/parts/notebook/cellViews/code.css +++ b/src/sql/parts/notebook/cellViews/code.css @@ -11,7 +11,6 @@ code-component { code-component .toolbar { border-right-width: 1px; - border-right-style: solid; } code-component .toolbarIconRun { diff --git a/src/sql/parts/notebook/cellViews/codeActions.ts b/src/sql/parts/notebook/cellViews/codeActions.ts index c82a6ded5c..b00a31a9b1 100644 --- a/src/sql/parts/notebook/cellViews/codeActions.ts +++ b/src/sql/parts/notebook/cellViews/codeActions.ts @@ -5,13 +5,20 @@ import { nb } from 'sqlops'; +import { ElementRef, SimpleChange } from '@angular/core'; + import { Action } from 'vs/base/common/actions'; import { TPromise } from 'vs/base/common/winjs.base'; import { localize } from 'vs/nls'; -import { CellType } from 'sql/parts/notebook/models/contracts'; +import { ActionBar, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; +import { ToggleMoreWidgetAction } from 'sql/parts/dashboard/common/actions'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; +import { INotificationService, Severity } from 'vs/platform/notification/common/notification'; + +import { CellType, CellTypes } from 'sql/parts/notebook/models/contracts'; import { NotebookModel } from 'sql/parts/notebook/models/notebookModel'; import { getErrorMessage } from 'sql/parts/notebook/notebookUtils'; -import { INotificationService, Severity } from 'vs/platform/notification/common/notification'; import { ICellModel, FutureInternal } from 'sql/parts/notebook/models/modelInterfaces'; import { ToggleableAction } from 'sql/parts/notebook/notebookActions'; @@ -184,4 +191,51 @@ export class DeleteCellAction extends CellActionBase { } return Promise.resolve(); } +} + +export class NotebookCellToggleMoreActon { + private _actions: Action[] = []; + private _moreActions: ActionBar; + + constructor ( + private _instantiationService: IInstantiationService, + private contextMenuService: IContextMenuService, + private notificationService: INotificationService, + private moreActionElementRef: ElementRef, + private model: NotebookModel + ) { + this._actions.push( + this._instantiationService.createInstance(AddCellAction, 'codeBefore', localize('codeBefore', 'Insert Code before'), CellTypes.Code, false, this.notificationService), + this._instantiationService.createInstance(AddCellAction, 'codeBefore', localize('codeAfter', 'Insert Code after'), CellTypes.Code, true, this.notificationService), + this._instantiationService.createInstance(AddCellAction, 'markdownBefore', localize('markdownBefore', 'Insert Markdown before'), CellTypes.Markdown, false, this.notificationService), + this._instantiationService.createInstance(AddCellAction, 'markdownAfter', localize('markdownAfter', 'Insert Markdown after'), CellTypes.Markdown, true, this.notificationService), + this._instantiationService.createInstance(DeleteCellAction, 'delete', localize('delete', 'Delete'), this.notificationService) + ); + let moreActionsElement = this.moreActionElementRef.nativeElement; + this._moreActions = new ActionBar(moreActionsElement, { orientation: ActionsOrientation.VERTICAL }); + this._moreActions.context = { target: moreActionsElement }; + } + + toggle(showIcon: boolean): void { + if (showIcon) { + this._moreActions.push(this._instantiationService.createInstance(ToggleMoreWidgetAction, this._actions, this.model, this.contextMenuService), { icon: showIcon, label: false }); + } else if (this._moreActions) { + this._moreActions.clear(); + } + } + + public onChange(cellModel: ICellModel, changes: { [propKey: string]: SimpleChange }): void { + for (let propName in changes) { + if (propName === 'activeCellId') { + let changedProp = changes[propName]; + if (cellModel.id === changedProp.currentValue) { + this.toggle(true); + } + else { + this.toggle(false); + } + break; + } + } + } } \ No newline at end of file diff --git a/src/sql/parts/notebook/cellViews/textCell.component.html b/src/sql/parts/notebook/cellViews/textCell.component.html index 399bec512e..84ed3e1640 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.html +++ b/src/sql/parts/notebook/cellViews/textCell.component.html @@ -6,7 +6,7 @@ -->
- +