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

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

@@ -2,7 +2,9 @@
<span *ngIf="hasStatus" class="card-status"> <span *ngIf="hasStatus" class="card-status">
<div class="status-content" [style.backgroundColor]="statusColor"></div> <div class="status-content" [style.backgroundColor]="statusColor"></div>
</span> </span>
<span *ngIf="showRadioButton" class="selection-indicator-container">
<div *ngIf="showAsSelected" class="selection-indicator"></div>
</span>
<ng-container *ngIf="isVerticalButton"> <ng-container *ngIf="isVerticalButton">
<div class="card-vertical-button"> <div class="card-vertical-button">
<div *ngIf="iconPath" class="iconContainer"> <div *ngIf="iconPath" class="iconContainer">
@@ -28,5 +30,4 @@
</span> </span>
</div> </div>
</ng-container> </ng-container>
</div> </div>

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

@@ -130,6 +130,14 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
return this.cardType === 'VerticalButton'; 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[] { public get actions(): ActionDescriptor[] {
return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []); return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []);
@@ -156,6 +164,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
private updateTheme(theme: IColorTheme) { private updateTheme(theme: IColorTheme) {
this.backgroundColor = theme.getColor(colors.editorBackground, true).toString(); this.backgroundColor = theme.getColor(colors.editorBackground, true).toString();
this._changeRef.detectChanges();
} }
private onDidActionClick(action: ActionDescriptor): void { private onDidActionClick(action: ActionDescriptor): void {

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

@@ -1,4 +1,3 @@
.model-card { .model-card {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -7,23 +6,18 @@
margin: 15px; margin: 15px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
} }
.model-card.selected { .model-card.selected {
border-color: darkblue border-color: rgb(0, 120, 215);
} box-shadow: rgba(0, 120, 215, 0.75) 0px 0px 6px;
.vs-dark .monaco-workbench .model-card.selected,
.hc-black .monaco-workbench .model-card.selected {
border-color: darkblue
} }
.model-card.unselected { .model-card.unselected {
border-color: rgb(214, 214, 214); border-color: rgb(214, 214, 214);
box-shadow: none;
} }
@@ -102,6 +96,28 @@
text-align: center; 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 { .model-card .model-table {
border-spacing: 5px; border-spacing: 5px;
} }