VBV-2166 - Align Navigation style to Tango/vRA

Change-Id: I57208066547471e2a3aab79c5934359f3a05bd44 Reviewed-on: https://bellevue-ci.eng.vmware.com:8080/45160 Closures-Verified: jenkins <[email protected]> Upgrade-Verified: jenkins <[email protected]> PG-Verified: jenkins <[email protected]> Bellevue-Verified: jenkins <[email protected]> CS-Verified: jenkins <[email protected]> Reviewed-by: Iveta Ilieva <[email protected]>
ekmixon · Sep 27, 2018 · a9ceeda · a9ceeda
1 parent 75af97a
commit a9ceeda
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 161 deletions.
diff --git a/ui/app/src/messages/admiral.en.json b/ui/app/src/messages/admiral.en.json
@@ -1415,6 +1415,7 @@
   "advanced": "Advanced",
   "noSelection": "No Selection",
   "noItems": "No items",
+  "items": "items",
   "buildNumber": "Build number",
   "errors": {
     "hostIp": "Value must be hostname or IP address.",

diff --git a/ui/ng-app/src/app/components/grid-view/grid-view.component.html b/ui/ng-app/src/app/components/grid-view/grid-view.component.html
@@ -9,8 +9,8 @@
   ~ conditions of the subcomponent's license, as noted in the LICENSE file.
   -->
 
-<div class="title">
-    <ng-content select="[title]"></ng-content> <span class="label label-info">{{totalItemsCount}} items</span>
+<div class="title" *ngIf="!hideTitle">
+    <ng-content select="[title]"></ng-content> <span class="label label-info">{{totalItemsCount}} {{'items' | i18n}}</span>
 </div>
 
 <div class="toolbar">
@@ -25,17 +25,17 @@
               <div *ngIf="showOccurrenceSelector" class="search-form-occurrence select">
                   <select id="occurrenceSelector" formControlName="occurrenceSelector"
                           [(ngModel)]="occurrenceSelection">
-                      <option value="all">{{ 'search.occurrence.all' | i18n }}</option>
+                      <option value="all">{{'search.occurrence.all' | i18n}}</option>
                   </select>
               </div>
               <div class="search-form-input">
                 <input type="text" formControlName="searchGridInput"
-                     [placeholder]="searchPlaceholder" (keyup.enter)="onSearchGrid($event)" />
+                     [placeholder]="searchPlaceholder" (keyup.enter)="onSearchGrid($event)"/>
               </div>
           </div>
       </form>
       <span class="separator"></span>
-      <button class="btn btn-icon btn-link" title="{{ 'refresh' | i18n }}"
+      <button class="btn btn-icon btn-link" title="{{'refresh' | i18n}}"
               (click)="refresh()"><clr-icon shape="refresh" size="16"></clr-icon></button>
     </div>
   </div>
@@ -52,7 +52,7 @@
       </ng-template>
     </span>
     <span *ngIf="items.length === 0 && !loading" class="content-empty">
-      {{ "noItems" | i18n }}
+      {{"noItems" | i18n}}
     </span>
   </div>
   <div *ngIf="loading" class="central-block-loading">

diff --git a/ui/ng-app/src/app/components/grid-view/grid-view.component.ts b/ui/ng-app/src/app/components/grid-view/grid-view.component.ts
@@ -35,6 +35,7 @@ export class GridViewComponent implements OnInit, OnChanges {
   @Input() searchSuggestionProperties: Array<string>;
   @Input() searchQueryOptions: any;
   @Input() projectLink: string;
+  @Input() hideTitle: boolean = false;
 
   @ViewChildren('cardItem') cards;
   @ViewChild('itemsHolder') itemsHolder;

diff --git a/ui/ng-app/src/app/directives/shared/allow-navigation.directive.ts b/ui/ng-app/src/app/directives/shared/allow-navigation.directive.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved.
  *
  * This product is licensed to you under the Apache License, Version 2.0 (the "License").
  * You may not use this product except in compliance with the License.
@@ -9,24 +9,24 @@
  * conditions of the subcomponent's license, as noted in the LICENSE file.
  */
 
-import { AuthService } from './../../utils/auth.service';
-import { Directive, Input, Inject, ElementRef, Renderer } from '@angular/core';
-import { Utils } from './../../utils/utils';
-import { OnChanges } from '@angular/core';
-import { FT } from './../../utils/ft';
+
+import { Directive, Input, ElementRef, Renderer, OnChanges } from '@angular/core';
+import { AuthService } from '../../utils/auth.service';
+import { Utils } from '../../utils/utils';
+
 
 @Directive({
   selector: '[allowNavigation]'
 })
 export class AllowNavigationDirective implements OnChanges {
-
   @Input()
   roles: string[];
 
   @Input()
   projectSelfLink: string;
 
-  constructor(private el: ElementRef, private renderer: Renderer, private authService: AuthService) {
+  constructor(private el: ElementRef, private renderer: Renderer,
+              private authService: AuthService) {
   }
 
   ngOnChanges(changes) {

diff --git a/ui/ng-app/src/app/views/administration/administration.component.html b/ui/ng-app/src/app/views/administration/administration.component.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved.
   ~
   ~ This product is licensed to you under the Apache License, Version 2.0 (the "License").
   ~ You may not use this product except in compliance with the License.
@@ -9,15 +9,18 @@
   ~ conditions of the subcomponent's license, as noted in the LICENSE file.
   -->
 
-<nav class="sidenav">
-  <section class="sidenav-content">
-      <a class="nav-link" allowNavigation [roles]="identityManagementRouteRestriction" routerLink="identity-management" routerLinkActive="active">{{ "navigation.identityManagement" | i18n }}</a>
-      <a class="nav-link" allowNavigation [roles]="projectsRouteRestriction" routerLink="projects" routerLinkActive="active">{{ "navigation.projects" | i18n }}</a>
-      <a class="nav-link" allowNavigation [roles]="registriesRouteRestriction" routerLink="registries" routerLinkActive="active">{{ "navigation.registries" | i18n }}</a>
-      <a *ngIf="isHbrEnabled" class="nav-link" allowNavigation [roles]="configurationRouteRestriction" routerLink="configuration" routerLinkActive="active">{{ "navigation.configuration" | i18n }}</a>
-      <a class="nav-link" allowNavigation [roles]="logsRouteRestriction" routerLink="logs" routerLinkActive="active">{{ "navigation.logs" | i18n }}</a>
-  </section>
-</nav>
+<clr-vertical-nav>
+    <a clrVerticalNavLink allowNavigation [roles]="identityManagementRouteRestriction"
+       routerLink="identity-management" routerLinkActive="active">{{ "navigation.identityManagement" | i18n }}</a>
+    <a clrVerticalNavLink allowNavigation [roles]="projectsRouteRestriction"
+       routerLink="projects" routerLinkActive="active">{{ "navigation.projects" | i18n }}</a>
+    <a clrVerticalNavLink allowNavigation [roles]="registriesRouteRestriction"
+       routerLink="registries" routerLinkActive="active">{{ "navigation.registries" | i18n }}</a>
+    <a *ngIf="isHbrEnabled" clrVerticalNavLink allowNavigation [roles]="configurationRouteRestriction"
+       routerLink="configuration" routerLinkActive="active">{{ "navigation.configuration" | i18n }}</a>
+    <a clrVerticalNavLink allowNavigation [roles]="logsRouteRestriction"
+       routerLink="logs" routerLinkActive="active">{{ "navigation.logs" | i18n }}</a>
+</clr-vertical-nav>
 
 <div class="content-area">
     <clr-alert *ngIf="alertMessage"

diff --git a/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.html b/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.html
@@ -17,10 +17,10 @@
                      (onCancel)="deleteCanceled()">
 </delete-confirmation>
 
-<grid-view #gridView [serviceEndpoint]="serviceEndpoint" [projectLink]="projectLink">
+<grid-view #gridView [serviceEndpoint]="serviceEndpoint" [projectLink]="projectLink" [hideTitle]="true">
   <div toolbar>
-    <button class="btn btn-link addHost" (click)="onAddHost()"><i
-        class="fa fa-plus"></i>{{ "clusters.resources.addHostButton" | i18n }}</button>
+      <button class="btn btn-sm btn-secondary addHost" (click)="onAddHost()"
+          ><clr-icon shape="plus"></clr-icon> {{"clusters.resources.addHostButton" | i18n | uppercase}}</button>
   </div>
 
   <ng-template let-item="item">

diff --git a/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.scss b/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.scss
@@ -1,3 +1,7 @@
+// Copyright (c) 2017-2018 VMware, Inc. All Rights Reserved.
+// This software is released under MIT license.
+// The full license information can be found in LICENSE in the root directory of this project.
+
 :host /deep/ .grid-content {
   position: relative;
   top: 0;