Merge pull request #86 from ThingooKNI/ui-refactor

Refactor existing UI elements and update styling

angular.json

@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "src/variables.scss"],
             "scripts": []
           },
           "configurations": {

src/app/app.component.html

@@ -1,6 +1,4 @@
 <div class="mat-app-background">
   <app-header></app-header>
-  <div class="wrapper content-wrapper">
-    <router-outlet></router-outlet>
-  </div>
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.scss

@@ -2,10 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.content-wrapper {
-  flex: 1;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-}

src/app/app.module.ts

@@ -16,8 +16,12 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { UserProfileComponent } from './pages/user-profile/user-profile.component';
 import { AuthConfigModule } from './auth/auth-config.module';
 import { DeviceListComponent } from './pages/device-list/device-list.component';
-import { DeviceCardComponent } from './pages/device-list/device-card/device-card.component';
+import { DeviceCardComponent } from './shared/device-card/device-card.component';
 import { DeviceDetailsComponent } from './pages/device-details/device-details.component';
+import { SectionHeaderComponent } from './shared/section-header/section-header.component';
+import { DeviceIconComponent } from './shared/device-icon/device-icon.component';
+import { ValueRowComponent } from './shared/value-row/value-row.component';
+import { EntityCardComponent } from './shared/entity-card/entity-card.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +33,10 @@ import { DeviceDetailsComponent } from './pages/device-details/device-details.co
     DeviceListComponent,
     DeviceCardComponent,
     DeviceDetailsComponent,
+    SectionHeaderComponent,
+    DeviceIconComponent,
+    ValueRowComponent,
+    EntityCardComponent,
   ],
   imports: [
     MatToolbarModule,

src/app/pages/dashboard/dashboard.component.html

@@ -1 +1,7 @@
-<p>dashboard works!</p>
+<app-section-header
+  iconName="dashboard"
+  sectionTitle="Dashboard"
+></app-section-header>
+<div class="content-wrapper padded-content">
+  <h1>Nothing here yet!</h1>
+</div>

src/app/pages/device-details/device-details.component.html

@@ -1,45 +1,38 @@
-<div class="device-details-page-wrapper">
-  <mat-card class="device-details__section">
-    <div class="device-basic-info">
-      <div class="device-basic-info__first">
-        <div class="icon__wrapper">
-          <div class="icon"></div>
-        </div>
-        <div class="text__wrapper header-flex-column">
-          <h2>{{ device.displayName }}</h2>
-          <p>
-            {{ device.entities.length }}
-            <span class="gray-color">ENTITIES</span>
-          </p>
-        </div>
-      </div>
-      <div class="device-basic-info__second header-flex-column">
-        <div>
-          <span class="gray-color">KEY</span>
-          {{ device.key }}
-        </div>
-
-        <div>
-          <span class="gray-color">MAC</span>
-          {{ device.macAddress }}
-        </div>
-      </div>
-    </div>
-  </mat-card>
-  <mat-card class="device-entities device-details__section">
-    <h1 class="entities-title">Entities:</h1>
-    <div class="entity-list">
-      <mat-card
-        class="entity-item mat-elevation-z2"
-        *ngFor="let entity of device.entities"
-      >
-        <div class="icon"></div>
-        <h4>
-          {{ entity.displayName }}
-        </h4>
-        <h3>92 dB</h3>
-        <h5>13 minutes ago</h5>
-      </mat-card>
+<app-section-header
+  iconName="sensors"
+  [isExpanded]="true"
+  class="device-details__header"
+>
+  <div class="section basic-info">
+    <span class="device-name">
+      {{ device.displayName }}
+    </span>
+    <div class="device-entities">
+      {{ device.entities.length }}
+      <span class="entities-text">ENTITIES</span>
     </div>
-  </mat-card>
+  </div>
+  <div class="section spacer"></div>
+  <div class="section details-info">
+    <app-value-row
+      name="key"
+      [value]="device.key"
+      [nameWidth]="50"
+    ></app-value-row>
+    <app-value-row
+      name="mac"
+      [value]="device.macAddress"
+      [nameWidth]="50"
+    ></app-value-row>
+  </div>
+</app-section-header>
+
+<div class="device-details__entities content-wrapper padded-content">
+  <h1 class="entities-header">Entities:</h1>
+  <div class="entities-list">
+    <app-entity-card
+      *ngFor="let entity of device.entities"
+      [entity]="entity"
+    ></app-entity-card>
+  </div>
 </div>

src/app/pages/device-details/device-details.component.scss

@@ -1,100 +1,52 @@
-.device-details-page-wrapper {
-  width: 100vw;
-  max-width: 1000px;
-
-  mat-card.device-details__section {
-    padding: calc(16px + 1.5vw) calc(16px + 1.5vw);
-  }
-}
-
-.entity-list {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  gap: 20px;
-}
-
-.gray-color {
-  color: lightgray;
-}
-
-.device-entities {
-  margin-top: 12px;
-}
-
-.device-basic-info {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .header-flex-column {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  p {
-    margin: 0px;
-  }
-
-  &__first {
-    display: grid;
-    grid-template-columns: 65px calc(100% - 65px);
-    margin-right: 4vw;
-
-    .text__wrapper {
-      margin-left: 5px;
+@import "~src/variables.scss";
+
+.device-details {
+  &__header {
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10px;
     }
 
-    h2 {
-      margin-bottom: 0px;
-      font-size: 28px;
+    .basic-info {
+      .device-name {
+        font-size: 26px;
+        font-weight: 300;
+      }
+
+      .device-entities {
+        font-size: 18px;
+        font-weight: 500;
+        color: darken($color: $thingoo-text, $amount: 20%);
+
+        .entities-text {
+          margin-left: 3px;
+          color: darken($color: $thingoo-text, $amount: 40%);
+        }
+      }
     }
-  }
 
-  &__second {
-    span {
-      font-size: 18px;
-      font-weight: 500;
-      width: 45px;
-      display: inline-block;
+    .spacer {
+      width: 6vw;
     }
-    p {
-      font-size: 18px;
+
+    .details-info {
+      gap: 8px;
     }
   }
-}
-
-.entity-item {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  width: 120px;
 
-  &::before {
-    content: " ";
-    background-color: rgba($color: #fff, $alpha: 0.07);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-  }
+  &__entities {
+    .entities-header {
+      color: darken($color: $thingoo-text, $amount: 10%);
+      font-weight: 400;
+      margin-bottom: $section-padding;
+    }
 
-  h4 {
-    margin: 8px 0;
-  }
-  h3 {
-    margin-bottom: 8px;
+    .entities-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $elements-grid-gap;
+    }
   }
 }
-
-.icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background-color: lightgray;
-}

src/app/pages/device-list/device-list.component.html

@@ -1,8 +1,15 @@
-<div class="device-list-page-wrapper">
-  <mat-card class="no-devices" *ngIf="devicesList.length == 0">
-    <h1>You have no devices at this moment.</h1>
-  </mat-card>
-  <div class="device-list">
+<app-section-header
+  sectionTitle="Devices"
+  iconName="build"
+  sectionSubtitle="See which devices are currently connected."
+>
+</app-section-header>
+
+<div class="device-list content-wrapper padded-content">
+  <div class="device-list__content">
+    <h1 class="device-list__text" *ngIf="devicesList.length == 0">
+      You have no devices at this moment.
+    </h1>
     <app-device-card
       *ngFor="let device of devicesList"
       [device]="device"

src/app/pages/device-list/device-list.component.scss

@@ -1,18 +1,15 @@
+@import "~src/variables.scss";
+
 .device-list {
-  &-page-wrapper {
-    width: 100vw;
-    max-width: 1000px;
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $elements-grid-gap;
   }
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 20px;
-}
-
-.no-devices {
-  text-align: center;
+  &__text {
+    color: darken($color: $thingoo-text, $amount: 10%);
+  }
 }