ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-31 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

3190: Code and Text cells from tool bar (#3191)

Browse Source 
* 3190: Code and Text cells from tool bar

* 3190: Adding images under media folder and to css
This commit is contained in:
Raj
2018-11-12 11:41:02 -08:00
committed by GitHub
parent a2bbf3f44e
commit 0a486a280d
9 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/parts/notebook/media/light/add.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><title>add_16x16</title><path d="M6,1a5.17,5.17,0,0,1,1.4.19,5.26,5.26,0,0,1,3.67,3.67,5.3,5.3,0,0,1,0,2.79A5.26,5.26,0,0,1,7.4,11.32a5.3,5.3,0,0,1-2.79,0A5.26,5.26,0,0,1,.94,7.65a5.3,5.3,0,0,1,0-2.79A5.26,5.26,0,0,1,4.6,1.19,5.17,5.17,0,0,1,6,1Zm0,9.75a4.4,4.4,0,0,0,1.2-.16,4.56,4.56,0,0,0,1.08-.45A4.5,4.5,0,0,0,9.88,8.53a4.56,4.56,0,0,0,.45-1.08,4.51,4.51,0,0,0,0-2.39A4.56,4.56,0,0,0,9.88,4,4.5,4.5,0,0,0,8.27,2.37a4.56,4.56,0,0,0-1.08-.45,4.51,4.51,0,0,0-2.39,0,4.56,4.56,0,0,0-1.08.45A4.5,4.5,0,0,0,2.11,4a4.56,4.56,0,0,0-.45,1.08,4.51,4.51,0,0,0,0,2.39,4.56,4.56,0,0,0,.45,1.08,4.5,4.5,0,0,0,1.61,1.61,4.56,4.56,0,0,0,1.08.45A4.4,4.4,0,0,0,6,10.76Zm.38-4.88H8.25v.75H6.37V8.51H5.62V6.63H3.75V5.88H5.62V4h.75Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

1
src/sql/parts/notebook/media/light/add_code_cell.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title> code_cell</title><path d="M3.65,4.65l.7.7L1.71,8l2.64,2.65-.7.7L.29,8ZM9.48,2h1l-4,12h-1Zm2.87,9.35-.7-.7L14.29,8,11.65,5.35l.7-.7L15.71,8Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

1
src/sql/parts/notebook/media/light/add_text_cell.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>text_cell</title><path d="M5.53,8.62H2L1.25,11H0L3.16,1.52H4.4L6.88,8.93l-.75,1.5Zm-.4-1.18-1.35-4-1.35,4Zm9.08,6.28.29.67a2,2,0,0,0,.32.5,1.16,1.16,0,0,0,.46.31,2.06,2.06,0,0,0,.72.11v.41H11.85v-.41h.35a1.31,1.31,0,0,0,.36,0,.58.58,0,0,0,.28-.15.47.47,0,0,0,.11-.34,1.51,1.51,0,0,0-.06-.36c0-.15-.09-.32-.15-.5s-.12-.36-.19-.55l-.2-.53-.17-.43-.1-.24H7.92l-.11.25-.19.43-.22.52q-.12.28-.21.54c-.06.18-.12.34-.16.49a1.53,1.53,0,0,0-.06.37.42.42,0,0,0,.12.33.64.64,0,0,0,.28.15,1.66,1.66,0,0,0,.36,0h.34v.41H4.58v-.41a3.25,3.25,0,0,0,.7-.19,1.1,1.1,0,0,0,.41-.3A1.86,1.86,0,0,0,6,14.34l.31-.73L9.89,5.07h.76ZM11.52,11,9.88,7.46,8.32,11Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

1
src/sql/parts/notebook/media/light/cell_output.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>cell_output</title><path d="M10.91,9.46v4H0V2.52H10.91v4h-1v-3H1v8.93H9.92v-3Zm3-2L11.8,5.35l.7-.7L15.83,8,12.5,11.3l-.7-.7,2.13-2.13H5v-1Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 248 B

2
src/sql/parts/notebook/models/notebookModel.ts
View File

@@ -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;
}

28
src/sql/parts/notebook/notebook.component.ts
View File

@@ -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<NotebookModel> {
return this._modelRegisteredDeferred.promise;
return this._modelRegisteredDeferred.promise;
}
protected get cells(): ReadonlyArray<ICellModel> {
@@ -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 = <HTMLElement>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}
]);
}

13
src/sql/parts/notebook/notebook.css
View File

@@ -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")
}

14
src/sql/parts/notebook/notebookActions.ts
View File

@@ -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<boolean> {
public run(context: NotebookComponent): TPromise<boolean> {
return new TPromise<boolean>((resolve, reject) => {
try {
context.addCell(this.cellType);
resolve(true);
} catch (e) {
reject(e);