Fixed some issues for Markdown and CSS (#3336)

* Fixed few markdown cell issues
* Change the boolean value from 1 to true

src/sql/parts/notebook/cellViews/code.component.html

@@ -9,6 +9,6 @@
 	</div>
 	<div #editor class="editor" style="flex: 1 1 auto; overflow: hidden;">
 	</div>
-	<div #moreactions class="toolbar" style="flex: 0 0 auto; display: flex; flex-flow:column; width: 20px; min-height: 20px; max-height: 20px; padding-top: 10px; orientation: portrait">
+	<div #moreactions class="toolbar" style="flex: 0 0 auto; display: flex; flex-flow:column; width: 20px; min-height: 20px; max-height: 20px; padding-top: 0px; orientation: portrait">
 	</div>
 </div>

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<void>();
 
@@ -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 = <HTMLElement>this.moreActionsElementRef.nativeElement;
 		if (showIcon) {
-			let moreActionsElement = <HTMLElement>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 = <HTMLElement>this.toolbarElement.nativeElement;
 		toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 
-		let moreactionsEl = <HTMLElement>this.moreActionsElementRef.nativeElement;
+		let moreActionsEl = <HTMLElement>this.moreActionsElementRef.nativeElement;
-		moreactionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+		moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
 
 }

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 {

src/sql/parts/notebook/cellViews/textCell.component.html

@@ -6,8 +6,9 @@
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
 	<div class="notebook-text" style="flex: 0 0 auto;">
-		<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [activeCellId]="activeCellId"></code-component>
+		<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId" [hideVerticalToolbar]=true>
+		</code-component>
 	</div>
 	<div #preview style="flex: 0 0 auto;" (dblclick)="toggleEditMode()">
 	</div>
-</div>
+</div>

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) {
 				(<HTMLElement>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 {
+	public toggleEditMode(editMode?: boolean): void {
-		this.isEditMode = !this.isEditMode;
+		this.isEditMode = editMode !== undefined? editMode : !this.isEditMode;
 		this.updatePreviewCssClass();
 		this.updatePreview();
 		this._changeRef.detectChanges();

src/sql/parts/notebook/notebook.component.html

@@ -12,7 +12,7 @@
 		<div class="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell)" [class.active]="cell.active" (keydown)="onKeyDown($event)">
 			<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 			</code-cell-component>
-			<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [activeCellId]="activeCellId">
+			<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 			</text-cell-component>
 		</div>
 	</div>

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{