Sidenav changes

.gitignore

@@ -98,7 +98,6 @@ src/frontend/packages/core/sass/custom.scss
 src/frontend/packages/core/assets/eula.html
 src/frontend/packages/core/assets/logo.png
 src/frontend/packages/core/assets/nav-logo.png
-src/frontend/packages/core/assets/nav-logo-icon.png
 src/frontend/packages/core/assets/login-bg.jpg
 src/frontend/packages/core/src/custom-import.module.ts
 src/frontend/packages/core/src/custom

src/frontend/packages/core/misc/custom/custom.yaml

@@ -6,7 +6,6 @@ files:
   login-bg.jpg: "assets/login-bg.jpg"
   logo.png: "assets/logo.png"
   nav-logo.png: "assets/nav-logo.png"
-  nav-logo-icon.png: "assets/nav-logo-icon.png"
   eula.html: "assets/eula.html" 
 
 folders:

src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.html

@@ -1,5 +1,5 @@
 <div class="dashboard__outer">
-  <mat-drawer-container class="dashboard">
+  <mat-drawer-container autosize class="dashboard">
     <mat-drawer #sidenav *ngIf="mainNavState$ | async as navState" class="dashboard__side-nav" [mode]="navState.mode"
       [opened]="navState.opened">
       <app-side-nav (changedMode)="redrawSideNav()" [iconMode]="navState.iconMode" [tabs]="sideNavTabs">

src/frontend/packages/core/src/features/dashboard/dashboard-base/dashboard-base.component.ts

@@ -74,8 +74,8 @@ export class DashboardBaseComponent implements OnInit, OnDestroy {
         } else {
           return {
             mode: state.sideNavPinned ? 'side' : 'over',
-            opened: state.sidenavOpen || false,
-            iconMode: state.sideNavPinned
+            opened: true,
+            iconMode: !state.sidenavOpen
           };
         }
       })

src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.html

@@ -4,15 +4,18 @@
       <div class="side-nav__top-inner">
         <div class="side-nav__logo" (click)="logoClicked.next(true)">
           <div class="side-nav__logo-img"></div>
-          <div class="side-nav__logo-icon-img"></div>
           <div class="side-nav__logo-text">{{ customizations.logoText || '' }}
           </div>
+          <button mat-icon-button (click)="toggleSidenav()">
+            <mat-icon class="side-nav__nav-toggle">menu</mat-icon>
+          </button>
         </div>
       </div>
     </div>
     <ul class="side-nav__items">
       <li *ngFor="let tab of tabs">
-        <a *ngIf="!tab.hidden || !(tab.hidden | async)" class="side-nav__item" [routerLink]="[tab.link]"
+        <a *ngIf="!tab.hidden || !(tab.hidden | async)" [matTooltip]="tab.label" matTooltipPosition="right"
+          [matTooltipDisabled]="!iconMode" class="side-nav__item" [routerLink]="[tab.link]"
           [routerLinkActive]="['side-nav__item--active']">
           <mat-icon class="side-nav__item-icon" [fontSet]="tab.matIconFont">{{ tab.matIcon }}</mat-icon> <span
             class="side-nav__item-label">{{ tab.label }}</span>

src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.scss

@@ -64,21 +64,14 @@ $icon-nav-width: 50px;
       text-align: center;
       text-transform: uppercase;
     }
-    &-img,
-    &-icon-img {
+    &-img {
+      background-image: url('/core/assets/nav-logo.png');
       background-position: center;
       background-repeat: no-repeat;
       background-size: contain;
       height: 100%;
-      position: absolute;
       width: 100%;
     }
-    &-img {
-      background-image: url('/core/assets/nav-logo.png');
-    }
-    &-icon-img {
-      background-image: url('/core/assets/nav-logo-icon.png');
-    }
   }
   &__top-inner {
     overflow: hidden;
@@ -103,6 +96,9 @@ $icon-nav-width: 50px;
     opacity: 1;
     white-space: nowrap;
   }
+  &__copyright-icon {
+    width: 0;
+  }
 }
 $transition-time: .2s;
 $transition-delay: .5s;
@@ -129,52 +125,76 @@ $transition-delay: .5s;
     &__top-inner {
       overflow-x: hidden;
     }
-  }
-  &:hover {
-    overflow: visible;
-    .side-nav {
-      &__inner {
-        position: fixed;
-        transition-delay: $transition-delay;
-        width: $nav-width;
-      }
-      &,
-      &__top,
-      &__item-icon,
-      &__item-label,
-      &__copyright,
-      &__logo-img,
-      &__copyright-icon,
-      &__logo-icon-img {
-        transition-delay: $transition-delay;
-      }
-      &__copyright-icon {
-        width: 0;
-      }
+    &__top {
+      width: $icon-nav-width;
     }
-  }
-  &:not(:hover) {
-    .side-nav {
-      &__top {
-        width: $icon-nav-width;
-      }
-      &__item-icon {
-        font-size: $side-nav-mat-icon-height-large;
-        height: $side-nav-mat-icon-height-large;
-        margin-right: 0;
-        width: $side-nav-mat-icon-height-large;
-      }
-      &__item-label,
-      &__copyright  {
-        opacity: 0;
-      }
-      &__logo-img {
-        width: 0;
-      }
-      &__copyright-icon,
-      &__logo-icon-img {
-        opacity: 1;
-      }
+    &__item-icon {
+      font-size: $side-nav-mat-icon-height-large;
+      height: $side-nav-mat-icon-height-large;
+      margin-right: 0;
+      width: $side-nav-mat-icon-height-large;
+    }
+    &__item-label,
+    &__copyright  {
+      opacity: 0;
+    }
+    &__logo-img {
+      width: 0;
+    }
+    &__copyright-icon,
+    &__logo-icon-img {
+      opacity: 1;
+    }
+    &__copyright-icon {
+      width: auto;
     }
   }
+  // This will allow hover nav
+  // &:hover {
+  //   overflow: visible;
+  //   .side-nav {
+  //     &__inner {
+  //       position: fixed;
+  //       transition-delay: $transition-delay;
+  //       width: $nav-width;
+  //     }
+  //     &,
+  //     &__top,
+  //     &__item-icon,
+  //     &__item-label,
+  //     &__copyright,
+  //     &__logo-img,
+  //     &__copyright-icon,
+  //     &__logo-icon-img {
+  //       transition-delay: $transition-delay;
+  //     }
+  //     &__copyright-icon {
+  //       width: 0;
+  //     }
+  //   }
+  // }
+  // &:not(:hover) {
+  //   .side-nav {
+  //     &__top {
+  //       width: $icon-nav-width;
+  //     }
+  //     &__item-icon {
+  //       font-size: $side-nav-mat-icon-height-large;
+  //       height: $side-nav-mat-icon-height-large;
+  //       margin-right: 0;
+  //       width: $side-nav-mat-icon-height-large;
+  //     }
+  //     &__item-label,
+  //     &__copyright  {
+  //       opacity: 0;
+  //     }
+  //     &__logo-img {
+  //       width: 0;
+  //     }
+  //     &__copyright-icon,
+  //     &__logo-icon-img {
+  //       opacity: 1;
+  //     }
+  //   }
+  // }
 }

src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss

@@ -5,6 +5,9 @@
   $side-nav-bottom-color: map-get($app-theme, subdued-color);
 
   .side-nav {
+    &__nav-toggle {
+      color: mat-color($side-nav-colors, text);
+    }
     &__inner {
       background-color: mat-color($side-nav-colors, background);
     }

src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.ts

@@ -7,6 +7,7 @@ import { ActionHistoryDump } from '../../../../../store/src/actions/action-histo
 import { AppState } from '../../../../../store/src/app-state';
 import { Customizations, CustomizationsMetadata } from '../../../core/customizations.types';
 import { ISubHeaderTabs } from '../../../shared/components/page-subheader/page-subheader.types';
+import { ToggleSideNav } from '../../../../../store/src/actions/dashboard-actions';
 
 
 export const SIDENAV_COPYRIGHT = new InjectionToken<string>('Optional copyright string for side nav');
@@ -52,6 +53,10 @@ export class SideNavComponent implements OnInit {
   }
   private isIconMode = true;
 
+  public toggleSidenav() {
+    this.store.dispatch(new ToggleSideNav());
+  }
+
   // Button is not always visible on load, so manually push through an event
   logoClicked: BehaviorSubject<any> = new BehaviorSubject(true);
 

src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html

@@ -1,7 +1,8 @@
-<app-page-header [hideSideNavButton]="true" [logoutOnly]="true">
+<app-page-header [logoutOnly]="true">
   Stratos
 </app-page-header>
 
-<app-no-content-message class="full-screen-centered" [icon]="'device_hub'" [firstLine]="'There are no registered endpoints'" [secondLine]="{
+<app-no-content-message class="full-screen-centered" [icon]="'device_hub'"
+  [firstLine]="'There are no registered endpoints'" [secondLine]="{
   text: 'In order to use Stratos, you must connect to a registered service endpoint. Registered service endpoints are provided by your system administrator. Please contact your administrator about registering endpoints.'
-}"></app-no-content-message>
+}"></app-no-content-message>

src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html

@@ -5,7 +5,9 @@
         <app-stratos-title></app-stratos-title>
         <p class="uaa-wizard__intro">Welcome to Stratos</p>
         <p>
