From 702dbddd78d08fd0a4aeac1080b670afa8f76665 Mon Sep 17 00:00:00 2001 From: Yurong He <43652751+YurongHe@users.noreply.github.com> Date: Thu, 29 Nov 2018 12:50:53 -0800 Subject: [PATCH] Fixed some issues for Markdown and CSS (#3336) * Fixed few markdown cell issues * Change the boolean value from 1 to true --- .../notebook/cellViews/code.component.html | 2 +- .../notebook/cellViews/code.component.ts | 31 ++++++---- src/sql/parts/notebook/cellViews/code.css | 1 - .../cellViews/textCell.component.html | 5 +- .../notebook/cellViews/textCell.component.ts | 61 ++++++++++++------- .../parts/notebook/notebook.component.html | 2 +- src/sql/parts/notebook/notebook.css | 4 +- 7 files changed, 64 insertions(+), 42 deletions(-) diff --git a/src/sql/parts/notebook/cellViews/code.component.html b/src/sql/parts/notebook/cellViews/code.component.html index cff7e38d03..baa174ed5e 100644 --- a/src/sql/parts/notebook/cellViews/code.component.html +++ b/src/sql/parts/notebook/cellViews/code.component.html @@ -9,6 +9,6 @@
-
+
diff --git a/src/sql/parts/notebook/cellViews/code.component.ts b/src/sql/parts/notebook/cellViews/code.component.ts index 20300df0fe..b9329038ba 100644 --- a/src/sql/parts/notebook/cellViews/code.component.ts +++ b/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(); @@ -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 = this.moreActionsElementRef.nativeElement; if (showIcon) { - let moreActionsElement = 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 = this.toolbarElement.nativeElement; toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); - let moreactionsEl = this.moreActionsElementRef.nativeElement; - moreactionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); + let moreActionsEl = this.moreActionsElementRef.nativeElement; + moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString(); } } diff --git a/src/sql/parts/notebook/cellViews/code.css b/src/sql/parts/notebook/cellViews/code.css index 99dc0b8292..0666d3176e 100644 --- a/src/sql/parts/notebook/cellViews/code.css +++ b/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 { diff --git a/src/sql/parts/notebook/cellViews/textCell.component.html b/src/sql/parts/notebook/cellViews/textCell.component.html index d9b6c6ddc2..d9457a4f4a 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.html +++ b/src/sql/parts/notebook/cellViews/textCell.component.html @@ -6,8 +6,9 @@ -->
- + +
-
\ 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 a1c79fc9a1..963b632ff9 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.ts +++ b/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) { (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 { - this.isEditMode = !this.isEditMode; + public toggleEditMode(editMode?: boolean): void { + this.isEditMode = editMode !== undefined? editMode : !this.isEditMode; this.updatePreviewCssClass(); this.updatePreview(); this._changeRef.detectChanges(); diff --git a/src/sql/parts/notebook/notebook.component.html b/src/sql/parts/notebook/notebook.component.html index 5102b2d4ca..6f44e48122 100644 --- a/src/sql/parts/notebook/notebook.component.html +++ b/src/sql/parts/notebook/notebook.component.html @@ -12,7 +12,7 @@
- +
diff --git a/src/sql/parts/notebook/notebook.css b/src/sql/parts/notebook/notebook.css index b745c693f4..3bf2adce55 100644 --- a/src/sql/parts/notebook/notebook.css +++ b/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{