ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 01:25:36 -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

12
src/sql/workbench/browser/modelComponents/card.component.html
View File

@@ -1,5 +1,7 @@
<div #cardDiv role="radio" *ngIf="label" [class]="getClass()" (click)="onCardClick()" [attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)"
(mouseout)="onCardHoverChanged($event)" tabIndex="0" [style.width]="width" [style.height]="height">
<!-- The horizontal is for compatibility, we're going to get rid of this once card component can be removed -->
<div #cardDiv role="radio" *ngIf="label" [class]="getClass() + ' horizontal'" (click)="onCardClick()"
[attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)" (mouseout)="onCardHoverChanged($event)"
tabIndex="0" [style.width]="width" [style.height]="height">
<ng-container *ngIf="isVerticalButton || isDetailsCard">
<span *ngIf="hasStatus" class="card-status">
<div class="status-content" [style.backgroundColor]="statusColor"></div>
@@ -15,8 +17,10 @@
<h4 class="card-label">{{label}}</h4>
<div *ngIf="descriptions.length > 0" class="model-card-description-container">
<div *ngFor="let desc of descriptions">
<div *ngIf="desc.label; else separator" [style.font-weight]="desc.fontWeight" class="model-card-list-item-description">
<span>{{desc.label}}</span><span class="model-card-list-item-description-value">{{desc.value}}</span>
<div *ngIf="desc.label; else separator" [style.font-weight]="desc.fontWeight"
class="model-card-list-item-description">
<span>{{desc.label}}</span><span
class="model-card-list-item-description-value">{{desc.value}}</span>
</div>
<ng-template #separator>
<div style="height: 12px"></div>