From 79e2c56ec85ffe9557b18eb4bf1e00a614f7a8f6 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Wed, 2 Oct 2019 11:21:18 -0700 Subject: [PATCH] .Add types for ModelView CSS properties (#7465) --- extensions/agent/src/dialogs/jobDialog.ts | 1 - .../agent/src/dialogs/notebookDialog.ts | 1 - .../src/bigDataCluster/dialog/bdcDashboard.ts | 9 +++----- .../dialog/bdcDashboardOverviewPage.ts | 7 +++--- .../dialog/bdcDashboardResourceStatusPage.ts | 3 +-- .../dialog/bdcServiceStatusPage.ts | 6 ++--- extensions/mssql/src/dashboard/bookWidget.ts | 4 +--- .../mssql/src/dashboard/serviceEndpoints.ts | 4 ++-- .../src/ui/modelViewUtils.ts | 2 +- .../src/ui/resourceTypePickerDialog.ts | 2 +- .../src/controllers/mainController.ts | 1 - src/sql/azdata.d.ts | 23 ++++++++++++------- src/sql/sqlops.proposed.d.ts | 17 ++++++++++---- 13 files changed, 41 insertions(+), 39 deletions(-) diff --git a/extensions/agent/src/dialogs/jobDialog.ts b/extensions/agent/src/dialogs/jobDialog.ts index 9641810399..7bd78a33d4 100644 --- a/extensions/agent/src/dialogs/jobDialog.ts +++ b/extensions/agent/src/dialogs/jobDialog.ts @@ -648,7 +648,6 @@ export class JobDialog extends AgentDialog { private createRowContainer(view: azdata.ModelView): azdata.FlexBuilder { return view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', - alignItems: 'left', justifyContent: 'space-between' }); } diff --git a/extensions/agent/src/dialogs/notebookDialog.ts b/extensions/agent/src/dialogs/notebookDialog.ts index c941cab95d..09dcb0b9ac 100644 --- a/extensions/agent/src/dialogs/notebookDialog.ts +++ b/extensions/agent/src/dialogs/notebookDialog.ts @@ -301,7 +301,6 @@ export class NotebookDialog extends AgentDialog { private createRowContainer(view: azdata.ModelView): azdata.FlexBuilder { return view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', - alignItems: 'left', justifyContent: 'space-between' }); } diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts index f060cc7ea1..279d8ebab6 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts @@ -57,8 +57,7 @@ export class BdcDashboard { { flexFlow: 'column', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); // ########### @@ -104,8 +103,7 @@ export class BdcDashboard { { flexFlow: 'row', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); rootContainer.addItem(this.mainAreaContainer, { flex: '0 0 100%' }); @@ -118,8 +116,7 @@ export class BdcDashboard { { flexFlow: 'column', width: navWidth, - height: '100%', - alignItems: 'left' + height: '100%' } ).component(); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts index dd8a625b09..3f04c75875 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts @@ -53,8 +53,7 @@ export class BdcDashboardOverviewPage { { flexFlow: 'column', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); // ############## @@ -109,7 +108,7 @@ export class BdcDashboardOverviewPage { overviewHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } }); - const overviewContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component(); + const overviewContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component(); // Service Status header row const serviceStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); @@ -144,7 +143,7 @@ export class BdcDashboardOverviewPage { .component(); rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } }); - const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component(); + const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component(); // Service endpoints header row const endpointsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts index e970cf466a..f50260efeb 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts @@ -60,8 +60,7 @@ export class BdcDashboardResourceStatusPage { { flexFlow: 'column', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); // ############################## diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts index 2f1273d6fc..cd38d8277c 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts @@ -35,16 +35,14 @@ export class BdcServiceStatusPage { { flexFlow: 'column', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); this.resourceHeader = this.modelView.modelBuilder.flexContainer().withLayout( { flexFlow: 'row', width: '100%', - height: '25px', - alignItems: 'left' + height: '25px' } ).component(); diff --git a/extensions/mssql/src/dashboard/bookWidget.ts b/extensions/mssql/src/dashboard/bookWidget.ts index 2bd5270ca3..52f7055bdc 100644 --- a/extensions/mssql/src/dashboard/bookWidget.ts +++ b/extensions/mssql/src/dashboard/bookWidget.ts @@ -15,14 +15,12 @@ export function registerBooksWidget(bookContributionProvider: BookContributionPr const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', - height: '100%', - alignItems: 'left' + height: '100%' }).component(); const bookslocationContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '270px', height: '100%', - alignItems: 'left', position: 'absolute' }).component(); diff --git a/extensions/mssql/src/dashboard/serviceEndpoints.ts b/extensions/mssql/src/dashboard/serviceEndpoints.ts index 8395d79c13..9a6095ad9c 100644 --- a/extensions/mssql/src/dashboard/serviceEndpoints.ts +++ b/extensions/mssql/src/dashboard/serviceEndpoints.ts @@ -65,7 +65,7 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void .sort((e1, e2) => e1.endpoint.localeCompare(e2.endpoint)); endpointsArray.unshift(...sqlServerMasterEndpoints); - const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component(); + const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component(); endpointsArray.forEach(endpointInfo => { const endPointRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); const nameCell = view.modelBuilder.text().withProperties({ value: endpointInfo.description }).component(); @@ -103,7 +103,7 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void container.addItem(endPointRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } }); }); - const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', alignItems: 'left', position: 'absolute' }).component(); + const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', position: 'absolute' }).component(); endpointsContainer.addItem(container, { CSSStyles: { 'padding-top': '25px', 'padding-left': '5px' } }); await view.initializeModel(endpointsContainer); diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index af6cd49ebf..3d8e889483 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts @@ -214,7 +214,7 @@ function processFields(fieldInfoArray: FieldInfo[], components: azdata.Component export function createFlexContainer(view: azdata.ModelView, items: azdata.Component[], rowLayout: boolean = true): azdata.FlexContainer { const flexFlow = rowLayout ? 'row' : 'column'; - const alignItems = rowLayout ? 'center' : ''; + const alignItems = rowLayout ? 'center' : undefined; const itemsStyle = rowLayout ? { CSSStyles: { 'margin-right': '5px' } } : {}; return view.modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout({ flexFlow: flexFlow, alignItems: alignItems }).component(); } diff --git a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts index a56e9b268e..62dc0ec31a 100644 --- a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts +++ b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts @@ -54,7 +54,7 @@ export class ResourceTypePickerDialog extends DialogBase { const tableWidth = 1126; this._view = view; this.resourceTypeService.getResourceTypes().forEach(resourceType => this.addCard(resourceType)); - const cardsContainer = view.modelBuilder.flexContainer().withItems(this._resourceTypeCards, { flex: '0 0 auto', CSSStyles: { 'margin-bottom': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'left' }).component(); + const cardsContainer = view.modelBuilder.flexContainer().withItems(this._resourceTypeCards, { flex: '0 0 auto', CSSStyles: { 'margin-bottom': '10px' } }).withLayout({ flexFlow: 'row' }).component(); this._resourceDescriptionLabel = view.modelBuilder.text().withProperties({ value: this._selectedResourceType ? this._selectedResourceType.description : undefined }).component(); this._optionsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); this._agreementContainer = view.modelBuilder.divContainer().component(); diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index 1407d23d04..914bcd0b0b 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -293,7 +293,6 @@ export default class MainController implements vscode.Disposable { let flexRadioButtonsModel = view.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column', - alignItems: 'left', height: 150 }).withItems([ radioButton, groupModel1, radioButton2] diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index 62f7ceda79..57092f376c 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -2721,6 +2721,13 @@ declare module 'azdata' { } + export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset'; + export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit'; + export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit'; + export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse'; + export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'; + export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit'; + /** * The config for a FlexBox-based container. This supports easy * addition of content to a container with a flexible layout @@ -2736,19 +2743,19 @@ declare module 'azdata' { /** * Matches the justify-content CSS property. */ - justifyContent?: string; + justifyContent?: JustifyContentType; /** * Matches the align-items CSS property. */ - alignItems?: string; + alignItems?: AlignItemsType; /** * Matches the align-content CSS property. */ - alignContent?: string; + alignContent?: AlignContentType; /** * Matches the flex-wrap CSS property. */ - flexWrap?: string; + flexWrap?: FlexWrapType; /** * Container Height */ @@ -2762,7 +2769,7 @@ declare module 'azdata' { /** * */ - textAlign?: string; + textAlign?: TextAlignType; /** * The position CSS property. Empty by default. @@ -2771,7 +2778,7 @@ declare module 'azdata' { * set to 'absolute', with the parent FlexContainer having 'relative' position. * Without this the component will fail to correctly size itself. */ - position?: string; + position?: PositionType; } export interface SplitViewLayout extends FlexLayout { @@ -2959,7 +2966,7 @@ declare module 'azdata' { * set to 'absolute', with the parent FlexContainer having 'relative' position. * Without this the component will fail to correctly size itself */ - position?: string; + position?: PositionType; /** * Matches the CSS style key and its available values. */ @@ -3038,7 +3045,7 @@ declare module 'azdata' { ownerUri: string; } - export interface CheckBoxProperties { + export interface CheckBoxProperties extends ComponentProperties { checked?: boolean; label?: string; } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index c449d3157f..8136386cb7 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -270,6 +270,13 @@ declare module 'sqlops' { } + export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset'; + export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit'; + export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit'; + export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse'; + export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit'; + export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit'; + /** * The config for a FlexBox-based container. This supports easy * addition of content to a container with a flexible layout @@ -285,15 +292,15 @@ declare module 'sqlops' { /** * Matches the justify-content CSS property. */ - justifyContent?: string; + justifyContent?: JustifyContentType; /** * Matches the align-items CSS property. */ - alignItems?: string; + alignItems?: AlignItemsType; /** * Matches the align-content CSS property. */ - alignContent?: string; + alignContent?: AlignContentType; /** * Container Height @@ -308,7 +315,7 @@ declare module 'sqlops' { /** * */ - textAlign?: string; + textAlign?: TextAlignType; /** * The position CSS property. Empty by default. @@ -317,7 +324,7 @@ declare module 'sqlops' { * set to 'absolute', with the parent FlexContainer having 'relative' position. * Without this the component will fail to correctly size itself. */ - position?: string; + position?: PositionType; } export interface FlexItemLayout {