diff --git a/src/sql/parts/notebook/cellViews/code.component.ts b/src/sql/parts/notebook/cellViews/code.component.ts index 9d62b7e30c..20300df0fe 100644 --- a/src/sql/parts/notebook/cellViews/code.component.ts +++ b/src/sql/parts/notebook/cellViews/code.component.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./code'; -import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core'; +import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter, OnChanges, SimpleChange } from '@angular/core'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; import { AngularDisposable } from 'sql/base/common/lifecycle'; @@ -41,9 +41,9 @@ export const CODE_SELECTOR: string = 'code-component'; selector: CODE_SELECTOR, templateUrl: decodeURI(require.toUrl('./code.component.html')) }) -export class CodeComponent extends AngularDisposable implements OnInit { +export class CodeComponent extends AngularDisposable implements OnInit, OnChanges { @ViewChild('toolbar', { read: ElementRef }) private toolbarElement: ElementRef; - @ViewChild('moreactions', { read: ElementRef }) private moreactionsElement: ElementRef; + @ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef; @ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef; @Input() cellModel: ICellModel; @@ -53,6 +53,10 @@ export class CodeComponent extends AngularDisposable implements OnInit { this._model = value; } + @Input() set activeCellId(value: string) { + this._activeCellId = value; + } + protected _actionBar: Taskbar; protected _moreActions: ActionBar; private readonly _minimumHeight = 30; @@ -61,6 +65,8 @@ export class CodeComponent extends AngularDisposable implements OnInit { private _editorModel: ITextModel; private _uri: string; private _model: NotebookModel; + private _actions: Action[] = []; + private _activeCellId: string; constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface, @@ -80,11 +86,30 @@ export class CodeComponent extends AngularDisposable implements OnInit { 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')) + ); } - ngOnChanges() { + 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; + } + } } ngAfterContentInit(): void { @@ -98,6 +123,10 @@ export class CodeComponent extends AngularDisposable implements OnInit { return this._model; } + get activeCellId(): string { + return this._activeCellId; + } + private createEditor(): void { let instantiationService = this._instantiationService.createChild(new ServiceCollection([IProgressService, new SimpleProgressService()])); this._editor = instantiationService.createInstance(QueryTextEditor); @@ -139,19 +168,18 @@ export class CodeComponent extends AngularDisposable implements OnInit { this._actionBar.setContent([ { action: runCellAction } ]); + } - let moreActionsElement = this.moreactionsElement.nativeElement; - this._moreActions = new ActionBar(moreActionsElement, { orientation: ActionsOrientation.VERTICAL }); - this._moreActions.context = { target: moreActionsElement }; - - let actions: Action[] = []; - actions.push(this._instantiationService.createInstance(AddCellAction, 'codeBefore', localize('codeBefore', 'Insert Code before'), CellTypes.Code, false)); - actions.push(this._instantiationService.createInstance(AddCellAction, 'codeAfter', localize('codeAfter', 'Insert Code after'), CellTypes.Code, true)); - actions.push(this._instantiationService.createInstance(AddCellAction, 'markdownBefore', localize('markdownBefore', 'Insert Markdown before'), CellTypes.Markdown, false)); - actions.push(this._instantiationService.createInstance(AddCellAction, 'markdownAfter', localize('markdownAfter', 'Insert Markdown after'), CellTypes.Markdown, true)); - actions.push(this._instantiationService.createInstance(DeleteCellAction, 'delete', localize('delete', 'Delete'))); - - this._moreActions.push(this._instantiationService.createInstance(ToggleMoreWidgetAction, actions, context), { icon: true, label: false }); + 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 { @@ -180,7 +208,7 @@ export class CodeComponent extends AngularDisposable implements OnInit { let toolbarEl = this.toolbarElement.nativeElement; toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); - let moreactionsEl = this.moreactionsElement.nativeElement; + let moreactionsEl = this.moreActionsElementRef.nativeElement; moreactionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); } diff --git a/src/sql/parts/notebook/cellViews/codeActions.ts b/src/sql/parts/notebook/cellViews/codeActions.ts index 4288cd6ace..c82a6ded5c 100644 --- a/src/sql/parts/notebook/cellViews/codeActions.ts +++ b/src/sql/parts/notebook/cellViews/codeActions.ts @@ -173,7 +173,7 @@ export class DeleteCellAction extends CellActionBase { runCellAction(context: CellContext): Promise { try { - context.model.deleteCell(context.cell); + context.model.deleteCell(context.cell); } catch (error) { let message = getErrorMessage(error); diff --git a/src/sql/parts/notebook/cellViews/codeCell.component.html b/src/sql/parts/notebook/cellViews/codeCell.component.html index a04b98a24b..0f9b964a3d 100644 --- a/src/sql/parts/notebook/cellViews/codeCell.component.html +++ b/src/sql/parts/notebook/cellViews/codeCell.component.html @@ -6,7 +6,7 @@ -->
- +
diff --git a/src/sql/parts/notebook/cellViews/codeCell.component.ts b/src/sql/parts/notebook/cellViews/codeCell.component.ts index fabb43e53e..35a9db9797 100644 --- a/src/sql/parts/notebook/cellViews/codeCell.component.ts +++ b/src/sql/parts/notebook/cellViews/codeCell.component.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./codeCell'; -import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core'; +import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, SimpleChange, OnChanges } from '@angular/core'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; import { CellView } from 'sql/parts/notebook/cellViews/interfaces'; @@ -21,13 +21,19 @@ export const CODE_SELECTOR: string = 'code-cell-component'; selector: CODE_SELECTOR, templateUrl: decodeURI(require.toUrl('./codeCell.component.html')) }) -export class CodeCellComponent extends CellView implements OnInit { +export class CodeCellComponent extends CellView implements OnInit, OnChanges { @ViewChild('codeCellOutput', { read: ElementRef }) private outputPreview: ElementRef; - private _model: NotebookModel; + @Input() cellModel: ICellModel; @Input() set model(value: NotebookModel) { this._model = value; } + @Input() set activeCellId(value: string) { + this._activeCellId = value; + } + + private _model: NotebookModel; + private _activeCellId: string; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef, @@ -46,6 +52,24 @@ export class CodeCellComponent extends CellView implements OnInit { } } + ngOnChanges(changes: { [propKey: string]: SimpleChange }) { + for (let propName in changes) { + if (propName === 'activeCellId') { + let changedProp = changes[propName]; + this._activeCellId = changedProp.currentValue; + break; + } + } + } + + get model(): NotebookModel { + return this._model; + } + + get activeCellId(): string { + return this._activeCellId; + } + // Todo: implement layout public layout() { @@ -56,8 +80,4 @@ export class CodeCellComponent extends CellView implements OnInit { outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); } - get model(): NotebookModel { - return this._model; - } - } diff --git a/src/sql/parts/notebook/cellViews/textCell.component.html b/src/sql/parts/notebook/cellViews/textCell.component.html index e770ff98aa..399bec512e 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.html +++ b/src/sql/parts/notebook/cellViews/textCell.component.html @@ -6,7 +6,7 @@ -->
- +
diff --git a/src/sql/parts/notebook/cellViews/textCell.component.ts b/src/sql/parts/notebook/cellViews/textCell.component.ts index 6696a8541a..f7ef93fb16 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.ts +++ b/src/sql/parts/notebook/cellViews/textCell.component.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./textCell'; -import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core'; +import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, OnChanges, SimpleChange } from '@angular/core'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; import { CellView } from 'sql/parts/notebook/cellViews/interfaces'; @@ -22,12 +22,16 @@ export const TEXT_SELECTOR: string = 'text-cell-component'; selector: TEXT_SELECTOR, templateUrl: decodeURI(require.toUrl('./textCell.component.html')) }) -export class TextCellComponent extends CellView implements OnInit { +export class TextCellComponent extends CellView implements OnInit, OnChanges { @ViewChild('preview', { read: ElementRef }) private output: ElementRef; @Input() cellModel: ICellModel; + @Input() set activeCellId(value: string) { + this._activeCellId = value; + } private _content: string; private isEditMode: boolean; private _sanitizer: ISanitizer; + private _activeCellId: string; constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface, @@ -39,8 +43,15 @@ export class TextCellComponent extends CellView implements OnInit { this.isEditMode = false; } - ngOnChanges() { + ngOnChanges(changes: { [propKey: string]: SimpleChange }) { this.updatePreview(); + for (let propName in changes) { + if (propName === 'activeCellId') { + let changedProp = changes[propName]; + this._activeCellId = changedProp.currentValue; + break; + } + } } //Gets sanitizer from ISanitizer interface @@ -51,6 +62,10 @@ export class TextCellComponent extends CellView implements OnInit { return this._sanitizer = defaultSanitizer; } + get activeCellId(): string { + return this._activeCellId; + } + /** * Updates the preview of markdown component with latest changes * If content is empty and in non-edit mode, default it to 'Double-click to edit' diff --git a/src/sql/parts/notebook/notebook.component.html b/src/sql/parts/notebook/notebook.component.html index 274c3ed078..5102b2d4ca 100644 --- a/src/sql/parts/notebook/notebook.component.html +++ b/src/sql/parts/notebook/notebook.component.html @@ -10,9 +10,9 @@
- + - +
diff --git a/src/sql/parts/notebook/notebook.component.ts b/src/sql/parts/notebook/notebook.component.ts index 27bcfdf1a5..c3e72cc48e 100644 --- a/src/sql/parts/notebook/notebook.component.ts +++ b/src/sql/parts/notebook/notebook.component.ts @@ -54,6 +54,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit { private _modelRegisteredDeferred = new Deferred(); private profile: IConnectionProfile; private _trustedAction: TrustedAction; + private _activeCellId: string; constructor( @@ -85,6 +86,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit { return this._model; } + public get activeCellId(): string { + return this._activeCellId; + } + public get modelRegistered(): Promise { return this._modelRegisteredDeferred.promise; } @@ -106,6 +111,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit { this._activeCell = cell; this._activeCell.active = true; this._model.activeCell = this._activeCell; + this._activeCellId = cell.id; this._changeRef.detectChanges(); } }