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

refactor(iot): temperature widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 11:14:24 +03:00
parent ce019a1bc5
commit 030d2a1802
4 changed files with 80 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/pages/dashboard/dashboard.module.ts
View file

@ -1,5 +1,12 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NbActionsModule, NbButtonModule, NbCardModule, NbTabsetModule, NbUserModule } from '@nebular/theme'; import {
NbActionsModule,
NbButtonModule,
NbCardModule,
NbTabsetModule,
NbUserModule,
NbRadioModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts'; import { NgxEchartsModule } from 'ngx-echarts';
import { ThemeModule } from '../../@theme/theme.module'; import { ThemeModule } from '../../@theme/theme.module';
@ -31,6 +38,7 @@ import { FormsModule } from '@angular/forms';
NbButtonModule, NbButtonModule,
NbTabsetModule, NbTabsetModule,
NbActionsModule, NbActionsModule,
NbRadioModule,
NgxEchartsModule, NgxEchartsModule,
], ],
declarations: [ declarations: [

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

@ -1,5 +1,4 @@
@import '../../../../@theme/styles/themes'; @import '../../../../@theme/styles/themes';
//@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() { @include nb-install-component() {
position: relative; position: relative;
@ -20,8 +19,8 @@
} }
.circle { .circle {
fill: nb-theme(color-bg); fill: nb-theme(background-basic-color-4);
stroke: nb-theme(color-success); stroke: nb-theme(color-primary-default);
} }
.temperature-bg { .temperature-bg {
@ -38,18 +37,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid nb-theme(separator); border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
@include nb-for-theme(cosmic) {
//background-color: lighten(nb-theme(layout-bg), 2%);
border: none;
}
} }
.power-bg { .power-bg {
position: absolute; position: absolute;
width: 5.25rem; width: 5.25rem;
height: 5.25rem; height: 5.25rem;
background-color: nb-theme(card-bg); background-color: nb-theme(card-background-color);
border-radius: 50%; border-radius: 50%;
bottom: 2%; bottom: 2%;
left: 50%; left: 50%;
@ -61,44 +56,22 @@
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
font-size: 3rem; font-size: 3rem;
color: nb-theme(color-fg-heading); color: nb-theme(text-basic-color);
border: 2px solid nb-theme(separator); border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&:hover { &:hover {
//background-color: lighten(nb-theme(card-bg), 5%); background-color: nb-theme(color-basic-hover);
color: nb-theme(text-basic-color);
} }
&:active { &:active {
//background-color: darken(nb-theme(card-bg), 5%); background-color: nb-theme(color-basic-default);
box-shadow: none; box-shadow: none;
} }
&.off { &.off:not(:hover) {
color: nb-theme(color-fg); color: nb-theme(text-hint-color);
text-shadow: none; 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);
}
}
@include nb-for-theme(corporate) {
.circle {
stroke: nb-theme(color-warning);
}
.power-bg {
color: nb-theme(separator);
}
}
} }

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

@ -9,7 +9,7 @@
[fillColors]="colors.temperature"> [fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }"> <div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature"> <div class="value temperature h1">
{{ temperatureOff ? '--' : (temperature | ngxRound) }} {{ temperatureOff ? '--' : (temperature | ngxRound) }}
</div> </div>
<div class="desc"> <div class="desc">
@ -19,21 +19,20 @@
</ngx-temperature-dragger> </ngx-temperature-dragger>
</div> </div>
<div [(ngModel)]="temperatureMode" ngbRadioGroup data-toggle="buttons" <nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width"> <nb-radio value="cool">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-snowy-circled"></i>
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i> </nb-radio>
</label> <nb-radio value="warm">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-sunny-circled"></i>
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i> </nb-radio>
</label> <nb-radio value="heat">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-flame-circled"></i>
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i> </nb-radio>
</label> <nb-radio value="fan">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-loop-circled"></i>
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i> </nb-radio>
</label> </nb-radio-group>
</div>
</nb-tab> </nb-tab>
<nb-tab tabTitle="Humidity"> <nb-tab tabTitle="Humidity">
@ -44,28 +43,27 @@
[fillColors]="colors.temperature"> [fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }"> <div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity"> <div class="value humidity h1">
{{ humidityOff ? '--' : (humidity | ngxRound) }} {{ humidityOff ? '--' : (humidity | ngxRound) }}
</div> </div>
</div> </div>
</ngx-temperature-dragger> </ngx-temperature-dragger>
</div> </div>
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons" <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width"> <nb-radio value="cool">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-snowy-circled"></i>
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i> </nb-radio>
</label> <nb-radio value="warm">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-sunny-circled"></i>
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i> </nb-radio>
</label> <nb-radio value="heat">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-flame-circled"></i>
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i> </nb-radio>
</label> <nb-radio value="fan">
<label ngbButtonLabel class="btn btn-icon"> <i class="nb-loop-circled"></i>
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i> </nb-radio>
</label> </nb-radio-group>
</div>
</nb-tab> </nb-tab>
</nb-tabset> </nb-tabset>
</nb-card> </nb-card>

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

