diff --git a/src/sql/parts/notebook/cellViews/code.component.html b/src/sql/parts/notebook/cellViews/code.component.html
index cff7e38d03..baa174ed5e 100644
--- a/src/sql/parts/notebook/cellViews/code.component.html
+++ b/src/sql/parts/notebook/cellViews/code.component.html
@@ -9,6 +9,6 @@
-
diff --git a/src/sql/parts/notebook/cellViews/code.component.ts b/src/sql/parts/notebook/cellViews/code.component.ts
index 20300df0fe..b9329038ba 100644
--- a/src/sql/parts/notebook/cellViews/code.component.ts
+++ b/src/sql/parts/notebook/cellViews/code.component.ts
@@ -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();
@@ -80,19 +81,21 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
@Inject(INotificationService) private notificationService: INotificationService,
) {
super();
- }
-
- 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'))
- );
+ );
+ }
+
+ ngOnInit() {
+ this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+ this.updateTheme(this.themeService.getColorTheme());
+ if (!this.hideVerticalToolbar) {
+ this.initActionBar();
+ }
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
@@ -172,13 +175,17 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
private toggleMoreActions(showIcon: boolean) {
let context = new CellContext(this.model, this.cellModel);
+ let moreActionsElement = this.moreActionsElementRef.nativeElement;
if (showIcon) {
- let moreActionsElement = this.moreActionsElementRef.nativeElement;
+ if (moreActionsElement.childNodes.length > 0) {
+ moreActionsElement.removeChild(moreActionsElement.childNodes[0]);
+ }
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();
+ }
+ else if (moreActionsElement.childNodes.length > 0) {
+ moreActionsElement.removeChild(moreActionsElement.childNodes[0]);
}
}
@@ -208,8 +215,8 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
let toolbarEl = this.toolbarElement.nativeElement;
toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
- let moreactionsEl = this.moreActionsElementRef.nativeElement;
- moreactionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+ let moreActionsEl = this.moreActionsElementRef.nativeElement;
+ moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
}
}
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/textCell.component.html b/src/sql/parts/notebook/cellViews/textCell.component.html
index d9b6c6ddc2..d9457a4f4a 100644
--- a/src/sql/parts/notebook/cellViews/textCell.component.html
+++ b/src/sql/parts/notebook/cellViews/textCell.component.html
@@ -6,8 +6,9 @@
-->
\ No newline at end of file
+
diff --git a/src/sql/parts/notebook/cellViews/textCell.component.ts b/src/sql/parts/notebook/cellViews/textCell.component.ts
index a1c79fc9a1..963b632ff9 100644
--- a/src/sql/parts/notebook/cellViews/textCell.component.ts
+++ b/src/sql/parts/notebook/cellViews/textCell.component.ts
@@ -15,6 +15,7 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
import { ISanitizer, defaultSanitizer } from 'sql/parts/notebook/outputs/sanitizer';
import { localize } from 'vs/nls';
+import { NotebookModel } from 'sql/parts/notebook/models/notebookModel';
export const TEXT_SELECTOR: string = 'text-cell-component';
@@ -25,13 +26,20 @@ export const TEXT_SELECTOR: string = 'text-cell-component';
export class TextCellComponent extends CellView implements OnInit, OnChanges {
@ViewChild('preview', { read: ElementRef }) private output: ElementRef;
@Input() cellModel: ICellModel;
+
+ @Input() set model(value: NotebookModel) {
+ this._model = value;
+ }
+
@Input() set activeCellId(value: string) {
this._activeCellId = value;
}
+
private _content: string;
private isEditMode: boolean;
private _sanitizer: ISanitizer;
private _previewCssApplied: boolean = false;
+ private _model: NotebookModel;
private _activeCellId: string;
constructor(
@@ -44,17 +52,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
this.isEditMode = false;
}
- 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
private get sanitizer(): ISanitizer {
if (this._sanitizer) {
@@ -63,17 +60,43 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
return this._sanitizer = defaultSanitizer;
}
+ get model(): NotebookModel {
+ return this._model;
+ }
+
get activeCellId(): string {
return this._activeCellId;
}
+ ngOnInit() {
+ this.updatePreview();
+ this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+ this.updateTheme(this.themeService.getColorTheme());
+ this.cellModel.onOutputsChanged(e => {
+ this.updatePreview();
+ });
+ }
+
+ ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+ for (let propName in changes) {
+ if (propName === 'activeCellId') {
+ let changedProp = changes[propName];
+ this._activeCellId = changedProp.currentValue;
+ if (this._activeCellId) {
+ this.toggleEditMode(false);
+ }
+ break;
+ }
+ }
+ }
+
/**
* 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'
* Sanitizes the data to be shown in markdown cell
*/
private updatePreview() {
- if (this._content !== this.cellModel.source) {
+ if (this._content !== this.cellModel.source || this.cellModel.source.length === 0) {
if (!this.cellModel.source && !this.isEditMode) {
(this.output.nativeElement).innerHTML = localize('doubleClickEdit', 'Double-click to edit');
} else {
@@ -94,15 +117,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
}
return content;
}
-
- ngOnInit() {
- this.updatePreview();
- this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
- this.updateTheme(this.themeService.getColorTheme());
- this.cellModel.onOutputsChanged(e => {
- this.updatePreview();
- });
- }
+
// Todo: implement layout
public layout() {
@@ -120,8 +135,8 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
this.updatePreview();
}
- public toggleEditMode(): void {
- this.isEditMode = !this.isEditMode;
+ public toggleEditMode(editMode?: boolean): void {
+ this.isEditMode = editMode !== undefined? editMode : !this.isEditMode;
this.updatePreviewCssClass();
this.updatePreview();
this._changeRef.detectChanges();
diff --git a/src/sql/parts/notebook/notebook.component.html b/src/sql/parts/notebook/notebook.component.html
index 5102b2d4ca..6f44e48122 100644
--- a/src/sql/parts/notebook/notebook.component.html
+++ b/src/sql/parts/notebook/notebook.component.html
@@ -12,7 +12,7 @@
-
+
diff --git a/src/sql/parts/notebook/notebook.css b/src/sql/parts/notebook/notebook.css
index b745c693f4..3bf2adce55 100644
--- a/src/sql/parts/notebook/notebook.css
+++ b/src/sql/parts/notebook/notebook.css
@@ -31,9 +31,9 @@
text-align: center;
cursor: pointer;
padding-left: 15px;
- background-size: 11px;
+ background-size: 13px;
margin-right: 0.3em;
- font-size: 11px;
+ font-size: 13px;
}
.notebookEditor .notebook-button.icon-add{