mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-30 09:35:39 -05:00
b2c70e9301
This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers. #1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation. Features: - Supports defining a FlexContainer that maps to a flexbox-based layout. - Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it. - Has a sample project which shows how to use the API and was used for verification
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
'use strict';
|
|
|
|
import * as sqlops from 'sqlops';
|
|
|
|
/**
|
|
* The main controller class that initializes the extension
|
|
*/
|
|
export default class SplitPropertiesPanel {
|
|
private panels: sqlops.FlexContainer[];
|
|
private _modelBase: sqlops.FlexContainer;
|
|
constructor(view: sqlops.ModelView, numPanels: number) {
|
|
this.panels = [];
|
|
let ratio = Math.round(100 / numPanels);
|
|
for (let i = 0; i < numPanels; i++) {
|
|
this.panels.push(view.modelBuilder.flexContainer()
|
|
.withLayout({ flexFlow: 'column' }).component());
|
|
}
|
|
this._modelBase = view.modelBuilder.flexContainer()
|
|
.withLayout({
|
|
flexFlow: 'row'
|
|
}).withItems(this.panels, {
|
|
flex: `0 1 ${ratio}%`
|
|
})
|
|
.component();
|
|
}
|
|
|
|
public get modelBase(): sqlops.Component {
|
|
return this._modelBase;
|
|
}
|
|
|
|
public addItem(item: sqlops.Component, panel: number): void {
|
|
if (panel >= this.panels.length) {
|
|
throw new Error(`Cannot add to panel ${panel} as only ${this.panels.length - 1} panels defined`);
|
|
}
|
|
this.panels[panel].addItem(item, undefined);
|
|
}
|
|
}
|
|
|