Cell code fit and finish (#2972)

* add the look and feel for code cell

* formatting

* adding the active cell

* formatting

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

@@ -40,6 +40,7 @@ export class CodeComponent extends AngularDisposable implements OnInit {
 	@Input() content: string;
 	@Input() language: string;
 
+	private readonly _minimumHeight = 30;
 	private _editor: QueryTextEditor;
 	private _editorInput: UntitledEditorInput;
 	private _editorModel: ITextModel;
@@ -78,6 +79,7 @@ export class CodeComponent extends AngularDisposable implements OnInit {
 		this._editor = instantiationService.createInstance(QueryTextEditor);
 		this._editor.create(this.codeElement.nativeElement);
 		this._editor.setVisible(true);
+		this._editor.setMinimumHeight(this._minimumHeight);
 		let uri = this.createUri();
 		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.language, '', '');
 		this._editor.setInput(this._editorInput, undefined);
@@ -99,6 +101,7 @@ export class CodeComponent extends AngularDisposable implements OnInit {
 		this._editor.layout(new DOM.Dimension(
 			DOM.getContentWidth(this.codeElement.nativeElement),
 			DOM.getContentHeight(this.codeElement.nativeElement)));
+		this._editor.setHeightToScrollHeight();
 	}
 
 	private createUri(): URI {

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

@@ -8,7 +8,7 @@
 	<div class="notebook-code" style="flex: 0 0 auto;">
 		<code-component [id]="cellModel.id" [content]="cellModel.source" [language]="cellModel.language"></code-component>
 	</div>
-	<div class="notebook-output" style="flex: 0 0 auto;">
+	<div #output class="notebook-output" style="flex: 0 0 auto;">
 		Place Holder for output area
 	</div>
 </div>

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

@@ -20,6 +20,7 @@ export const CODE_SELECTOR: string = 'code-cell-component';
 	templateUrl: decodeURI(require.toUrl('./codeCell.component.html'))
 })
 export class CodeCellComponent extends CellView implements OnInit {
+	@ViewChild('output', { read: ElementRef }) private output: ElementRef;
 	@Input() cellModel: ICellModel;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
@@ -30,11 +31,17 @@ export class CodeCellComponent extends CellView implements OnInit {
 	}
 
 	ngOnInit() {
-
+		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this.themeService.getColorTheme());
 	}
 
 	// Todo: implement layout
 	public layout() {
 
 	}
+
+	private updateTheme(theme: IColorTheme): void {
+		let outputElement = <HTMLElement>this.output.nativeElement;
+		outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+	}
 }

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

@@ -4,7 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 
 code-cell-component {
-	height: 100%;
-	width: 100%;
 	display: block;
 }
+
+code-cell-component .notebook-output {
+	border-top-width: 1px;
+	border-top-style: solid;
+}

src/sql/parts/notebook/cellViews/interfaces.ts

@@ -20,6 +20,7 @@ export interface ICellModel {
 	language: string;
 	source: string;
 	cellType: CellType;
+	active: boolean;
 }
 
 export type CellType = 'code' | 'markdown' | 'raw';

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

@@ -11,7 +11,9 @@
 		</div>
 	</div>
 	<div style="flex: 1 1 auto; position: relative">
-		<code-cell-component *ngFor="let cell of cells" [cellModel]="cell">
+		<div class="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell)" [class.active]="cell.active" >
-		</code-cell-component>
+			<code-cell-component [cellModel]="cell">
+			</code-cell-component>
+		</div>
 	</div>
 </div>

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

@@ -3,9 +3,9 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./notebook';
+import './notebookStyles';
 
-import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
+import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, ViewChildren } from '@angular/core';
 
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
@@ -23,6 +23,7 @@ export const NOTEBOOK_SELECTOR: string = 'notebook-component';
 export class NotebookComponent extends AngularDisposable implements OnInit {
 	@ViewChild('toolbar', { read: ElementRef }) private toolbar: ElementRef;
 	protected cells: Array<ICellModel> = [];
+	private _activeCell: ICellModel;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
@@ -31,11 +32,11 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
 		super();
 
 		// Todo: This is mock data for cells. Will remove this code when we have a service
-		let cell1 : ICellModel = {
+		let cell1: ICellModel = {
-			id: '1', language: 'sql', source: 'select * from sys.tables', cellType: CellTypes.Code
+			id: '1', language: 'sql', source: 'select * from sys.tables', cellType: CellTypes.Code, active: false
 		};
-		let cell2 : ICellModel = {
+		let cell2: ICellModel = {
-			id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code
+			id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code, active: false
 		};
 		this.cells.push(cell1, cell2);
 	}
@@ -49,4 +50,15 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
 		let toolbarEl = <HTMLElement>this.toolbar.nativeElement;
 		toolbarEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
+
+	public selectCell(cell: ICellModel) {
+		if (cell !== this._activeCell) {
+			if (this._activeCell) {
+				this._activeCell.active = false;
+			}
+			this._activeCell = cell;
+			this._activeCell.active = true;
+			this._changeRef.detectChanges();
+		}
+	}
 }

src/sql/parts/notebook/notebook.css

@@ -6,3 +6,9 @@
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
 }
+
+.notebookEditor .notebook-cell {
+	margin: 10px 20px 10px;
+	border-width: 1px;
+	border-style: solid;
+}

src/sql/parts/notebook/notebookStyles.ts

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./notebook';
+
+import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
+import { activeContrastBorder, buttonBackground } from 'vs/platform/theme/common/colorRegistry';
+
+registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
+
+	// Active border
+	const activeBorder = theme.getColor(buttonBackground);
+	if (activeBorder) {
+		collector.addRule(`
+			.notebookEditor .notebook-cell.active {
+				border-color: ${activeBorder};
+				border-width: 2px;
+			}
+		`);
+	}
+
+	// Inactive border
+	const inactiveBorder = theme.getColor(SIDE_BAR_BACKGROUND);
+	if (inactiveBorder) {
+		collector.addRule(`
+			.notebookEditor .notebook-cell {
+				border-color: ${inactiveBorder};
+				border-width: 1px;
+			}
+		`);
+	}
+
+	// Styling with Outline color (e.g. high contrast theme)
+	const outline = theme.getColor(activeContrastBorder);
+	if (outline) {
+		collector.addRule(`
+			.notebookEditor .notebook-cell.active {
+				outline-color: ${outline};
+				outline-width: 1px;
+				outline-style: solid;
+			}
+
+			.notebookEditor .notebook-cell:hover:not(.active) {
+				outline-style: dashed;
+			}
+		`);
+	}
+});