Resource Deployment UX Refresh (#12173)

* adding new card to styles

* renamed property, removed unnecessary css

* Fixed to match new props

* added horizontal class

* merged from master
This commit is contained in:
Aasim Khan
2020-09-11 11:13:59 -07:00
committed by GitHub
parent 6929a803dc
commit a823e44393
5 changed files with 90 additions and 23 deletions

View File

@@ -18,7 +18,6 @@ export class ResourceTypePickerDialog extends DialogBase {
private toolRefreshTimestamp: number = 0;
private _selectedResourceType: ResourceType;
private _view!: azdata.ModelView;
private _resourceDescriptionLabel!: azdata.TextComponent;
private _optionsContainer!: azdata.FlexContainer;
private _toolsTable!: azdata.TableComponent;
private _cardGroup!: azdata.RadioCardGroupComponent;
@@ -78,19 +77,23 @@ export class ResourceTypePickerDialog extends DialogBase {
{
textValue: resourceType.displayName,
textStyles: {
'font-size': '12px',
'font-weight': 700
'font-size': '14px',
'font-weight': 'bold'
}
},
{
textValue: resourceType.description,
}
]
};
}),
iconHeight: '50px',
iconWidth: '50px',
cardWidth: '220px',
cardHeight: '180px',
iconHeight: '35px',
iconWidth: '35px',
cardWidth: '300px',
cardHeight: '150px',
ariaLabel: localize('deploymentDialog.deploymentOptions', "Deployment options"),
width: '1100px'
width: '1100px',
iconPosition: 'left'
}).component();
this._toDispose.push(this._cardGroup.onSelectionChanged(({ cardId }) => {
const resourceType = resourceTypes.find(rt => { return rt.name === cardId; });
@@ -98,7 +101,6 @@ export class ResourceTypePickerDialog extends DialogBase {
this.selectResourceType(resourceType);
}
}));
this._resourceDescriptionLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: this._selectedResourceType ? this._selectedResourceType.description : undefined }).component();
this._optionsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
this._agreementContainer = view.modelBuilder.divContainer().component();
const toolColumn: azdata.TableColumn = {
@@ -144,9 +146,6 @@ export class ResourceTypePickerDialog extends DialogBase {
{
component: this._cardGroup,
title: ''
}, {
component: this._resourceDescriptionLabel,
title: ''
}, {
component: this._agreementContainer,
title: ''
@@ -177,7 +176,6 @@ export class ResourceTypePickerDialog extends DialogBase {
private selectResourceType(resourceType: ResourceType): void {
this._selectedResourceType = resourceType;
this._resourceDescriptionLabel.value = resourceType.description;
this._agreementCheckboxChecked = false;
this._agreementContainer.clearItems();
if (resourceType.agreement) {