Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-04-18 10:09:03 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): improve charts and other cards for correct theme switching

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-07 16:12:38 +03:00
parent 3880ab3d74
commit f630a1d540
20 changed files with 280 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -26,9 +26,7 @@
</g>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
[attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="none"></circle>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinDashRadius"
[attr.stroke-width]="2 / scaleFactor" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-dasharray="1, 6" *ngIf="pinDashRadius"></circle>
[attr.stroke-width]="thumbBorder / scaleFactor" class="circle"></circle>
</g>
</svg>
</div>

21
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -12,6 +12,11 @@
z-index: 2;
}
.circle {
fill: nb-theme(color-bg);
stroke: nb-theme(color-success);
}
.temperature-bg {
position: absolute;
width: 88%;
@ -47,12 +52,11 @@
display: flex;
align-items: center;
justify-content: center;
box-shadow: nb-theme(card-shadow);
cursor: pointer;
font-size: 2.5rem;
color: nb-theme(color-fg-heading);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
transition: all 0.1s ease-out;
border: 2px solid nb-theme(separator);
&:hover {
background-color: lighten(nb-theme(card-bg), 5%);
@ -68,4 +72,17 @@
text-shadow: none;
}
}
@include nb-for-theme(cosmic) {
.circle {
fill: nb-theme(color-fg-heading);
stroke: nb-theme(color-fg-heading);
}
.power-bg {
border: none;
box-shadow: nb-theme(card-shadow);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
}
}

9
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -18,8 +18,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@Input() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90;
@Input() arcThickness: number = 18; // CSS pixels
@Input() thumbRadius: number = 15; // CSS pixels
@Input() thumbDashRadius: number = null;
@Input() thumbRadius: number = 16; // CSS pixels
@Input() thumbBorder: number = 3;
@Input() maxLeap: number = 0.4;
value: number = 50;
@ -61,7 +61,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
translateYValue = 0;
thickness = 6;
pinRadius = 10;
pinDashRadius = null;
colors: any = [];
styles = {
@ -133,7 +132,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect();
const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1;
const svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius);
const thumbMaxRadius = this.thumbRadius + this.thumbBorder;
const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
: 0;
@ -151,7 +150,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
} else {
this.radius = VIEW_BOX_SIZE / 2 - thumbMargin;
}
} else {
this.radius = (svgHeight - 2 * thumbMargin) / (1 + Math.cos(halfAngle));
}
@ -163,7 +161,6 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
this.thickness = this.arcThickness / this.scaleFactor;
this.pinRadius = this.thumbRadius / this.scaleFactor;
this.pinDashRadius = this.thumbDashRadius && this.thumbDashRadius / this.scaleFactor;
}
private calculateClipPathSettings() {

4
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -51,8 +51,8 @@
</ngx-temperature-dragger>
</div>
<div [(ngModel)]="humidityMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
data-toggle="buttons">
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons"
class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
<label class="btn btn-icon">
<input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
</label>

15
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -104,8 +104,7 @@
&.active {
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
color: nb-theme(color-success);
}
i {
@ -125,4 +124,16 @@
font-size: 1.75rem;
}
}
@include nb-for-theme(cosmic) {
.btn-icon {
border-color: nb-theme(form-control-border-color);
&.active {
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
}
}
}
}