From 1d960b96bc4b990980e56c602b507a7ca9a187ea Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 27 Feb 2020 12:16:58 +0200
Subject: [PATCH] UI improvements: href support for side menu

---
 ui-ngx/src/app/modules/home/home.component.ts | 12 ++--
 .../home/menu/menu-link.component.html        | 13 ++--
 .../home/menu/menu-toggle.component.html      | 19 +++---
 .../home/menu/side-menu.component.scss        | 66 +++++++++----------
 .../src/app/shared/models/time/time.models.ts |  2 +
 5 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
index 2028325b0e..fc5068a0c5 100644
--- a/ui-ngx/src/app/modules/home/home.component.ts
+++ b/ui-ngx/src/app/modules/home/home.component.ts
@@ -30,12 +30,14 @@ import { getCurrentAuthState, selectAuthUser, selectUserDetails } from '@core/au
 import { MediaBreakpoints } from '@shared/models/constants';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { Router } from '@angular/router';
-import * as screenfull from 'screenfull';
+import * as _screenfull from 'screenfull';
 import { MatSidenav } from '@angular/material/sidenav';
 import { AuthState } from '@core/auth/auth.models';
 import { WINDOW } from '@core/services/window.service';
 import { ISearchableComponent, instanceOfSearchableComponent } from '@home/models/searchable-component.models';
 
+const screenfull = _screenfull as _screenfull.Screenfull;
+
 @Component({
   selector: 'tb-home',
   templateUrl: './home.component.html',
@@ -60,8 +62,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   @ViewChild('searchInput') searchInputField: ElementRef;
 
-  // @ts-ignore
-  fullscreenEnabled = screenfull.enabled;
+  fullscreenEnabled = screenfull.isEnabled;
 
   authUser$: Observable<any>;
   userDetails$: Observable<User>;
@@ -125,15 +126,12 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
   }
 
   toggleFullscreen() {
-    // @ts-ignore
-    if (screenfull.enabled) {
-      // @ts-ignore
+    if (screenfull.isEnabled) {
       screenfull.toggle();
     }
   }
 
   isFullscreen() {
-    // @ts-ignore
     return screenfull.isFullscreen;
   }
 
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index e1780212b5..62bb29a7a6 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -15,9 +15,10 @@
     limitations under the License.
 
 -->
-<button mat-button
-  routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
-  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-  <span>{{section.name | translate}}</span>
-</button>
+<a class="mat-button" routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
+  <span class="mat-button-wrapper">
+    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+    <span>{{section.name | translate}}</span>
+  </span>
+</a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 76398df3ae..0a61a80de5 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,15 +15,16 @@
     limitations under the License.
 
 -->
-<button mat-button
-        routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}"
-  class="tb-button-toggle">
-  <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
-  <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
-  <span>{{section.name | translate}}</span>
-  <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
-        [ngClass]="{'tb-toggled' : sectionActive()}"></span>
-</button>
+<a class="mat-button tb-button-toggle"
+        routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
+  <span class="mat-button-wrapper">
+    <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
+    <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
+    <span>{{section.name | translate}}</span>
+    <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
+          [ngClass]="{'tb-toggled' : sectionActive()}"></span>
+  </span>
+</a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
   <li *ngFor="let page of section.pages">
     <tb-menu-link [section]="page"></tb-menu-link>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
index 732846fd97..ab1ed335de 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 :host {
   width: 100%;
 }
@@ -30,7 +31,8 @@
     border-bottom: 1px solid rgba(0, 0, 0, .12);
   }
 
-  button {
+  a.mat-button {
+    text-transform: uppercase;
     display: flex;
     width: 100%;
     max-height: 40px;
@@ -46,52 +48,46 @@
     cursor: pointer;
     border-radius: 0;
     &:hover {
+      border-bottom: none;
       background-color: rgba(255,255,255,0.08);
     }
+    &:focus {
+      border-bottom: none;
+    }
+    &.tb-active {
+      font-weight: 500;
+      background-color: rgba(255, 255, 255, .15);
+    }
 
     .mat-button-wrapper {
       width: 100%;
+      mat-icon {
+        margin-right: 8px;
+        margin-left: 0;
+      }
       span {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        &.tb-toggle-icon {
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
       }
     }
   }
 
-  button.tb-active {
-    font-weight: 500;
-    background-color: rgba(255, 255, 255, .15);
-  }
-
-  span.tb-toggle-icon {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-
-  mat-icon {
-    margin-right: 8px;
-    margin-left: 0;
-  }
-
-  .tb-menu-toggle-list button {
-    padding: 0 16px 0 32px;
-    font-weight: 500;
-    text-transform: none;
-    text-rendering: optimizeLegibility;
-  }
-
-  .tb-button-toggle .tb-toggle-icon {
-    display: inline-block;
-    width: 15px;
-    margin: auto 0 auto auto;
-    background-size: 100% auto;
-
-    transition: transform .3s, ease-in-out;
-  }
-
-  .tb-button-toggle .tb-toggle-icon.tb-toggled {
-    transform: rotateZ(180deg);
+  .tb-button-toggle {
+    .tb-toggle-icon {
+      display: inline-block;
+      width: 15px;
+      margin: auto 0 auto auto;
+      background-size: 100% auto;
+      transition: transform .3s, ease-in-out;
+      &.tb-toggled {
+        transform: rotateZ(180deg);
+      }
+    }
   }
 
   .tb-menu-toggle-list {
@@ -103,7 +99,7 @@
 
     transition-property: height;
 
-    button {
+    a.mat-button {
       padding: 0 16px 0 32px;
       font-weight: 500;
       text-transform: none !important;
diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts
index 2c214cb2b1..1437719947 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -110,7 +110,9 @@ export interface WidgetTimewindow {
 
 export function historyInterval(timewindowMs: number): Timewindow {
   const timewindow: Timewindow = {
+    selectedTab: TimewindowType.HISTORY,
     history: {
+      historyType: HistoryWindowType.LAST_INTERVAL,
       timewindowMs
     }
   };