+
diff --git a/src/sql/parts/notebook/cellViews/codeCell.component.ts b/src/sql/parts/notebook/cellViews/codeCell.component.ts
index 35a9db9797..c68e12bc06 100644
--- a/src/sql/parts/notebook/cellViews/codeCell.component.ts
+++ b/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();
diff --git a/src/sql/parts/notebook/cellViews/outputArea.component.html b/src/sql/parts/notebook/cellViews/outputArea.component.html
index dafe51fb8f..8669d54d75 100644
--- a/src/sql/parts/notebook/cellViews/outputArea.component.html
+++ b/src/sql/parts/notebook/cellViews/outputArea.component.html
@@ -5,7 +5,7 @@
*--------------------------------------------------------------------------------------------*/
-->
-
+
diff --git a/src/sql/parts/notebook/cellViews/outputArea.component.ts b/src/sql/parts/notebook/cellViews/outputArea.component.ts
index f0cdfb9e26..117cad2952 100644
--- a/src/sql/parts/notebook/cellViews/outputArea.component.ts
+++ b/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 =
this.outputArea.nativeElement;
+ outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+ }
}
diff --git a/src/sql/parts/notebook/cellViews/codeCell.css b/src/sql/parts/notebook/cellViews/outputArea.css
similarity index 75%
rename from src/sql/parts/notebook/cellViews/codeCell.css
rename to src/sql/parts/notebook/cellViews/outputArea.css
index ed8ad9bd4c..c3bae82b99 100644
--- a/src/sql/parts/notebook/cellViews/codeCell.css
+++ b/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.
*--------------------------------------------------------------------------------------------*/
-
-code-cell-component {
+output-area-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;
}
\ No newline at end of file
diff --git a/src/sql/parts/notebook/cellViews/textCell.component.html b/src/sql/parts/notebook/cellViews/textCell.component.html
index 399bec512e..d9b6c6ddc2 100644
--- a/src/sql/parts/notebook/cellViews/textCell.component.html
+++ b/src/sql/parts/notebook/cellViews/textCell.component.html
@@ -8,6 +8,6 @@
-
+
\ 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 f7ef93fb16..a1c79fc9a1 100644
--- a/src/sql/parts/notebook/cellViews/textCell.component.ts
+++ b/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 =
this.output.nativeElement;
+ if (this.isEditMode && this.cellModel.source) {
+ outputElement.className = 'notebook-preview';
+ this._previewCssApplied = true;
+ }
+ else {
+ outputElement.className = '';
+ this._previewCssApplied = false;
+ }
+ }
}