ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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"
},
{
"command": "sqlservices.openEditor",
"title": "sqlservices.openEditor"
"command": "sqlservices.openEditor1",
"title": "sqlservices.openEditor1"
},
{
"command": "sqlservices.openEditor2",
"title": "sqlservices.openEditor2"
}
],
"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> {
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()

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 { 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<FlexItemLayout> 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();
}

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

@@ -1,5 +1,4 @@
.flexContainer {
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.
* 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';

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

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

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

@@ -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 = <HTMLElement>this._el.nativeElement;
element.style.height = '100%';
element.style.width = '100%';
}
public layout(): void {

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

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