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

extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts

@@ -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) {

src/sql/azdata.proposed.d.ts

@@ -271,7 +271,8 @@ declare module 'azdata' {
 		iconWidth?: string;
 		iconHeight?: string;
 		selectedCardId?: string;
-		orientation?: Orientation // Defaults to horizontal
+		orientation?: Orientation; // Defaults to horizontal
+		iconPosition?: 'top' | 'left'; // Defaults to top
 	}
 
 	export type RadioCardSelectionChangedEvent = { cardId: string; card: RadioCard };

src/sql/workbench/browser/modelComponents/media/card.css

@@ -61,7 +61,7 @@
 	border-color: rgb(214, 214, 214);
 }
 
-.horizontal .model-card .icon {
+.horizontal .model-card .icon, .model-portal-card .cardIcon {
 	display: inline-block;
 	flex-grow: 1;
 	width: 100%;
@@ -221,3 +221,38 @@
 	text-align: right;
 	white-space: nowrap;
 }
+
+
+.horizontal .model-left-icon-card {
+	display: flex;
+	max-width: 365px;
+	height: calc(100% - 35px);
+	padding: 20px 15px 15px;
+}
+
+.horizontal .model-left-icon-card .left-icon-container {
+	height: 35px;
+	width: 35px;
+	flex: 0 0 35px;
+}
+
+
+.horizontal .model-left-icon-card .detail-container {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 0%;
+	padding: 0px 15px;
+	width: 77%;
+}
+
+.horizontal .model-left-icon-card .card-label {
+	margin-bottom: 12px;
+	font-weight: bold;
+	font-size: 14px;
+}
+
+.horizontal .model-left-icon-card .card-description {
+	margin-bottom: 12px;
+	font-size: 100%;
+}
+

src/sql/workbench/browser/modelComponents/radioCardGroup.component.html

@@ -1,13 +1,13 @@
-	<div role="radiogroup" *ngIf="cards" [class]="orientation + ' card-group'" class="card-group" style="flex-wrap:wrap"
-		[style.height]="height" [style.width]="width" [attr.aria-label]="ariaLabel" (keydown)="onKeyDown($event)">
-		<div #cardDiv role="radio" *ngFor="let card of cards" class="model-card" (click)="selectCard(card.id)"
-			[attr.aria-checked]="isCardSelected(card.id)" [tabIndex]="getTabIndex(card.id)" [style.width]="cardWidth"
-			[style.height]="cardHeight" (focus)="onCardFocus(card.id)" (blur)="onCardBlur(card.id)" style="flex:0 0 auto;">
+<div role="radiogroup" *ngIf="cards" [class]="orientation + ' card-group'" class="card-group" style="flex-wrap:wrap"
+	[style.height]="height" [style.width]="width" [attr.aria-label]="ariaLabel" (keydown)="onKeyDown($event)">
+	<div #cardDiv role="radio" *ngFor="let card of cards" class="model-card" (click)="selectCard(card.id)"
+		[attr.aria-checked]="isCardSelected(card.id)" [tabIndex]="getTabIndex(card.id)" [style.width]="cardWidth"
+		[style.height]="cardHeight" (focus)="onCardFocus(card.id)" (blur)="onCardBlur(card.id)" style="flex:0 0 auto;">
 
+		<ng-container *ngIf="isIconPositionTop()">
 			<div class="selection-indicator-container">
 				<div *ngIf="isCardSelected(card.id)" class="selection-indicator"></div>
 			</div>
-
 			<div *ngIf="card.icon" class="icon-container">
 				<div [class]="getIconClass(card.id)" [style.width]="iconWidth" [style.height]="iconHeight"> </div>
 			</div>
@@ -15,8 +15,27 @@
 				<div *ngFor="let description of card.descriptions" class="inner-text-content">
 					<span class="text-value" [ngStyle]="description.textStyles">{{description.textValue}}</span>
 					<a *ngIf="description.linkDisplayValue" class="link-value" href="#"
-						(click)="onLinkClick($event, card.id, description)"
-						[ngStyle]="description.linkStyles">
+						(click)="onLinkClick($event, card.id, description)" [ngStyle]="description.linkStyles">
+						{{description.linkDisplayValue}}
+						<span *ngIf="description.displayLinkCodicon && description.linkDisplayValue"
+							class="codicon codicon-link-external" [ngStyle]="description.linkCodiconStyles"></span>
+					</a>
+				</div>
+			</div>
+		</ng-container>
+
+		<div *ngIf="isIconPositionLeft()" class="model-left-icon-card">
+			<span class="selection-indicator-container">
+				<div *ngIf="isCardSelected(card.id)" class="selection-indicator"></div>
+			</span>
+			<div *ngIf="card.icon" class="left-icon-container">
+				<div [class]="getIconClass(card.id)" [style.width]="iconWidth" [style.height]="iconHeight"></div>
+			</div>
+			<div class="detail-container">
+				<div *ngFor="let description of card.descriptions" style="margin-bottom:14px;">
+					<span class="text-value" [ngStyle]="description.textStyles">{{description.textValue}}</span>
+					<a *ngIf="description.linkDisplayValue" class="link-value" href="#"
+						(click)="onLinkClick($event, card.id, description)" [ngStyle]="description.linkStyles">
 						{{description.linkDisplayValue}}
 						<span *ngIf="description.displayLinkCodicon && description.linkDisplayValue"
 							class="codicon codicon-link-external" [ngStyle]="description.linkCodiconStyles"></span>
@@ -24,4 +43,6 @@
 				</div>
 			</div>
 		</div>
+
 	</div>
+</div>

src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts

@@ -119,6 +119,18 @@ export default class RadioCardGroup extends ComponentBase<azdata.RadioCardGroupC
 		return this.getProperties().selectedCardId ?? undefined;
 	}
 
+	public get iconPosition(): string {
+		return this.getProperties().iconPosition ?? 'top';
+	}
+
+	public isIconPositionTop(): boolean {
+		return this.iconPosition === 'top';
+	}
+
+	public isIconPositionLeft(): boolean {
+		return this.iconPosition === 'left';
+	}
+
 	public get orientation(): string {
 		const x = this.getProperties().orientation ?? 'horizontal';
 		return x;