Revize 25c55833

Re #8801 - Stylování dashboardu
+ Add styles for dashboard

src/app/dashboard/components/dashboard.component.html

@@ -1 +1 @@
 <app-nav-bar></app-nav-bar>
 
 <div class="container dashboard">
-  <div class="row">
-    <div class="col-md-6"></div>
-    <div class="col-md-6 text-right">
-      <p-button label="Add unit" icon="pi pi-cog" (onClick)="insertUnitPopup()"></p-button>
-    </div>
-  </div>
+<!--  <div class="row">-->
+<!--    <div class="col-md-6"></div>-->
+<!--    <div class="col-md-6 text-right">-->
+<!--      <p-button label="Add unit" icon="pi pi-cog" (onClick)="insertUnitPopup()"></p-button>-->
+<!--    </div>-->
+<!--  </div>-->
 <p-accordion>
     <p-accordionTab *ngFor="let unit of units">
       <p-header [className]="'dashboard-unit-wrapper'">
         <div [className]="'row dashboard-unit'">
-          <div class="col-md-4">{{ unit.unit.description}}</div>
-          <div class="col-md-8 text-right">
+          <div class="col-md-8"><h3>{{ unit.unit.description}}</h3></div>
+          <div class="col-md-4 text-right">
             <p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]"></p-button>
-            <p-button label="Add sensor" icon="pi pi-cog" (onClick)="insertSensorPopup($event, unit.unit)"></p-button>
-            <p-button label="Edit unit" icon="pi pi-cog" (onClick)="editUnitPopup($event, unit.unit)"></p-button>
-            <p-button label="Delete unit" icon="pi pi-cog" (onClick)="deleteUnit($event, unit.unit)"></p-button>
+            <p-splitButton label="Add sensor" (onClick)="insertSensorPopup($event, unit.unit)" icon="pi pi-plus-circle" (onDropdownClick)="showItems($event, unit.unit)" [model]="items" styleClass="p-button-warning"></p-splitButton>
           </div>
         </div>
       </p-header>

src/app/dashboard/components/dashboard.component.ts

