diff --git a/src/sql/parts/modelComponents/editor.component.ts b/src/sql/parts/modelComponents/editor.component.ts index 74c8c4650b..8061bbfa5e 100644 --- a/src/sql/parts/modelComponents/editor.component.ts +++ b/src/sql/parts/modelComponents/editor.component.ts @@ -33,7 +33,7 @@ export default class EditorComponent extends ComponentBase implements IComponent private _editorInput: UntitledEditorInput; private _editorModel: ITextModel; private _renderedContent: string; - private _langaugeMode: string; + private _languageMode: string; constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, @@ -76,10 +76,13 @@ export default class EditorComponent extends ComponentBase implements IComponent public layout(): void { let width: number = this.convertSizeToNumber(this.width); + let height: number = this.convertSizeToNumber(this.height); this._editor.layout(new DOM.Dimension( width && width > 0 ? width : DOM.getContentWidth(this._el.nativeElement), height && height > 0 ? height : DOM.getContentHeight(this._el.nativeElement))); + let element = this._el.nativeElement; + element.style.position = this.position; } /// Editor Functions @@ -92,8 +95,8 @@ export default class EditorComponent extends ComponentBase implements IComponent private updateLanguageMode() { if (this._editorModel && this._editor) { - this._langaugeMode = this.languageMode; - this._modeService.getOrCreateMode(this._langaugeMode).then((modeValue) => { + this._languageMode = this.languageMode; + this._modeService.getOrCreateMode(this._languageMode).then((modeValue) => { this._modelService.setMode(this._editorModel, modeValue); }); } @@ -111,7 +114,7 @@ export default class EditorComponent extends ComponentBase implements IComponent if (this.content !== this._renderedContent) { this.updateModel(); } - if (this.languageMode !== this._langaugeMode) { + if (this.languageMode !== this._languageMode) { this.updateLanguageMode(); } } @@ -132,4 +135,12 @@ export default class EditorComponent extends ComponentBase implements IComponent public set languageMode(newValue: string) { this.setPropertyFromUI((properties, languageMode) => { properties.languageMode = languageMode; }, newValue); } + + public get position(): string { + return this.getPropertyOrDefault((props) => props.position, ''); + } + + public set position(newValue: string) { + this.setPropertyFromUI((properties, position) => { properties.languoffsetMarginageMode = position; }, newValue); + } } diff --git a/src/sql/parts/modelComponents/modelComponentWrapper.component.ts b/src/sql/parts/modelComponents/modelComponentWrapper.component.ts index f70c6df44a..1f470b050e 100644 --- a/src/sql/parts/modelComponents/modelComponentWrapper.component.ts +++ b/src/sql/parts/modelComponents/modelComponentWrapper.component.ts @@ -28,12 +28,13 @@ import { generateUuid } from 'vs/base/common/uuid'; import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService'; import { Event, Emitter } from 'vs/base/common/event'; import * as nls from 'vs/nls'; +import { LayoutRequestParams } from 'sql/platform/dialog/dialogContainer.component'; const componentRegistry = Registry.as(Extensions.ComponentContribution); export interface ModelComponentParams extends IBootstrapParams { - onLayoutRequested: Event; + onLayoutRequested: Event; modelViewId: string; } @@ -69,8 +70,8 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit { super(); if (_params && _params.onLayoutRequested) { this._modelViewId = _params.modelViewId; - _params.onLayoutRequested(modelViewId => { - if (modelViewId === this._modelViewId) { + _params.onLayoutRequested(layoutParams => { + if (layoutParams && (layoutParams.alwaysRefresh || layoutParams.modelViewId === this._modelViewId)) { this.layout(); } }); diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts index c1193e8bad..3d904246b9 100644 --- a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts +++ b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts @@ -79,7 +79,8 @@ export class ModelViewEditor extends BaseEditor { } private doUpdateContainer() { - const modelViewContainer = this.input && (this.input as ModelViewInput).container; + let modelViewInput = this.input as ModelViewInput; + const modelViewContainer = modelViewInput && modelViewInput.container; if (modelViewContainer) { const frameRect = this._editorFrame.getBoundingClientRect(); const containerRect = modelViewContainer.parentElement.getBoundingClientRect(); @@ -89,6 +90,9 @@ export class ModelViewEditor extends BaseEditor { modelViewContainer.style.left = `${frameRect.left - containerRect.left}px`; modelViewContainer.style.width = `${frameRect.width}px`; modelViewContainer.style.height = `${frameRect.height}px`; + if (modelViewInput.dialogPane) { + modelViewInput.dialogPane.layout(true); + } } } diff --git a/src/sql/platform/dialog/dialogContainer.component.ts b/src/sql/platform/dialog/dialogContainer.component.ts index c283e865db..daf2f543e3 100644 --- a/src/sql/platform/dialog/dialogContainer.component.ts +++ b/src/sql/platform/dialog/dialogContainer.component.ts @@ -13,10 +13,14 @@ import { DialogPane } from 'sql/platform/dialog/dialogPane'; import { ComponentEventType } from 'sql/parts/modelComponents/interfaces'; import { Event, Emitter } from 'vs/base/common/event'; +export interface LayoutRequestParams { + modelViewId?: string; + alwaysRefresh?: boolean; +} export interface DialogComponentParams extends IBootstrapParams { modelViewId: string; validityChangedCallback: (valid: boolean) => void; - onLayoutRequested: Event; + onLayoutRequested: Event; dialogPane: DialogPane; } @@ -50,8 +54,8 @@ export class DialogContainer implements AfterViewInit { @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, @Inject(IBootstrapParams) private _params: DialogComponentParams) { this.modelViewId = this._params.modelViewId; - this._params.onLayoutRequested(e => { - if (this.modelViewId === e) { + this._params.onLayoutRequested(layoutParams => { + if (layoutParams && (layoutParams.alwaysRefresh || layoutParams.modelViewId === this.modelViewId)) { this.layout(); } }); diff --git a/src/sql/platform/dialog/dialogPane.ts b/src/sql/platform/dialog/dialogPane.ts index e308e569f1..f6142ef2d3 100644 --- a/src/sql/platform/dialog/dialogPane.ts +++ b/src/sql/platform/dialog/dialogPane.ts @@ -14,7 +14,7 @@ import { DialogTab } from 'sql/platform/dialog/dialogTypes'; import { TabbedPanel, IPanelTab, IPanelView } from 'sql/base/browser/ui/panel/panel'; import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService'; import { DialogModule } from 'sql/platform/dialog/dialog.module'; -import { DialogComponentParams } from 'sql/platform/dialog/dialogContainer.component'; +import { DialogComponentParams, LayoutRequestParams } from 'sql/platform/dialog/dialogContainer.component'; import * as DOM from 'vs/base/browser/dom'; import { Builder } from 'vs/base/browser/builder'; @@ -32,7 +32,7 @@ export class DialogPane extends Disposable implements IThemable { private _body: HTMLElement; private _selectedTabIndex: number = 0; //TODO: can be an option - private _onTabChange = new Emitter(); + private _onLayoutChange = new Emitter(); private _selectedTabContent: string; public pageNumber?: number; @@ -65,7 +65,7 @@ export class DialogPane extends Disposable implements IThemable { this.initializeModelViewContainer(tabContainer, tab.content, tab); this._tabbedPanel.onTabChange(e => { tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px'; - this._onTabChange.fire(tab.content); + this._onLayoutChange.fire({ modelViewId: tab.content }); }); this._tabbedPanel.pushTab({ title: tab.title, @@ -92,10 +92,16 @@ export class DialogPane extends Disposable implements IThemable { return new DOM.Dimension(DOM.getContentWidth(this._body) - 5, DOM.getContentHeight(this._body) - 5); } - public layout(): void { + public layout(alwaysRefresh: boolean = false): void { + let layoutParams: LayoutRequestParams = { + alwaysRefresh: alwaysRefresh, + modelViewId: this._selectedTabContent + }; if (this._tabbedPanel) { this._tabbedPanel.layout(this.getTabDimension()); - this._onTabChange.fire(this._selectedTabContent); + this._onLayoutChange.fire(layoutParams); + } else if (alwaysRefresh) { + this._onLayoutChange.fire(layoutParams); } } @@ -115,7 +121,7 @@ export class DialogPane extends Disposable implements IThemable { tab.notifyValidityChanged(valid); } }, - onLayoutRequested: this._onTabChange.event, + onLayoutRequested: this._onLayoutChange.event, dialogPane: this } as DialogComponentParams, undefined, diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 9cccff12f4..9d0ba5feed 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -484,7 +484,14 @@ declare module 'sqlops' { /** * The languge mode for this text editor. The language mode is SQL by default. */ - languageMode?: string + languageMode?: string; + /** + * The position CSS property for the editor. Empty by default. + * If the editor is included inside a FlexContainer this must be + * set to 'absolute', with the parent FlexContainer having 'relative' position. + * Without this the editor will fail to correctly size itself + */ + position?: string; } export interface ButtonProperties extends ComponentProperties, ComponentWithIcon {