mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 09:50:13 +01:00
refactor(iot): temperature widget
This commit is contained in:
Sergey Andrievskiy
parent
ce019a1bc5
commit
030d2a1802
4 changed files with 80 additions and 155 deletions
|
|
@ -1,5 +1,12 @@
|
|||
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 { ThemeModule } from '../../@theme/theme.module';
|
||||
|
|
@ -31,6 +38,7 @@ import { FormsModule } from '@angular/forms';
|
|||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NgxEchartsModule,
|
||||
],
|
||||
declarations: [
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
//@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
position: relative;
|
||||
|
|
@ -20,8 +19,8 @@
|
|||
}
|
||||
|
||||
.circle {
|
||||
fill: nb-theme(color-bg);
|
||||
stroke: nb-theme(color-success);
|
||||
fill: nb-theme(background-basic-color-4);
|
||||
stroke: nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.temperature-bg {
|
||||
|
|
@ -38,18 +37,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 2px solid nb-theme(separator);
|
||||
@include nb-for-theme(cosmic) {
|
||||
//background-color: lighten(nb-theme(layout-bg), 2%);
|
||||
border: none;
|
||||
}
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
position: absolute;
|
||||
width: 5.25rem;
|
||||
height: 5.25rem;
|
||||
background-color: nb-theme(card-bg);
|
||||
background-color: nb-theme(card-background-color);
|
||||
border-radius: 50%;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
|
|
@ -61,44 +56,22 @@
|
|||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 3rem;
|
||||
color: nb-theme(color-fg-heading);
|
||||
border: 2px solid nb-theme(separator);
|
||||
color: nb-theme(text-basic-color);
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
|
||||
&:hover {
|
||||
//background-color: lighten(nb-theme(card-bg), 5%);
|
||||
background-color: nb-theme(color-basic-hover);
|
||||
color: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
//background-color: darken(nb-theme(card-bg), 5%);
|
||||
background-color: nb-theme(color-basic-default);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: nb-theme(color-fg);
|
||||
&.off:not(:hover) {
|
||||
color: nb-theme(text-hint-color);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
[fillColors]="colors.temperature">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
|
||||
<div class="value temperature">
|
||||
<div class="value temperature h1">
|
||||
{{ temperatureOff ? '--' : (temperature | ngxRound) }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
|
|
@ -19,21 +19,20 @@
|
|||
</ngx-temperature-dragger>
|
||||
</div>
|
||||
|
||||
<div [(ngModel)]="temperatureMode" ngbRadioGroup data-toggle="buttons"
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
|
||||
</label>
|
||||
</div>
|
||||
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
|
||||
<nb-radio value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="fan">
|
||||
<i class="nb-loop-circled"></i>
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Humidity">
|
||||
|
|
@ -44,28 +43,27 @@
|
|||
[fillColors]="colors.temperature">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
|
||||
<div class="value humidity">
|
||||
<div class="value humidity h1">
|
||||
{{ humidityOff ? '--' : (humidity | ngxRound) }}
|
||||
</div>
|
||||
</div>
|
||||
</ngx-temperature-dragger>
|
||||
</div>
|
||||
|
||||
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons"
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
|
||||
</label>
|
||||
</div>
|
||||
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
|
||||
<nb-radio value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="fan">
|
||||
<i class="nb-loop-circled"></i>
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
ngx-temperature-dragger {
|
||||
margin-top: -1.5rem;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
|
@ -43,34 +43,24 @@
|
|||
|
||||
.value {
|
||||
position: relative;
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 4rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
margin: 0;
|
||||
|
||||
&.temperature::before {
|
||||
position: absolute;
|
||||
content: '°';
|
||||
top: 0;
|
||||
right: -1.25rem;
|
||||
right: -0.85rem;
|
||||
}
|
||||
|
||||
&.humidity::before {
|
||||
position: absolute;
|
||||
content: '%';
|
||||
bottom: 0.5rem;
|
||||
right: -2.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
top: 3px;
|
||||
right: -1.6rem;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: nb-theme(color-fg);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
&.off {
|
||||
.value {
|
||||
color: nb-theme(color-fg);
|
||||
|
|
@ -88,82 +78,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding: 1.25rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
nb-radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.btn-icon.active {
|
||||
color: nb-theme(color-fg-heading);
|
||||
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);
|
||||
}
|
||||
}
|
||||
nb-radio {
|
||||
flex: 0 0 auto;
|
||||
width: calc(3.5rem + 2px);
|
||||
height: calc(3.5rem + 2px);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.btn-icon.active {
|
||||
color: nb-theme(color-primary);
|
||||
border: 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;
|
||||
::ng-deep {
|
||||
.outer-circle,
|
||||
.inner-circle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-value-container .value {
|
||||
font-size: 3rem;
|
||||
&.humidity::before {
|
||||
right: -2rem;
|
||||
font-size: 2rem;
|
||||
label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.btn-icon {
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
nb-tabset ::ng-deep ul {
|
||||
padding: 0 0.5rem;
|
||||
a {
|
||||
padding: 1.25rem 1rem;
|
||||
.text {
|
||||
border: 1px solid transparent;
|
||||
font-size: 2.5rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue