ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 09:35:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Resource Deployment UX Refresh (#12173)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

37
src/sql/workbench/browser/modelComponents/media/card.css
View File

@@ -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%;
}

37
src/sql/workbench/browser/modelComponents/radioCardGroup.component.html
View File

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

12
src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
View File

@@ -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;