-          Stratos is an Open Source Web-based UI (Console) for managing Cloud Foundry. It allows users and administrators to both manage applications running in the Cloud Foundry cluster and perform cluster management tasks.
+          Stratos is an Open Source Web-based UI (Console) for managing Cloud Foundry. It allows users and
+          administrators to both manage applications running in the Cloud Foundry cluster and perform cluster management
+          tasks.
         </p>
         <p>Before accessing Stratos for the first time some configuration information is required.</p>
 
@@ -14,7 +16,8 @@
     </app-step>
     <app-step title="UAA Endpoint" [valid]="validateUAAForm | async" [onNext]="uaaFormNext">
       <div class="uaa-wizard__form">
-        <p class="uaa-wizard__form-section">Please enter the following information to allow Stratos to authenticate with your UAA:</p>
+        <p class="uaa-wizard__form-section">Please enter the following information to allow Stratos to authenticate with
+          your UAA:</p>
         <form class="uaa-wizard__form" [formGroup]="uaaForm" class="stepper-form">
           <div class="uaa-wizard__form-block">
             <mat-form-field>
@@ -28,7 +31,8 @@
               <input matInput formControlName="clientSecret" placeholder="Client Secret">
             </mat-form-field>
           </div>
-          <p class="uaa-wizard__form-section">Enter the username and password of an admin user (this is used to retrieve scope metadata)</p>
+          <p class="uaa-wizard__form-section">Enter the username and password of an admin user (this is used to retrieve
+            scope metadata)</p>
           <div class="uaa-wizard__form-block">
             <mat-form-field>
               <input matInput formControlName="adminUsername" placeholder="Admin Username">
@@ -40,8 +44,10 @@
           <!-- Single Sign-on -->
           <p class="uaa-wizard__form-section">UAA Single Sign On (SSO)</p>
           <div class="uaa-wizard__form-block">
-            <mat-checkbox matInput formControlName="useSSO">Use SSO (Use the UAA's UI to login rather than the Stratos login UI)</mat-checkbox>
-            <p *ngIf="uaaForm.value.useSSO" class="uaa-wizard__sso-block">You must ensure that the client specified above has its 'redirect_uri' configured to include the Stratos SSO Callback URL:
+            <mat-checkbox matInput formControlName="useSSO">Use SSO (Use the UAA's UI to login rather than the Stratos
+              login UI)</mat-checkbox>
+            <p *ngIf="uaaForm.value.useSSO" class="uaa-wizard__sso-block">You must ensure that the client specified
+              above has its 'redirect_uri' configured to include the Stratos SSO Callback URL:
               <code>{{ clientRedirectURI }}</code>
             </p>
           </div>
@@ -50,7 +56,8 @@
       </div>
     </app-step>
     <app-step title="Stratos Admin Scope" [onNext]="uaaScopeNext">
-      <app-loading-page [isLoading]="applyingSetup$" alert="Saving configuration" text="Please wait - this will take a few moments">
+      <app-loading-page [isLoading]="applyingSetup$" alert="Saving configuration"
+        text="Please wait - this will take a few moments">
         <div class="uaa-wizard__form">
           <p>Please select the UAA scope to use to identify users as Stratos Administrators:</p>
           <form class="stepper-form">
@@ -67,6 +74,6 @@
     </app-step>
   </app-steppers>
 </div>
-<app-page-header hideSideNavButton="true" hideMenu="true">
+<app-page-header hideMenu="true">
   <h1>Stratos Setup</h1>
-</app-page-header>
+</app-page-header>

src/frontend/packages/core/src/shared/components/page-header/page-header.component.html

@@ -4,11 +4,6 @@
       <div class="page-header">
         <div>
           <mat-toolbar class="page-header__toolbar" color="primary">
-            <div class="page-header__nav-toggle-wrapper">
-              <button mat-icon-button *ngIf="!hideSideNavButton" (click)="toggleSidenav()">
-                <mat-icon class="page-header__nav-toggle">menu</mat-icon>
-              </button>
-            </div>
             <div class="page-header__breadcrumbs" *ngIf="breadcrumbDefinitions">
               <ng-container *ngFor="let breadcrumbDef of breadcrumbDefinitions">
                 <span class="page-header__breadcrumb page-header__breadcrumb-link" *ngIf="breadcrumbDef.routerLink"

src/frontend/packages/core/src/shared/components/page-header/page-header.component.ts

@@ -117,10 +117,6 @@ export class PageHeaderComponent implements OnDestroy, AfterViewInit {
     }) || breadcrumbs[0];
   }
 
-  toggleSidenav() {
-    this.store.dispatch(new ToggleSideNav());
-  }
-
   logout() {
     this.store.dispatch(new Logout());
   }