Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +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>
<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"
[attr.stroke-width]="2 / scaleFactor" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-dasharray="1, 6" *ngIf="pinDashRadius"></circle>
</g>

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

@ -14,10 +14,10 @@
.temperature-bg {
position: absolute;
width: 84%;
height: 84%;
top: 14%;
left: 8%;
width: 88%;
height: 88%;
top: 13%;
left: 6%;
background-color: lighten(nga-theme(layout-bg), 2%);
border-radius: 50%;
z-index: 1;
@ -34,7 +34,7 @@
height: 5.25rem;
background-color: nga-theme(card-bg);
border-radius: 50%;
bottom: 5%;
bottom: 2%;
left: 50%;
transform: translate(-50%, 50%);
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() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90;
@Input() arcThickness: number = 20; // CSS pixels
@Input() arcThickness: number = 18; // CSS pixels
@Input() thumbRadius: number = 15; // CSS pixels
@Input() thumbDashRadius: number = null;
@Input() maxLeap: number = 0.4;

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

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

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

@ -20,7 +20,7 @@
height: 100%;
}
.temperature-container {
.slider-container {
display: flex;
flex: 1;
justify-content: center;
@ -28,11 +28,11 @@
}
ngx-temperature-dragger {
margin-top: -3.5rem;
margin-top: -1.5rem;
width: 80%;
}
.temperature {
.slider-value-container {
display: flex;
flex-direction: column;
align-items: center;
@ -44,12 +44,22 @@
font-size: 4rem;
font-weight: nga-theme(font-weight-bolder);
&::before {
&.temperature::before {
position: absolute;
content: '°';
top: 0;
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 {

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

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