From 0a486a280ddb49434d18282dafc27e99381004c7 Mon Sep 17 00:00:00 2001 From: Raj <44002319+rajmusuku@users.noreply.github.com> Date: Mon, 12 Nov 2018 11:41:02 -0800 Subject: [PATCH] 3190: Code and Text cells from tool bar (#3191) * 3190: Code and Text cells from tool bar * 3190: Adding images under media folder and to css --- build/gulpfile.vscode.js | 1 + src/sql/parts/notebook/media/light/add.svg | 1 + .../notebook/media/light/add_code_cell.svg | 1 + .../notebook/media/light/add_text_cell.svg | 1 + .../notebook/media/light/cell_output.svg | 1 + .../parts/notebook/models/notebookModel.ts | 2 +- src/sql/parts/notebook/notebook.component.ts | 28 ++++++++++++++----- src/sql/parts/notebook/notebook.css | 13 +++++++++ src/sql/parts/notebook/notebookActions.ts | 14 ++++++---- 9 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 src/sql/parts/notebook/media/light/add.svg create mode 100644 src/sql/parts/notebook/media/light/add_code_cell.svg create mode 100644 src/sql/parts/notebook/media/light/add_text_cell.svg create mode 100644 src/sql/parts/notebook/media/light/cell_output.svg diff --git a/build/gulpfile.vscode.js b/build/gulpfile.vscode.js index 39199be6a7..151759ccee 100644 --- a/build/gulpfile.vscode.js +++ b/build/gulpfile.vscode.js @@ -129,6 +129,7 @@ const vscodeResources = [ 'out-build/sql/parts/jobManagement/common/media/*.svg', 'out-build/sql/media/objectTypes/*.svg', 'out-build/sql/media/icons/*.svg', + 'out-build/sql/parts/notebook/media/**/*.svg', '!**/test/**' ]; diff --git a/src/sql/parts/notebook/media/light/add.svg b/src/sql/parts/notebook/media/light/add.svg new file mode 100644 index 0000000000..da9af07dca --- /dev/null +++ b/src/sql/parts/notebook/media/light/add.svg @@ -0,0 +1 @@ +add_16x16 \ No newline at end of file diff --git a/src/sql/parts/notebook/media/light/add_code_cell.svg b/src/sql/parts/notebook/media/light/add_code_cell.svg new file mode 100644 index 0000000000..375721a2d1 --- /dev/null +++ b/src/sql/parts/notebook/media/light/add_code_cell.svg @@ -0,0 +1 @@ + code_cell \ No newline at end of file diff --git a/src/sql/parts/notebook/media/light/add_text_cell.svg b/src/sql/parts/notebook/media/light/add_text_cell.svg new file mode 100644 index 0000000000..f6c97e09f4 --- /dev/null +++ b/src/sql/parts/notebook/media/light/add_text_cell.svg @@ -0,0 +1 @@ +text_cell \ No newline at end of file diff --git a/src/sql/parts/notebook/media/light/cell_output.svg b/src/sql/parts/notebook/media/light/cell_output.svg new file mode 100644 index 0000000000..706b5a4f05 --- /dev/null +++ b/src/sql/parts/notebook/media/light/cell_output.svg @@ -0,0 +1 @@ +cell_output \ No newline at end of file diff --git a/src/sql/parts/notebook/models/notebookModel.ts b/src/sql/parts/notebook/models/notebookModel.ts index 18c035fac1..1ed36f6e58 100644 --- a/src/sql/parts/notebook/models/notebookModel.ts +++ b/src/sql/parts/notebook/models/notebookModel.ts @@ -203,7 +203,7 @@ export class NotebookModel extends Disposable implements INotebookModel { } } - addCell(cellType: CellType): void { + public addCell(cellType: CellType): void { if (this.inErrorState || !this._cells) { return; } diff --git a/src/sql/parts/notebook/notebook.component.ts b/src/sql/parts/notebook/notebook.component.ts index 33c2f74ecc..55357a4dc4 100644 --- a/src/sql/parts/notebook/notebook.component.ts +++ b/src/sql/parts/notebook/notebook.component.ts @@ -31,7 +31,7 @@ import { IConnectionProfile } from 'sql/parts/connection/common/interfaces'; import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { AddCellAction, KernelsDropdown, AttachToDropdown } from 'sql/parts/notebook/notebookActions'; +import { KernelsDropdown, AttachToDropdown, AddCellAction } from 'sql/parts/notebook/notebookActions'; import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler'; export const NOTEBOOK_SELECTOR: string = 'notebook-component'; @@ -80,7 +80,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit { } public get modelRegistered(): Promise { - return this._modelRegisteredDeferred.promise; + return this._modelRegisteredDeferred.promise; } protected get cells(): ReadonlyArray { @@ -103,11 +103,17 @@ export class NotebookComponent extends AngularDisposable implements OnInit { } } + //Add cell based on cell type + public addCell(cellType: CellType) + { + this._model.addCell(cellType); + } + public onKeyDown(event) { switch (event.key) { case 'ArrowDown': case 'ArrowRight': - let nextIndex = (this.findCellIndex(this._activeCell) + 1)%this.cells.length; + let nextIndex = (this.findCellIndex(this._activeCell) + 1) % this.cells.length; this.selectCell(this.cells[nextIndex]); break; case 'ArrowUp': @@ -176,7 +182,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit { } findCellIndex(cellModel: ICellModel): number { - return this._model.cells.findIndex((cell) => cell.id === cellModel.id); + return this._model.cells.findIndex((cell) => cell.id === cellModel.id); } private setViewInErrorState(error: any): any { @@ -188,7 +194,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit { protected initActionBar() { let kernelInfoText = document.createElement('div'); - kernelInfoText.className ='notebook-info-label'; + kernelInfoText.className = 'notebook-info-label'; kernelInfoText.innerText = 'Kernel: '; let kernelsDropdown = new KernelsDropdown(this.contextViewService, this.modelRegistered); @@ -204,9 +210,15 @@ export class NotebookComponent extends AngularDisposable implements OnInit { attachSelectBoxStyler(attachToDropdown, this.themeService); let attachToInfoText = document.createElement('div'); - attachToInfoText.className ='notebook-info-label'; + attachToInfoText.className = 'notebook-info-label'; attachToInfoText.innerText = 'Attach To: '; + let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('code', 'Code'), 'notebook-info-button'); + addCodeCellButton.cellType = CellTypes.Code; + + let addTextCellButton = new AddCellAction('notebook.AddTextCell',localize('text', 'Text'), 'notebook-info-button'); + addTextCellButton.cellType = CellTypes.Markdown; + let taskbar = this.toolbar.nativeElement; this._actionBar = new Taskbar(taskbar, this.contextMenuService); this._actionBar.context = this; @@ -214,7 +226,9 @@ export class NotebookComponent extends AngularDisposable implements OnInit { { element: kernelInfoText }, { element: kernelsDropdownTemplateContainer }, { element: attachToInfoText }, - { element: attachToDropdownTemplateContainer } + { element: attachToDropdownTemplateContainer }, + { action: addCodeCellButton}, + { action: addTextCellButton} ]); } diff --git a/src/sql/parts/notebook/notebook.css b/src/sql/parts/notebook/notebook.css index 7e63bd1b1a..c57d838ede 100644 --- a/src/sql/parts/notebook/notebook.css +++ b/src/sql/parts/notebook/notebook.css @@ -23,4 +23,17 @@ text-align: center; display: flex; align-items: center; +} + +.notebookEditor .notebook-info-button { + display: inline-block; + width: 100%; + padding: 4px; + text-align: center; + cursor: pointer; + padding-left: 15px; + background-size: 11px; + margin-right: 0.3em; + font-size: 13px; + background-image: url("./media/light/add.svg") } \ No newline at end of file diff --git a/src/sql/parts/notebook/notebookActions.ts b/src/sql/parts/notebook/notebookActions.ts index 65b1535894..ec6dd103ef 100644 --- a/src/sql/parts/notebook/notebookActions.ts +++ b/src/sql/parts/notebook/notebookActions.ts @@ -12,20 +12,24 @@ import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { INotebookModel } from 'sql/parts/notebook/models/modelInterfaces'; +import { CellTypes, CellType } from 'sql/parts/notebook/models/contracts'; +import { NotebookComponent } from 'sql/parts/notebook/notebook.component'; const msgLoading = localize('loading', 'Loading kernels...'); + +//Action to add a cell to notebook based on cell type(code/markdown). export class AddCellAction extends Action { - public static ID = 'notebook.addCell'; - public static LABEL = 'Cell'; + public cellType: CellType; constructor( + id: string, label: string, cssClass: string ) { - super(AddCellAction.ID, AddCellAction.LABEL, 'newStepIcon'); + super(id, label, cssClass); } - - public run(context: any): TPromise { + public run(context: NotebookComponent): TPromise { return new TPromise((resolve, reject) => { try { + context.addCell(this.cellType); resolve(true); } catch (e) { reject(e);