Introduce vertical cards (#12125)

* Introduce vertical cards

* Simplify and add a css type

* Feedback

* Update yarn.lock
This commit is contained in:
Amir Omidi
2020-09-04 15:15:58 -07:00
committed by GitHub
parent c2320831f7
commit 59bb827d2e
12 changed files with 255 additions and 85 deletions

View File

@@ -105,14 +105,42 @@ export class SKURecommendationPage extends MigrationWizardPage {
const rbg = this.view!.modelBuilder.radioCardGroup();
rbg.component().cards = [];
rbg.component().orientation = azdata.Orientation.Vertical;
rbg.component().iconHeight = '30px';
rbg.component().iconWidth = '30px';
products.forEach((product) => {
const imagePath = path.resolve(this.migrationStateModel.getExtensionPath(), 'media', product.icon ?? 'ads.svg');
const descriptions: azdata.RadioCardDescription[] = [
{
textValue: product.name,
linkDisplayValue: 'Learn more',
displayLinkCodicon: true,
textStyles: {
'font-size': '1rem',
'font-weight': 550,
},
linkCodiconStyles: {
'font-size': '1em',
'color': 'royalblue'
}
},
{
textValue: '9 databases will be migrated',
linkDisplayValue: 'View/Change',
displayLinkCodicon: true,
linkCodiconStyles: {
'font-size': '1em',
'color': 'royalblue'
}
}
];
rbg.component().cards.push({
id: product.name,
icon: imagePath,
label: product.name
descriptions
});
});