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

improve the visual effect for selected card (#3509)

Browse Source 
* improve the visual effect for selected card

* remove shadow for unselected card as per Smitha's suggestion

* fix the issue of status icon not changing when new theme selected
This commit is contained in:
Alan Ren
2018-12-07 14:13:52 -08:00
committed by GitHub
parent 944a77fe42
commit 77fdf18686
3 changed files with 66 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/sql/parts/modelComponents/card.component.html
View File

@@ -2,31 +2,32 @@
<span *ngIf="hasStatus" class="card-status">
<div class="status-content" [style.backgroundColor]="statusColor"></div>
</span>
<ng-container *ngIf="isVerticalButton">
<div class="card-vertical-button">
<div *ngIf="iconPath" class="iconContainer">
<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
</div>
<h4 class="card-label">{{label}}</h4>
<span *ngIf="showRadioButton" class="selection-indicator-container">
<div *ngIf="showAsSelected" class="selection-indicator"></div>
</span>
<ng-container *ngIf="isVerticalButton">
<div class="card-vertical-button">
<div *ngIf="iconPath" class="iconContainer">
<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
</div>
</ng-container>
<ng-container *ngIf="isDetailsCard">
<div class="card-content">
<h4 class="card-label">{{label}}</h4>
<p class="card-value">{{value}}</p>
<span *ngIf="actions">
<table class="model-table">
<tr *ngFor="let action of actions">
<td class="table-row">{{action.label}}</td>
<td *ngIf="action.actionTitle" class="table-row">
<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
</td>
</tr>
</table>
</span>
</div>
</ng-container>
<h4 class="card-label">{{label}}</h4>
</div>
</ng-container>
<ng-container *ngIf="isDetailsCard">
<div class="card-content">
<h4 class="card-label">{{label}}</h4>
<p class="card-value">{{value}}</p>
<span *ngIf="actions">
<table class="model-table">
<tr *ngFor="let action of actions">
<td class="table-row">{{action.label}}</td>
<td *ngIf="action.actionTitle" class="table-row">
<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
</td>
</tr>
</table>
</span>
</div>
</ng-container>
</div>

11
src/sql/parts/modelComponents/card.component.ts
View File

@@ -29,7 +29,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
private backgroundColor: string;
constructor( @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) {
@@ -130,6 +130,14 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
return this.cardType === 'VerticalButton';
}
public get showRadioButton():boolean{
return this.selectable && (this.selected || this._hasFocus)
}
public get showAsSelected(): boolean {
return this.selectable && this.selected;
}
public get actions(): ActionDescriptor[] {
return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []);
@@ -156,6 +164,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
private updateTheme(theme: IColorTheme) {
this.backgroundColor = theme.getColor(colors.editorBackground, true).toString();
this._changeRef.detectChanges();
}
private onDidActionClick(action: ActionDescriptor): void {

44
src/sql/parts/modelComponents/card.css
View File

@@ -1,4 +1,3 @@
.model-card {
position: relative;
display: inline-block;
@@ -7,23 +6,18 @@
margin: 15px;
border-width: 1px;
border-style: solid;
text-align: left;
vertical-align: top;
box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
}
.model-card.selected {
border-color: darkblue
}
.vs-dark .monaco-workbench .model-card.selected,
.hc-black .monaco-workbench .model-card.selected {
border-color: darkblue
border-color: rgb(0, 120, 215);
box-shadow: rgba(0, 120, 215, 0.75) 0px 0px 6px;
}
.model-card.unselected {
border-color: rgb(214, 214, 214);
box-shadow: none;
}
@@ -102,21 +96,43 @@
text-align: center;
}
.model-card .selection-indicator-container {
position: absolute;
top: 5px;
right: 5px;
overflow: hidden;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
border-width: 1px;
border-color: rgb(0, 120, 215);
border-style: solid;
}
.model-card .selection-indicator {
margin: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(0, 120, 215);
}
.model-card .model-table {
border-spacing: 5px;
}
.model-table .table-row {
width: auto;
clear: both;
width: auto;
clear: both;
}
.model-table .table-cell {
vertical-align: top;
padding: 7px;
vertical-align: top;
padding: 7px;
}
.model-table a {
cursor: pointer;
text-decoration: underline
}
}