@@ -102 +102 @@
   showItems($event: any, unit: Unit) {
     $event.stopPropagation();
     this.items = [
-      {label: 'Add sensor', icon: 'pi pi-refresh', command: () => {
+      {label: 'Edit unit', icon: 'pi pi-cog', command: () => {
           event.stopPropagation();
-          this.insertSensorPopup($event, unit);
+          this.editUnitPopup($event, unit);
         }},
       {label: 'Delete unit', icon: 'pi pi-times', command: () => {
           event.stopPropagation();

src/app/dashboard/components/sensors/sensors.component.html

@@ -1 +1 @@
 <div class="row">
   <div class="col-md-5">
-    {{ sensor.sensorName }} | {{ sensor.sensorId }}
+    <div class="dashboard-sensor-heading-wrapper">
+      <h4>{{ sensor.sensorName }} | {{ sensor.sensorId }}</h4>
+    </div>
   </div>
   <div class="col-md-7 text-right">
-    <p-button label="View graph" [routerLink]="['/dashboard/unit', unitId, 'sensor', sensor.sensorId]" title="Sensor" icon="pi pi-chart-line"></p-button>
-    <p-button label="Edit sensor" icon="pi pi-cog" (onClick)="editSensor($event, sensor)"></p-button>
-    <p-button label="Delete sensor" icon="pi pi-cog" (onClick)="deleteSensor($event, sensor)"></p-button>
+    <button pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unitId, 'sensor', sensor.sensorId]" title="Sensor" icon="pi pi-chart-line"></button>
+    <div class="dashboard-button-separator"></div>
+    <button pButton type="button" label="Edit sensor" icon="pi pi-cog" (click)="editSensor($event, sensor)" [className]="'p-button-warning'"></button>
+    <button pButton type="button" label="Delete sensor" icon="pi pi-times" (click)="deleteSensor($event, sensor)" [className]="'p-button-danger'"></button>
   </div>
 </div>
 

src/app/shared/nav-bar/components/nav-bar.component.html

@@ -11 +11 @@
               <a class="nav-link" [routerLink]="['/dashboard']"><h2>Dashboard</h2></a>
             </li>
             <li *ngIf="loggedUser?.userInfo?.rightsId == 0" class="nav-item">
-              <a class="nav-link" (click)="addUser()"><h2>Add user</h2></a>
+              <a class="nav-link" (click)="addUser()"><h2><i class="fas fa-user-plus"></i>&nbsp;Add user</h2></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" [routerLink]="['/add-unit']"><h2><i class="fas fa-folder-plus"></i>&nbsp;Add unit</h2></a>
             </li>
           </ul>
           <a class="navbar-brand" href="/">
             <h1>SensLog</h1>
-            <img class="navbar-logo" src="/assets/images/senslog.png" alt="Logo SensLog">
+            <img class="navbar-logo" src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
           </a>
           <ul class="navbar-nav right">
             <li class="nav-item">
-              <h2 class="nav-link">User:&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
+              <h2 class="nav-link"><i class="fas fa-user"></i>&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
             </li>
             <li class="nav-item">
-              <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2>Logout</h2></a>
+              <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</h2></a>
             </li>
           </ul>
         </div>

src/assets/scss/_dashboard.scss

@@ -7 +7 @@
 }
 
 .dashboard {
-  margin-top: 5px;
+  padding: $grid-gutter-width 0;
+
+  h3 {
+    margin: 0;
+    font-weight: $font-weight-bold;
+  }
+
+  h4 {
+    margin: 0;
+  }
 
   .p-accordion {
     .p-accordion-header {
       .p-accordion-header-link {
+        padding-top: $grid-gutter-width / 2;
+        padding-bottom: $grid-gutter-width / 2;
         color: #0B1226;
         background: #F2F2F2;
+      }
 
-        &:hover {
-          .p-button {
-            color: #0B1226;
-            background: #F2F2F2;
-          }
-        }
+      &:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+        color: #0B1226;
+        background: #BCBCBC;
       }
 
       &:not(.p-disabled).p-highlight  {
-        .p-button {
+        .p-accordion-header-link {
           color: #0B1226;
-          background: #F2F2F2;
-        }
-
-        &:hover {
-          .p-accordion-header-link {
-            color: #F2F2F2;
-            background: #0B1226;
-          }
+          background: #BCBCBC;
         }
+      }
 
-        .p-accordion-header-link {
-          color: #F2F2F2;
-          background: #0B1226;
-        }
+      .p-splitbutton-defaultbutton{
+        margin-left: $grid-gutter-width  / 2;
       }
     }
 
     .p-accordion-content {
-      color: #F2F2F2;
-      background: #0B1226;
+      padding: 0;
+      color: #0B1226;
+      background: #F2F2F2;
 
-      .p-button {
-        color: #0B1226;
-        background: #F2F2F2;
-      }
+      .ng-star-inserted {
+        &:nth-child(2n) .row {
+          background: #D3D3D3;
+        }
 
-      .p-accordion .p-accordion-header {
-        &:hover {
-          color: #F2F2F2;
-          background: #0B1226;
+        .row {
+          margin: 0;
+          padding: 5px 0;
+
+          @include hover-focus() {
+            cursor: pointer;
+            color: #0B1226;
+            background: #619CE2;
+          }
         }
       }
+
+      .p-button {
+        margin: 0 5px;
+        padding: 5px 7px;
+      }
     }
   }
 }
+
+.dashboard-sensor-heading-wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%
+}
+
+.dashboard-button-separator {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: bottom;
+  margin: 0 $grid-gutter-width / 2;
+  width: 2px;
+  height: 100%;
+  background: $secondary;
+}
+
+.p-dialog {
+  background: $primary
+}