From ac47fb84a84974f575822d14af61b8516b9529aa Mon Sep 17 00:00:00 2001 From: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com> Date: Wed, 17 Oct 2018 10:18:04 -0700 Subject: [PATCH] Fix Default Height for Editor Component (#2920) Editor component didn't have a minimum height set, so fixing this by passing through a minimum height to EditorComponent. Now, if the scrollable height of the editor is less than the minimum height, we use the minimum height as the height of the component. Also fixed an issue where the markdown code editor's height was far too high. Now we're calculating the height on the layout() call, which gets called every time we display the markdown editor. --- .../parts/modelComponents/editor.component.ts | 16 +++++++++++++++- src/sql/parts/modelComponents/queryTextEditor.ts | 8 +++++++- src/sql/sqlops.proposed.d.ts | 9 +++++++++ src/sql/workbench/api/node/extHostModelView.ts | 8 ++++++++ 4 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/sql/parts/modelComponents/editor.component.ts b/src/sql/parts/modelComponents/editor.component.ts index cf1dc2c852..d42a8a8929 100644 --- a/src/sql/parts/modelComponents/editor.component.ts +++ b/src/sql/parts/modelComponents/editor.component.ts @@ -39,6 +39,7 @@ export default class EditorComponent extends ComponentBase implements IComponent private _languageMode: string; private _uri: string; private _isAutoResizable: boolean; + private _minimumHeight: number; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @@ -79,6 +80,9 @@ export default class EditorComponent extends ComponentBase implements IComponent this._register(this._editorModel.onDidChangeContent(e => { this.content = this._editorModel.getValue(); if (this._isAutoResizable) { + if (this._minimumHeight) { + this._editor.setMinimumHeight(this._minimumHeight); + } this._editor.setHeightToScrollHeight(); } @@ -109,7 +113,8 @@ export default class EditorComponent extends ComponentBase implements IComponent let height: number = this.convertSizeToNumber(this.height); if (this._isAutoResizable) { - height = this._editor.scrollHeight; + this._editor.setHeightToScrollHeight(); + height = Math.max(this._editor.scrollHeight, this._minimumHeight ? this._minimumHeight : 0); } this._editor.layout(new DOM.Dimension( width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement), @@ -152,6 +157,7 @@ export default class EditorComponent extends ComponentBase implements IComponent // Intentionally always updating editorUri as it's wiped out by parent setProperties call. this.editorUri = this._uri; this._isAutoResizable = this.isAutoResizable; + this._minimumHeight = this.minimumHeight; } // CSS-bound properties @@ -179,6 +185,14 @@ export default class EditorComponent extends ComponentBase implements IComponent this.setPropertyFromUI((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue); } + public get minimumHeight(): number { + return this.getPropertyOrDefault((props) => props.minimumHeight, this._editor.minimumHeight); + } + + public set minimumHeight(newValue: number) { + this.setPropertyFromUI((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue); + } + public get editorUri(): string { return this.getPropertyOrDefault((props) => props.editorUri, ''); } diff --git a/src/sql/parts/modelComponents/queryTextEditor.ts b/src/sql/parts/modelComponents/queryTextEditor.ts index 15017de2cb..f18e2ed6b6 100644 --- a/src/sql/parts/modelComponents/queryTextEditor.ts +++ b/src/sql/parts/modelComponents/queryTextEditor.ts @@ -34,6 +34,7 @@ export class QueryTextEditor extends BaseTextEditor { public static ID = 'modelview.editors.textEditor'; private _dimension: DOM.Dimension; private _config: editorCommon.IConfiguration; + private _minHeight: number; constructor( @ITelemetryService telemetryService: ITelemetryService, @IInstantiationService instantiationService: IInstantiationService, @@ -116,6 +117,11 @@ export class QueryTextEditor extends BaseTextEditor { this._config = new Configuration(undefined, editorWidget.getDomNode()); } let editorHeightUsingLines = this._config.editor.lineHeight * editorWidget.getModel().getLineCount(); - this.setHeight(editorHeightUsingLines); + let editorHeightUsingMinHeight = Math.max(editorHeightUsingLines, this._minHeight); + this.setHeight(editorHeightUsingMinHeight); + } + + public setMinimumHeight(height: number) : void { + this._minHeight = height; } } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 3e830bd80d..0989c95ee9 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -595,6 +595,10 @@ declare module 'sqlops' { * The languge mode for this text editor. The language mode is SQL by default. */ languageMode?: string; + /** + * Minimum height for editor component + */ + minimumHeight?: number; } export interface ButtonProperties extends ComponentProperties, ComponentWithIcon { @@ -722,6 +726,11 @@ declare module 'sqlops' { */ isAutoResizable: boolean; + /** + * Minimum height for editor component + */ + minimumHeight: number; + } export interface ButtonComponent extends Component, ButtonProperties { diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index fd4bbfbee0..314110c367 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -913,6 +913,14 @@ class EditorWrapper extends ComponentWrapper implements sqlops.EditorComponent { this.setProperty('isAutoResizable', v); } + public get minimumHeight(): number { + return this.properties['minimumHeight']; + } + + public set minimumHeight(v: number) { + this.setProperty('minimumHeight', v); + } + public get onContentChanged(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onDidChange); return emitter && emitter.event;