diff --git a/samples/sqlservices/package.json b/samples/sqlservices/package.json index 32be536b87..cbff34d018 100644 --- a/samples/sqlservices/package.json +++ b/samples/sqlservices/package.json @@ -22,8 +22,12 @@ "title": "sqlservices.openDialog" }, { - "command": "sqlservices.openEditor", - "title": "sqlservices.openEditor" + "command": "sqlservices.openEditor1", + "title": "sqlservices.openEditor1" + }, + { + "command": "sqlservices.openEditor2", + "title": "sqlservices.openEditor2" } ], "dashboard.tabs": [ diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index e2dc1ab0f5..b6d7db7e5d 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -35,6 +35,7 @@ export default class MainController implements vscode.Disposable { } public activate(): Promise { + const webviewExampleHtml = fs.readFileSync(path.join(__dirname, 'webviewExample.html')).toString(); const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString(); const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString(); this.registerSqlServicesModelView(); @@ -48,8 +49,12 @@ export default class MainController implements vscode.Disposable { this.openDialog(); }); - vscode.commands.registerCommand('sqlservices.openEditor', () => { - this.openEditor(buttonHtml, counterHtml); + vscode.commands.registerCommand('sqlservices.openEditor1', () => { + this.openEditor1(buttonHtml, counterHtml); + }); + + vscode.commands.registerCommand('sqlservices.openEditor2', () => { + this.openEditor2(webviewExampleHtml); }); return Promise.resolve(true); @@ -175,8 +180,8 @@ export default class MainController implements vscode.Disposable { sqlops.window.modelviewdialog.openDialog(dialog); } - private openEditor(html1: string, html2: string): void { - let editor = sqlops.workspace.createModelViewEditor('Test Editor view'); + private openEditor1(html1: string, html2: string): void { + let editor = sqlops.workspace.createModelViewEditor('Editor view1'); editor.registerContent(async view => { let count = 0; let webview1 = view.modelBuilder.webView() @@ -197,7 +202,8 @@ export default class MainController implements vscode.Disposable { let flexModel = view.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column', - alignItems: 'left' + alignItems: 'flex-start', + height: 500 }).withItems([ webview1, webview2 ], { flex: '1 1 50%' }) @@ -207,6 +213,29 @@ export default class MainController implements vscode.Disposable { editor.openEditor(); } + private openEditor2(html: string): void { + let editor = sqlops.workspace.createModelViewEditor('Editor view2'); + editor.registerContent(async view => { + let webview1 = view.modelBuilder.webView() + .withProperties({ + html: html + }) + .component(); + + let flexModel = view.modelBuilder.flexContainer() + .withLayout({ + flexFlow: 'column', + alignItems: 'stretch', + height: '100%' + }).withItems([ + webview1 + ], { flex: '1' }) + .component(); + await view.initializeModel(flexModel); + }); + editor.openEditor(); + } + private registerSqlServicesModelView(): void { sqlops.ui.registerModelViewProvider('sqlservices', async (view) => { let flexModel = view.modelBuilder.flexContainer() diff --git a/samples/sqlservices/src/controllers/webviewExample.html b/samples/sqlservices/src/controllers/webviewExample.html new file mode 100644 index 0000000000..c57c83cbf9 --- /dev/null +++ b/samples/sqlservices/src/controllers/webviewExample.html @@ -0,0 +1,25 @@ + + +
+ +
+ + Hello :) + + diff --git a/src/sql/parts/modelComponents/flexContainer.component.ts b/src/sql/parts/modelComponents/flexContainer.component.ts index b51893a8bd..4d83e91136 100644 --- a/src/sql/parts/modelComponents/flexContainer.component.ts +++ b/src/sql/parts/modelComponents/flexContainer.component.ts @@ -15,6 +15,8 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar import { ContainerBase } from 'sql/parts/modelComponents/componentBase'; import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component'; +import types = require('vs/base/common/types'); + class FlexItem { constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {} } @@ -68,10 +70,16 @@ export default class FlexContainer extends ContainerBase impleme public setLayout (layout: FlexLayout): void { this._flexFlow = layout.flexFlow ? layout.flexFlow : ''; - this._justifyContent= layout.justifyContent ? layout.justifyContent : ''; - this._alignItems= layout.alignItems ? layout.alignItems : ''; - this._alignContent= layout.alignContent ? layout.alignContent : ''; - this._height= layout.height ? layout.height + 'px' : ''; + this._justifyContent = layout.justifyContent ? layout.justifyContent : ''; + this._alignItems = layout.alignItems ? layout.alignItems : ''; + this._alignContent = layout.alignContent ? layout.alignContent : ''; + if (types.isUndefinedOrNull(layout.height)) { + this._height = ''; + } else if (types.isNumber(layout.height)) { + this._height = layout.height + 'px'; + } else { + this._height = layout.height; + } this.layout(); } diff --git a/src/sql/parts/modelComponents/flexContainer.css b/src/sql/parts/modelComponents/flexContainer.css index 3b225299af..3a74541fee 100644 --- a/src/sql/parts/modelComponents/flexContainer.css +++ b/src/sql/parts/modelComponents/flexContainer.css @@ -1,5 +1,4 @@ .flexContainer { display: flex; - padding: 5px; } \ No newline at end of file diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css new file mode 100644 index 0000000000..bf012515dc --- /dev/null +++ b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css @@ -0,0 +1,9 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.model-view-container { + height: 100%; + width : 100%; +} diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts index 7802484451..df03c2ed4f 100644 --- a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts +++ b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts @@ -2,6 +2,8 @@ * 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!./modelViewEditor'; + import { Builder, $ } from 'vs/base/browser/builder'; import { TPromise } from 'vs/base/common/winjs.base'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; diff --git a/src/sql/parts/modelComponents/modelViewContent.component.ts b/src/sql/parts/modelComponents/modelViewContent.component.ts index 3bbeea15a6..a1e85f57f5 100644 --- a/src/sql/parts/modelComponents/modelViewContent.component.ts +++ b/src/sql/parts/modelComponents/modelViewContent.component.ts @@ -24,7 +24,7 @@ import { ViewBase } from 'sql/parts/modelComponents/viewBase'; @Component({ selector: 'modelview-content', template: ` -
+
diff --git a/src/sql/platform/dialog/dialogContainer.component.ts b/src/sql/platform/dialog/dialogContainer.component.ts index bfa9d54dc3..85e30637af 100644 --- a/src/sql/platform/dialog/dialogContainer.component.ts +++ b/src/sql/platform/dialog/dialogContainer.component.ts @@ -34,18 +34,21 @@ export class DialogContainer implements AfterContentInit { public modelViewId: string; @ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent; constructor( - @Inject(forwardRef(() => ElementRef)) el: ElementRef, + @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, @Inject(BOOTSTRAP_SERVICE_ID) bootstrapService: IBootstrapService) { - this._params = bootstrapService.getBootstrapParams(el.nativeElement.tagName) as DialogComponentParams; + this._params = bootstrapService.getBootstrapParams(_el.nativeElement.tagName) as DialogComponentParams; this.modelViewId = this._params.modelViewId; } ngAfterContentInit(): void { this._modelViewContent.onEvent(event => { - if (event.eventType === ComponentEventType.validityChanged) { - this._params.validityChangedCallback(event.args); - } - }); + if (event.eventType === ComponentEventType.validityChanged) { + this._params.validityChangedCallback(event.args); + } + }); + let element = this._el.nativeElement; + element.style.height = '100%'; + element.style.width = '100%'; } public layout(): void { diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 38438108a2..3a8645342f 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -167,7 +167,7 @@ declare module 'sqlops' { */ alignContent?: string; - height? : number; + height? : number | string; } export interface FlexItemLayout {