Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): fix layout temperature styles, add humidity dragger

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-13 16:00:49 +03:00
parent e12b77174d
commit 5f6f0d28d7
6 changed files with 56 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -14,10 +14,10 @@
.temperature-bg { .temperature-bg {
position: absolute; position: absolute;
width: 84%; width: 88%;
height: 84%; height: 88%;
top: 14%; top: 13%;
left: 8%; left: 6%;
background-color: lighten(nga-theme(layout-bg), 2%); background-color: lighten(nga-theme(layout-bg), 2%);
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
@ -34,7 +34,7 @@
height: 5.25rem; height: 5.25rem;
background-color: nga-theme(card-bg); background-color: nga-theme(card-bg);
border-radius: 50%; border-radius: 50%;
bottom: 5%; bottom: 2%;
left: 50%; left: 50%;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
z-index: 2; z-index: 2;

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

@ -17,7 +17,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@Input() fillColors: string|string[] = '#2ec6ff'; @Input() fillColors: string|string[] = '#2ec6ff';
@Input() disableArcColor: string = '#999999'; @Input() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90; @Input() bottomAngle: number = 90;
@Input() arcThickness: number = 20; // CSS pixels @Input() arcThickness: number = 18; // CSS pixels
@Input() thumbRadius: number = 15; // CSS pixels @Input() thumbRadius: number = 15; // CSS pixels
@Input() thumbDashRadius: number = null; @Input() thumbDashRadius: number = null;
@Input() maxLeap: number = 0.4; @Input() maxLeap: number = 0.4;

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

@ -3,13 +3,13 @@
<nga-tab tabTitle="Temperature"> <nga-tab tabTitle="Temperature">
<div class="temperature-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" [min]="12" [max]="30" <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[arcThickness]="20" [thumbRadius]="15" [thumbDashRadius]="22" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg" [min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]"> [fillColors]="['#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59']">
<div class="temperature" [ngClass]="{ 'off': temperatureOff }"> <div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value"> <div class="value temperature">
{{ temperatureOff ? '--' : (temperature | ngxRound) }} {{ temperatureOff ? '--' : (temperature | ngxRound) }}
</div> </div>
<div class="desc"> <div class="desc">
@ -38,21 +38,34 @@
<nga-tab tabTitle="Humidity"> <nga-tab tabTitle="Humidity">
<span>Humidity placeholder</span> <div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="['#fff024', '#7bff24', '#31ffad', '#2ec7fe']">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100" <div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
[arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg" <div class="value humidity">
[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]"> {{ humidityOff ? '--' : (humidity | ngxRound) }}
</div>
</div>
</ngx-temperature-dragger>
</div>
<div class="temperature" [ngClass]="{ 'off': humidityOff }"> <div [(ngModel)]="humidityMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
<div class="value"> data-toggle="buttons">
{{ humidityOff ? '--' : (humidity | ngxRound) }} <label class="btn btn-icon">
</div> <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
<div class="desc"> </label>
Celsius <label class="btn btn-icon">
</div> <input type="radio" value="warm"/><i class="ion-ios-sunny-outline"></i>
</div> </label>
</ngx-temperature-dragger> <label class="btn btn-icon">
<input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
</label>
<label class="btn btn-icon">
<input type="radio" value="fan"/><i class="ion-ios-loop"></i>
</label>
</div>
</nga-tab> </nga-tab>
</nga-tabset> </nga-tabset>
</nga-card> </nga-card>

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

@ -20,7 +20,7 @@
height: 100%; height: 100%;
} }
.temperature-container { .slider-container {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
@ -28,11 +28,11 @@
} }
ngx-temperature-dragger { ngx-temperature-dragger {
margin-top: -3.5rem; margin-top: -1.5rem;
width: 80%; width: 80%;
} }
.temperature { .slider-value-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -44,12 +44,22 @@
font-size: 4rem; font-size: 4rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nga-theme(font-weight-bolder);
&::before { &.temperature::before {
position: absolute; position: absolute;
content: '°'; content: '°';
top: 0; top: 0;
right: -1.25rem; right: -1.25rem;
} }
&.humidity::before {
position: absolute;
content: '%';
bottom: 0.5rem;
right: -2.5rem;
color: nga-theme(color-fg);
font-size: 2.5rem;
font-weight: nga-theme(font-weight-light);
}
} }
.desc { .desc {

6
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -8,13 +8,13 @@ import { NgaThemeService } from '@akveo/nga-theme';
}) })
export class TemperatureComponent { export class TemperatureComponent {
temperature: number = 23; temperature: number = 28;
temperatureOff: boolean = false; temperatureOff: boolean = false;
temperatureMode = 'cool'; temperatureMode = 'cool';
humidity: number = 23; humidity: number = 87;
humidityOff: boolean = false; humidityOff: boolean = false;
humidityMode = 'auto'; humidityMode = 'heat';
themeConfig: any = {}; themeConfig: any = {};