Fix view model editor layout (#1473)

* 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

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()