ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix view model editor layout (#1473)

Browse Source 
* flex container should be as big as the parent container

* add example
This commit is contained in:
Abbie Petchtes
2018-05-23 11:20:28 -07:00
committed by GitHub
parent 04ec9caad1
commit cd0f9b71c5
10 changed files with 99 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
samples/sqlservices/package.json
View File

@@ -22,8 +22,12 @@
"title": "sqlservices.openDialog" "title": "sqlservices.openDialog"
}, },
{ {
"command": "sqlservices.openEditor", "command": "sqlservices.openEditor1",
"title": "sqlservices.openEditor" "title": "sqlservices.openEditor1"
},
{
"command": "sqlservices.openEditor2",
"title": "sqlservices.openEditor2"
} }
], ],
"dashboard.tabs": [ "dashboard.tabs": [

39
samples/sqlservices/src/controllers/mainController.ts
View File

@@ -35,6 +35,7 @@ export default class MainController implements vscode.Disposable {
} }
public activate(): Promise<boolean> { public activate(): Promise<boolean> {
const webviewExampleHtml = fs.readFileSync(path.join(__dirname, 'webviewExample.html')).toString();
const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString(); const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString();
const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString(); const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString();
this.registerSqlServicesModelView(); this.registerSqlServicesModelView();
@@ -48,8 +49,12 @@ export default class MainController implements vscode.Disposable {
this.openDialog(); this.openDialog();
}); });
vscode.commands.registerCommand('sqlservices.openEditor', () => { vscode.commands.registerCommand('sqlservices.openEditor1', () => {
this.openEditor(buttonHtml, counterHtml); this.openEditor1(buttonHtml, counterHtml);
});
vscode.commands.registerCommand('sqlservices.openEditor2', () => {
this.openEditor2(webviewExampleHtml);
}); });
return Promise.resolve(true); return Promise.resolve(true);
@@ -175,8 +180,8 @@ export default class MainController implements vscode.Disposable {
sqlops.window.modelviewdialog.openDialog(dialog); sqlops.window.modelviewdialog.openDialog(dialog);
} }
private openEditor(html1: string, html2: string): void { private openEditor1(html1: string, html2: string): void {
let editor = sqlops.workspace.createModelViewEditor('Test Editor view'); let editor = sqlops.workspace.createModelViewEditor('Editor view1');
editor.registerContent(async view => { editor.registerContent(async view => {
let count = 0; let count = 0;
let webview1 = view.modelBuilder.webView() let webview1 = view.modelBuilder.webView()
@@ -197,7 +202,8 @@ export default class MainController implements vscode.Disposable {
let flexModel = view.modelBuilder.flexContainer() let flexModel = view.modelBuilder.flexContainer()
.withLayout({ .withLayout({
flexFlow: 'column', flexFlow: 'column',
alignItems: 'left' alignItems: 'flex-start',
height: 500
}).withItems([ }).withItems([
webview1, webview2 webview1, webview2
], { flex: '1 1 50%' }) ], { flex: '1 1 50%' })
@@ -207,6 +213,29 @@ export default class MainController implements vscode.Disposable {
editor.openEditor(); 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 { private registerSqlServicesModelView(): void {
sqlops.ui.registerModelViewProvider('sqlservices', async (view) => { sqlops.ui.registerModelViewProvider('sqlservices', async (view) => {
let flexModel = view.modelBuilder.flexContainer() let flexModel = view.modelBuilder.flexContainer()

25
samples/sqlservices/src/controllers/webviewExample.html Normal file
View File

@@ -0,0 +1,25 @@
<!--
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<html>
<header>
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: skyblue;
}
</style>
</header>
<body>
Hello :)
</body>
</html>

16
src/sql/parts/modelComponents/flexContainer.component.ts
View File

@@ -15,6 +15,8 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
import { ContainerBase } from 'sql/parts/modelComponents/componentBase'; import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component'; import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
import types = require('vs/base/common/types');
class FlexItem { class FlexItem {
constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {} constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {}
} }
@@ -68,10 +70,16 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
public setLayout (layout: FlexLayout): void { public setLayout (layout: FlexLayout): void {
this._flexFlow = layout.flexFlow ? layout.flexFlow : ''; this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
this._justifyContent= layout.justifyContent ? layout.justifyContent : ''; this._justifyContent = layout.justifyContent ? layout.justifyContent : '';
this._alignItems= layout.alignItems ? layout.alignItems : ''; this._alignItems = layout.alignItems ? layout.alignItems : '';
this._alignContent= layout.alignContent ? layout.alignContent : ''; this._alignContent = layout.alignContent ? layout.alignContent : '';
this._height= layout.height ? layout.height + 'px' : ''; 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(); this.layout();
} }

1
src/sql/parts/modelComponents/flexContainer.css
View File

@@ -1,5 +1,4 @@
.flexContainer { .flexContainer {
display: flex; display: flex;
padding: 5px;
} }

9
src/sql/parts/modelComponents/modelEditor/modelViewEditor.css Normal file
View File

@@ -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%;
}

2
src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts
View File

@@ -2,6 +2,8 @@
* Copyright (c) Microsoft Corporation. All rights reserved. * Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information. * 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 { Builder, $ } from 'vs/base/browser/builder';
import { TPromise } from 'vs/base/common/winjs.base'; import { TPromise } from 'vs/base/common/winjs.base';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';

2
src/sql/parts/modelComponents/modelViewContent.component.ts
View File

@@ -24,7 +24,7 @@ import { ViewBase } from 'sql/parts/modelComponents/viewBase';
@Component({ @Component({
selector: 'modelview-content', selector: 'modelview-content',
template: ` template: `
<div *ngIf="rootDescriptor"> <div *ngIf="rootDescriptor" style="width: 100%; height: 100%;">
<model-component-wrapper [descriptor]="rootDescriptor" [modelStore]="modelStore"> <model-component-wrapper [descriptor]="rootDescriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>
</div> </div>

15
src/sql/platform/dialog/dialogContainer.component.ts
View File

@@ -34,18 +34,21 @@ export class DialogContainer implements AfterContentInit {
public modelViewId: string; public modelViewId: string;
@ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent; @ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent;
constructor( constructor(
@Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
@Inject(BOOTSTRAP_SERVICE_ID) bootstrapService: IBootstrapService) { @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; this.modelViewId = this._params.modelViewId;
} }
ngAfterContentInit(): void { ngAfterContentInit(): void {
this._modelViewContent.onEvent(event => { this._modelViewContent.onEvent(event => {
if (event.eventType === ComponentEventType.validityChanged) { if (event.eventType === ComponentEventType.validityChanged) {
this._params.validityChangedCallback(event.args); this._params.validityChangedCallback(event.args);
} }
}); });
let element = <HTMLElement>this._el.nativeElement;
element.style.height = '100%';
element.style.width = '100%';
} }
public layout(): void { public layout(): void {

2
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -167,7 +167,7 @@ declare module 'sqlops' {
*/ */
alignContent?: string; alignContent?: string;
height? : number; height? : number | string;
} }
export interface FlexItemLayout { export interface FlexItemLayout {