@ -32,7 +32,7 @@
ngx-temperature-dragger { ngx-temperature-dragger {
margin-top: -1.5rem; margin-top: -1.5rem;
width: 80%; width: 100%;
max-width: 300px; max-width: 300px;
} }
@ -43,34 +43,24 @@
.value { .value {
position: relative; position: relative;
color: nb-theme(color-fg-heading); margin: 0;
font-family: nb-theme(font-secondary);
font-size: 4rem;
font-weight: nb-theme(font-weight-bolder);
&.temperature::before { &.temperature::before {
position: absolute; position: absolute;
content: '°'; content: '°';
top: 0; top: 0;
right: -1.25rem; right: -0.85rem;
} }
&.humidity::before { &.humidity::before {
position: absolute; position: absolute;
content: '%'; content: '%';
bottom: 0.5rem; top: 3px;
right: -2.5rem; right: -1.6rem;
color: nb-theme(color-fg); font-size: 0.7em;
font-size: 2.5rem;
font-weight: nb-theme(font-weight-light);
} }
} }
.desc {
color: nb-theme(color-fg);
font-weight: nb-theme(font-weight-light);
}
&.off { &.off {
.value { .value {
color: nb-theme(color-fg); color: nb-theme(color-fg);
@ -88,82 +78,38 @@
} }
} }
.btn-group { nb-radio-group {
padding: 1.25rem;
justify-content: center;
}
.btn-icon {
display: flex; display: flex;
align-items: center; justify-content: space-between;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
padding: 0;
margin-bottom: 0;
color: nb-theme(color-fg);
&.active {
border-color: nb-theme(color-fg-highlight);
color: nb-theme(color-fg-highlight);
}
i {
font-size: 2.25rem;
line-height: 1;
}
} }
@include nb-for-theme(cosmic) { nb-radio {
.btn-icon.active { flex: 0 0 auto;
color: nb-theme(color-fg-heading); width: calc(3.5rem + 2px);
border-color: nb-theme(color-fg-highlight); height: calc(3.5rem + 2px);
//box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
//background-color: rgba(nb-theme(color-fg-highlight), 0.25);
}
}
@include nb-for-theme(corporate) { ::ng-deep {
.btn-icon.active { .outer-circle,
color: nb-theme(color-primary); .inner-circle {
border: none; display: none;
background-color: nb-theme(layout-bg);
}
}
@include media-breakpoint-down(is) {
ngx-temperature-dragger {
max-width: 250px;
::ng-deep .power-bg {
width: 4rem;
height: 4rem;
font-size: 3rem;
} }
}
.slider-value-container .value { label {
font-size: 3rem; padding: 0;
&.humidity::before {
right: -2rem;
font-size: 2rem;
} }
}
}
@include media-breakpoint-down(xs) {
.btn-icon {
width: 3.25rem;
height: 3.25rem;
i {
font-size: 1.75rem;
}
}
nb-tabset ::ng-deep ul { .text {
padding: 0 0.5rem; border: 1px solid transparent;
a { font-size: 2.5rem;
padding: 1.25rem 1rem; padding: 0.5rem;
margin: 0;
color: nb-theme(text-hint-color);
}
input:checked ~ .text {
border-color: nb-theme(color-primary-default);
border-radius: nb-theme(card-border-radius);
color: nb-theme(text-primary-color);
} }
} }
} }