UI: continue new-menu polish — toolbar tweaks, menu-link/router-tabs styling, user-settings model bump

ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss

@@ -35,6 +35,7 @@
     }
 
     .mdc-icon-button {
+      --mat-icon-color: #fff;
       background-color: #162C41;
 
       &:hover {

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.html

@@ -16,5 +16,5 @@
 
 -->
 <button mat-icon-button #showNotificationButton (click)="showNotification($event, showNotificationButton)">
-  <mat-icon class="material-icons" aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications</mat-icon>
+  <tb-icon aria-hidden="false" [matBadge]="(count$ | async)" [matBadgeHidden]="!(count$ | async)" matBadgeColor="warn" matBadgeSize="small">notifications_none</tb-icon>
 </button>

ui-ngx/src/app/modules/home/components/router-tabs.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-1 flex-col" style="width: 100%;">
+<div class="mt-2 flex flex-1 flex-col" style="width: 100%;">
   <div class="flex flex-row" style="width: 100%;">
     @if (!routerOutlet?.activatedRouteData?.hideTabs && !hideCurrentTabs && (tabs$ | async).length > 1) {
       <nav mat-tab-nav-bar mat-stretch-tabs="false" class="tb-router-tabs flex-1" [tabPanel]="tabPanel">

ui-ngx/src/app/modules/home/components/router-tabs.component.scss

@@ -19,11 +19,14 @@
   height: 100%;
 
   .mat-mdc-tab-nav-bar.tb-router-tabs {
+    --mat-tab-container-height: 38px;
+    --mat-tab-divider-height: 1px;
+    --mat-tab-divider-color: rgba(0, 0, 0, 0.12);
     a.mat-mdc-tab-link {
       display: inline-flex;
       align-items: center;
       overflow: hidden;
-      line-height: 40px;
+      line-height: 38px;
       min-width: 200px;
       border-bottom: none;
       .mat-icon {

ui-ngx/src/app/modules/home/home.component.scss

@@ -127,6 +127,10 @@
     height: 56px;
     min-height: 56px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    .mat-toolbar-tools {
+      height: 56px;
+      padding: 0;
+    }
     h1 {
       font-size: 24px !important;
       font-weight: 400 !important;

ui-ngx/src/app/modules/home/home.component.ts

@@ -26,13 +26,13 @@ import {
   ViewChild
 } from '@angular/core';
 import { skip, startWith, Subject } from 'rxjs';
-import { Store } from '@ngrx/store';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { select, Store } from '@ngrx/store';
+import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { PageComponent } from '@shared/components/page.component';
 import { AppState } from '@core/core.state';
-import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { getCurrentAuthState, selectUserSettingsProperty } from '@core/auth/auth.selectors';
 import { MediaBreakpoints } from '@shared/models/constants';
 import screenfull from 'screenfull';
 import { MatSidenav } from '@angular/material/sidenav';
@@ -43,6 +43,7 @@ import { ActiveComponentService } from '@core/services/active-component.service'
 import { RouterTabsComponent } from '@home/components/router-tabs.component';
 import { FormBuilder } from '@angular/forms';
 import { isDefinedAndNotNull } from '@core/utils';
+import { ActionPreferencesPutUserSettings } from '@core/auth/auth.actions';
 
 @Component({
     selector: 'tb-home',
@@ -98,6 +99,11 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
     this.sidenavMode = isGtSm ? 'side' : 'over';
     this.sidenavOpened = isGtSm;
     this.sidenavDesktop.set(isGtSm);
+    this.store.pipe(select(selectUserSettingsProperty('menuCollapsed'))).pipe(
+      take(1)
+    ).subscribe((collapsed: boolean) => {
+      this.sidenavCollapsed.set(collapsed);
+    });
 
     this.breakpointObserver
       .observe(MediaBreakpoints['gt-sm'])
@@ -139,6 +145,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
 
   toggleSidenav() {
     this.sidenavCollapsed.update(state => !state);
+    this.store.dispatch(new ActionPreferencesPutUserSettings({ menuCollapsed: this.sidenavCollapsed() }));
   }
 
   toggleFullscreen() {

ui-ngx/src/app/modules/home/menu/menu-link.component.scss

@@ -14,22 +14,23 @@
  * limitations under the License.
  */
 
-@import '../../../../scss/constants';
+@import "constants";
 
 :host ::ng-deep {
   a.is-new::after {
+    position: absolute;
+    right: 16px;
+    top: 4px;
     content: "NEW";
-    font-size: 12px;
-    letter-spacing: .03125em;
-    transform: translate(6px, -6px);
-    display: inline-block;
+    background: rgba(0, 0, 0, 0.03);
+    color: rgba(0, 0, 0, 0.76);
+    font-size: 11px;
+    letter-spacing: .25px;
+    line-height: 16px;
+    padding: 2px 8px;
     border-radius: 10px;
-    line-height: 22px;
-    height: 20px;
-    background: #fff;
-    color: $tb-primary-color;
-    padding-left: 6px;
-    padding-right: 6px;
-    margin-left: -6px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    opacity: 1;
+    transition: opacity $sidenav-anim-timing;
   }
 }

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -34,6 +34,9 @@
         span.mdc-button__label {
           opacity: 0;
         }
+        &.is-new::after {
+          opacity: 0;
+        }
       }
     }
   }

ui-ngx/src/app/shared/components/breadcrumb.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-breadcrumb flex flex-1 flex-row">
+<div class="tb-breadcrumb flex flex-1 flex-row gap-2">
   @if (lastBreadcrumb$ | async; as breadcrumb) {
     <h1 class="flex-1 gt-sm:!hidden">
       <ng-container
@@ -23,8 +23,8 @@
       </ng-container>
     </h1>
   }
-  @for (breadcrumb of breadcrumbs$ | async; track trackByBreadcrumbs; let isLast = $last) {
-    <span class="flex flex-row lt-md:!hidden">
+  @for (breadcrumb of breadcrumbs$ | async; track trackByBreadcrumbs; let isLast = $last; let i = $index; let total = $count;) {
+    <span class="flex flex-row gap-2 lt-md:!hidden">
       @switch (isLast) {
         @case (false) {
           <a [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
@@ -41,7 +41,7 @@
           </span>
         }
       }
-	    <span class="divider" [class.!hidden]="isLast"> > </span>
+	    <span class="divider" [class.last-divider]="i === total - 2" [class.!hidden]="isLast"> > </span>
 	  </span>
   }
 </div>

ui-ngx/src/app/shared/components/breadcrumb.component.scss

@@ -17,9 +17,11 @@
   min-width: 0;
 
   .tb-breadcrumb {
-    font-size: 18px;
+    font-size: 16px;
+    line-height: 20px;
     font-weight: 400;
     overflow: hidden;
+    color: rgba(0,0,0,0.76);
 
     h1,
     a,
@@ -51,7 +53,13 @@
     }
 
     .divider {
-      padding: 0 20px;
+      padding: 0;
+      width: 20px;
+      text-align: center;
+      opacity: .75;
+      &.last-divider {
+        opacity: 1;
+      }
     }
   }
 }

ui-ngx/src/app/shared/models/user-settings.models.ts

@@ -16,6 +16,7 @@
 
 export interface UserSettings {
   openedMenuSections?: string[];
+  menuCollapsed?: boolean;
   notDisplayConnectivityAfterAddDevice?: boolean;
   notDisplayInstructionsAfterAddEdge?: boolean;
   notDisplayConfigurationAfterAddMobileBundle?: boolean;