From 030d2a1802074fac5cd4e2ef0fa3a08d51eda62f Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 18 Jun 2019 11:14:24 +0300
Subject: [PATCH] refactor(iot): temperature widget

---
 src/app/pages/dashboard/dashboard.module.ts   |  10 +-
 .../temperature-dragger.component.scss        |  49 ++------
 .../temperature/temperature.component.html    |  62 +++++-----
 .../temperature/temperature.component.scss    | 114 +++++-------------
 4 files changed, 80 insertions(+), 155 deletions(-)

diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
index 854e79cc..bd090903 100644
--- a/src/app/pages/dashboard/dashboard.module.ts
+++ b/src/app/pages/dashboard/dashboard.module.ts
@@ -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: [
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index e51e80d1..d77e99ce 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -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);
-    }
-  }
 }
diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
index fe34b752..0f972724 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.html
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -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>
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index c4b21669..6dd56d4d 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -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);
       }
     }
   }