catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17
  18 <nav class="top-nav">
  19
  20     <div class="asdc-app-title-wrapper">
  21         <a class="asdc-app-title">{{ 'PROJECT_TITLE'|translate }}</a>
  22         <div class="asdc-version"> v.{{version}}</div>
  23     </div>
  24
  25     <ul class="top-menu" *ngIf="!menuModel && topLvlMenu">
  26         <!-- no hierarchy & dropdowns mode -->
  27         <li *ngFor="let item of topLvlMenu.menuItems; let i = index"
  28             [ngClass]="{'selected': i == topLvlMenu.selectedIndex}">
  29             <a (click)="menuItemClick(topLvlMenu, item)"
  30                [attr.data-tests-id]="'main-menu-button-' + item.text.toLowerCase()">{{item.text}}</a>
  31         </li>
  32     </ul>
  33
  34     <ul class="top-menu" *ngIf="menuModel">
  35         <!-- with hierarchy & dropdowns mode -->
  36         <ng-container *ngFor="let groupItem of menuModel; let $index = index; let $last = last">
  37             <li [ngClass]="{'selected': $last }">
  38                 <a (click)="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])"
  39                    [attr.data-tests-id]="'breadcrumbs-button-' + $index">
  40                     {{groupItem.menuItems[groupItem.selectedIndex]?.text}}
  41                 </a>
  42             </li>
  43             <li class="triangle-dropdown"
  44                 [ngClass]="{'item-click': groupItem.itemClick}" (mouseover)="groupItem.itemClick = true">
  45                 <div class="triangle"><span class="sprite-new arrow-right"></span></div>
  46                 <ul class="sub-menu">
  47                     <li *ngFor="let ddItem of groupItem.menuItems; let $index2 = index"
  48                         (click)="menuItemClick(groupItem, ddItem)"
  49                         [ngClass]="{'selected': $index2 == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}"
  50                         [attr.data-tests-id]="'sub-menu-button-' + ddItem.text.toLowerCase()">
  51                         <span sdc-smart-tooltip="">{{ddItem.text}}</span>
  52                     </li>
  53                 </ul>
  54             </li>
  55         </ng-container>
  56     </ul>
  57
  58     <div class="top-search" [hidden]="hideSearch === true">
  59         <input type="text"
  60                class="search-text"
  61                placeholder="Search"
  62                [ngModel]="searchTerm"
  63                (ngModelChange)="emitSearchTerm($event)"
  64                data-tests-id="main-menu-input-search" />
  65         <span class="w-sdc-search-icon magnification"></span>
  66     </div>
  67
  68     <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user && user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
  69
  70 </nav>