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

Introduce vertical cards (#12125)

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

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

@@ -1,31 +1,27 @@
<div role="radiogroup" *ngIf="cards" 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;">
<span class="selection-indicator-container">
<div *ngIf="isCardSelected(card.id)" class="selection-indicator"></div>
</span>
<div class="card-vertical-button">
<div *ngIf="card.icon" class="iconContainer">
<div [class]="getIconClass(card.id)" [style.width]="iconWidth" [style.height]="iconHeight"></div>
<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 class="selection-indicator-container">
<div *ngIf="isCardSelected(card.id)" class="selection-indicator"></div>
</div>
<h4 class="card-label">{{card.label}}</h4>
<div *ngIf="card.descriptions && card.descriptions.length > 0" class="model-card-description-container">
<ng-container *ngFor="let desc of card.descriptions">
<table class="model-card-description-table" [attr.aria-label]="desc.ariaLabel">
<tr>
<th class="model-card-description-label-column">{{desc.labelHeader}}</th>
<th class="model-card-description-value-column" *ngIf="desc.valueHeader">
{{desc.valueHeader}}</th>
</tr>
<tr *ngFor="let content of desc.contents">
<td class="model-card-description-label-column">{{content.label}}</td>
<td class="model-card-description-value-column" *ngIf="content.value">{{content.value}}</td>
</tr>
</table>
</ng-container>
<div *ngIf="card.icon" class="icon-container">
<div [class]="getIconClass(card.id)" [style.width]="iconWidth" [style.height]="iconHeight"> </div>
</div>
<div class="text-container">
<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">
{{description.linkDisplayValue}}
<span *ngIf="description.displayLinkCodicon && description.linkDisplayValue"
class="codicon codicon-link-external" [ngStyle]="description.linkCodiconStyles"></span>
</a>
</div>
</div>
</div>
</div>
</div>