3240: Empty cells show thick border (#3242)

* 3240: Empty cells show thick border

* 3240: Refactoring code and markdown css selection +output UI improvement

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

@@ -8,7 +8,7 @@
 	<div class="notebook-code" style="flex: 0 0 auto;">
 		<code-component [cellModel]="cellModel" [model]="model" [activeCellId]="activeCellId"></code-component>
 	</div>
-	<div #codeCellOutput class="notebook-output" style="flex: 0 0 auto;">
+	<div style="flex: 0 0 auto; width: 100%; height: 100%; display: block">
 		<output-area-component *ngIf="cellModel.outputs && cellModel.outputs.length > 0" [cellModel]="cellModel">
 		</output-area-component>
 	</div>

src/sql/parts/notebook/cellViews/codeCell.component.ts

@@ -2,15 +2,10 @@
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-import 'vs/css!./codeCell';
 
 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';
-
-import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import * as themeColors from 'vs/workbench/common/theme';
 import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
 import { NotebookModel } from 'sql/parts/notebook/models/notebookModel';
 
@@ -21,9 +16,9 @@ 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, OnChanges {
 	@ViewChild('codeCellOutput', { read: ElementRef }) private outputPreview: ElementRef;
-
 	@Input() cellModel: ICellModel;
 	@Input() set model(value: NotebookModel) {
 		this._model = value;
@@ -37,14 +32,11 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges {
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
 		super();
 	}
 
 	ngOnInit() {
-		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
-		this.updateTheme(this.themeService.getColorTheme());
 		if (this.cellModel) {
 			this.cellModel.onOutputsChanged(() => {
 				this._changeRef.detectChanges();

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

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
-	<div style="flex: 0 0 auto;">
+	<div #outputarea class="notebook-output" style="flex: 0 0 auto;">
 		<output-component *ngFor="let output of cellModel.outputs" [cellOutput]="output" [trustedMode] = "cellModel.trustedMode" >
 		</output-component>
 	</div>

src/sql/parts/notebook/cellViews/outputArea.component.ts

@@ -3,9 +3,12 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./code';
-import { OnInit, Component, Input, Inject, forwardRef, ChangeDetectorRef } from '@angular/core';
+import 'vs/css!./outputArea';
+import { OnInit, Component, Input, Inject, ElementRef, ViewChild, forwardRef, ChangeDetectorRef } from '@angular/core';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
 import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
+import * as themeColors from 'vs/workbench/common/theme';
+import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
 
 export const OUTPUT_AREA_SELECTOR: string = 'output-area-component';
 
@@ -14,20 +17,30 @@ export const OUTPUT_AREA_SELECTOR: string = 'output-area-component';
 	templateUrl: decodeURI(require.toUrl('./outputArea.component.html'))
 })
 export class OutputAreaComponent extends AngularDisposable implements OnInit {
+	@ViewChild('outputarea', { read: ElementRef }) private outputArea: ElementRef;
 	@Input() cellModel: ICellModel;
 
 	private readonly _minimumHeight = 30;
 
 	constructor(
-		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
 	) {
 		super();
 	}
-	ngOnInit(): void {
+
+	ngOnInit() {
+		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this.themeService.getColorTheme());
 		if (this.cellModel) {
 			this.cellModel.onOutputsChanged(() => {
 				this._changeRef.detectChanges();
 			});
 		}
 	}
+
+	private updateTheme(theme: IColorTheme): void {
+		let outputElement = <HTMLElement>this.outputArea.nativeElement;
+		outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+	}
 }

src/sql/parts/notebook/cellViews/outputArea.css

@@ -2,13 +2,14 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-
+output-area-component {
-code-cell-component {
 	display: block;
 }
 
-code-cell-component .notebook-output {
+output-area-component .notebook-output {
 	border-top-width: 1px;
 	border-top-style: solid;
 	user-select: initial;
+	padding: 5px 20px 0px;
+	box-shadow: rgba(120, 120, 120, 0.75) 0px -2px 1px -2px;
 }

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

@@ -8,6 +8,6 @@
 	<div class="notebook-text" style="flex: 0 0 auto;">
 		<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [activeCellId]="activeCellId"></code-component>
 	</div>
-	<div #preview class="notebook-preview" style="flex: 0 0 auto;" (dblclick)="toggleEditMode()">
+	<div #preview style="flex: 0 0 auto;" (dblclick)="toggleEditMode()">
 	</div>
-</div>
+</div>

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

@@ -31,6 +31,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	private _content: string;
 	private isEditMode: boolean;
 	private _sanitizer: ISanitizer;
+	private _previewCssApplied: boolean = false;
 	private _activeCellId: string;
 
 	constructor(
@@ -113,12 +114,29 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	}
 
 	public handleContentChanged(): void {
+		if (!this._previewCssApplied) {
+			this.updatePreviewCssClass();
+		}
 		this.updatePreview();
 	}
 
 	public toggleEditMode(): void {
 		this.isEditMode = !this.isEditMode;
+		this.updatePreviewCssClass();
 		this.updatePreview();
 		this._changeRef.detectChanges();
 	}
+
+	// Updates the css class to preview 'div' based on edit mode
+	private updatePreviewCssClass() {
+		let outputElement = <HTMLElement>this.output.nativeElement;
+		if (this.isEditMode && this.cellModel.source) {
+			outputElement.className = 'notebook-preview';
+			this._previewCssApplied = true;
+		}
+		else {
+			outputElement.className = '';
+			this._previewCssApplied = false;
+		}
+	}
 }