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';