ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/header.html

   1 <!--
   2   ================================================================================
   3   eCOMP Portal SDK
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   -->
  20 <div style="position: relative; z-index: 999;">
  21     <div class="headerContainer" id="headerContainer" ng-show="{{showHeader}}">
  22         <div style="position: relative; z-index: 999;">
  23             <div class="headerContainer" id="headerContainer">
  24                 <div id="megaMenuContainer" class="megaMenuContainer" style="margin-top: 0; overflow: visible;">
  25                     <!--for mega Menu-->
  26                     <!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu -->
  27                     <div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false" >
  28                         <div style="float:left;width:100%;"parent-tab menu-items="megaMenuDataObject" active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'>
  29                             <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" style="height:55px;">
  30                                 <div style="float:left">
  31                                     <li class="megamenu__item" style="line-height:55px;" ng-click="returnToPortal()">
  32                                        <div></div>
  33                                         <strong style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" >ECOMP Portal</strong>
  34                                     </li>
  35                                     <div menu-tabs mega-menu="true" tab-name="item.text" menu-item="item"
  36                                          active-menu="activeClickMenu.x"
  37                                          ng-repeat="item in megaMenuDataObject"
  38                                          style="font-size: 18px;"
  39                                          ng-mousedown="loadFavorites()">
  40                                         <div parentmenu-tabs sub-menu="true" ng-show="activeClickMenu.x.active && item.active"
  41                                              menu-items="activeClickMenu.x.children">
  42
  43                               <!-- Second level menu -->
  44                                             <div menu-tabs sub-menu="true" tab-name="subItem.text"
  45                                                  tab-url="subItem.url"  menu-item="subItem"
  46                                                  ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'" active-menu="activeClickSubMenu.x"
  47                                                  sub-item-active="{{subItem.active}}" style="float:left;" aria-label="{{subItem.text}}"
  48                                                  ng-mouseenter="submenuLevelAction(subItem.text,subItem.column)"
  49                                                  ng-mouseleave="submenuLevelAction(subItem.text,subItem.column)"
  50                                                  ng-click="submenuLevelAction(subItem.text,subItem.column)"  >
  51                                                 <i ng-if="subItem.text=='Favorites'" id="favorite-star"
  52                                                    class="icon-star favorites-icon-active">
  53                                                 </i>
  54                                                                                         </div>
  55                                                 <div class="sub__menu" ng-mouseleave="activeClickSubMenu.x.active=false" >
  56                                                     <ul ng-show="activeClickSubMenu.x.active"  role="menubar" class="columns">
  57                                                         <!-- Third level menu -->
  58                                                         <div menu-tabs
  59                                                              menu-item="subItem"
  60                                                              class="columns-div"
  61                                                              ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'"
  62                                                              ng-show="activeClickSubMenu.x.active">
  63
  64                                                             <i id="favorite-selector-third-level"
  65                                                                ng-show="isUrlFavorite(subItem.menuId)==false"
  66                                                                class="icon-star favorites-icon-inactive"
  67                                                                ng-if="subItem.url.length > 1">
  68                                                             </i>
  69                                                             <i id="favorite-selector-third-level"
  70                                                                ng-show="isUrlFavorite(subItem.menuId)"
  71                                                                class="icon-star favorites-icon-active"
  72                                                                ng-if="subItem.url.length > 1">
  73                                                             </i>
  74                                                                                                                         <span class="title" aria-label="{{subItem.text}}"
  75                                                                   ng-click="goToUrl(subItem)">{{subItem.text}}</span>
  76                                                             <!-- Fourth level menus -->
  77                                                             <div att-links-list="">
  78                                                                 <i id="favorite-selector-fourth-level"
  79                                                                    class="icon-star favorites-icon-inactive"
  80                                                                    ng-show="isUrlFavorite(tabValue.menuId)==false"
  81                                                                    ng-if="tabValue.url.length > 1">
  82
  83                                                                 </i>
  84                                                                 <i id="favorite-selector-fourth-level"
  85                                                                    class="icon-star favorites-icon-active"
  86                                                                    ng-show="isUrlFavorite(tabValue.menuId)"
  87                                                                    ng-if="tabValue.url.length > 1">
  88
  89                                                                 </i>
  90                                                                                     <span role="menuitem" att-links-list-item=""
  91                                                                       ng-repeat="tabValue in subItem.children"
  92                                                                       ng-click="goToUrl(tabValue)"
  93                                                                       att-accessibility-click="13,32"
  94                                                                       ng-class="{'disabled': tabValue.disabled}">{{tabValue.text}}</span>
  95                                                             </div>
  96                                                             <hr ng-show="!$last"/>
  97                                                         </div>
  98                                                     </ul>
  99                                                                         <!-- Favorites level menu -->
 100                                                     <div class="favorites-window" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()">
 101                                                         <div id="favorites-menu-items" ng-show="showFavorites">
 102                                                             <div ng-repeat="subItem in favoritesMenuItems"
 103                                                                  att-links-list=""
 104                                                                  style='display: inline'>
 105                                                                 <i id="favorite-selector-favorites-list"
 106                                                                    class="icon-star favorites-icon-active"
 107                                                                 >
 108                                                                 </i>
 109                                                                 <a id="favorites-list" aria-label="{{subItem.text}}"
 110                                                                    ng-click="goToUrl(subItem)"
 111                                                                    style="margin-left: 3px; margin-right: 20px; text-decoration: none; color: #666666;">
 112                                                                     {{subItem.text}}
 113                                                                 </a>
 114                                                             </div>
 115                                                             <div>
 116                                                                 <br>
 117                                                                 <p style='font-weight: 400; font-family: Arial !important;
 118                                                                                                                             font-size: 18px; text-align: center; background-color: lightgray;
 119                                                                                                                             width: 400px; margin-left: 25%; margin-right: 25%;'>
 120                                                                     Manage favorites on ECOMP Portal.
 121                                                                 </p>
 122                                                             </div>
 123                                                         </div>
 124                                                         <!-- Favorites when empty -->
 125                                                         <div id="favorites-empty" ng-show="emptyFavorites" class="favorites-window-empty">
 126                                                             <div>
 127                                                                 <img src="app/fusion/external/ebz/images/no_favorites_star.png">
 128                                                                 <p class='favoritesLargeText'>No Favorites</p>
 129                                                                 <p class='favoritesNormalText'>Manage favorites on ECOMP Portal.</p>
 130                                                             </div>
 131                                                         </div>
 132                                                     </div>
 133                                                 </div>
 134                                             </div>
 135                                         </div>
 136                                     </div >
 137                                     <li class="megamenu__item" style="line-height:55px;" ng-if="loadMenufail">
 138                                         <strong style="font-weight: 400 !important; font-family: Arial !important; font-size: 18px;" >Unable to load menus</strong>
 139                                     </li>
 140                                     <div  style="float:right">
 141                                             <li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" >
 142                                                 <div  popover="loginSnippet.html"  aria-label="Login Snippet"
 143                                                       referby="loginSnippet" att-accessibility-click="13,32" popover-style="\" popover-placement="below" style="width: 200px;">
 144                                                     <div class="ion-android-person login-snippet-icon" style="display:inline-block"></div>
 145                                                     <div class="login-snippet-text" style="display: inline-block; font-size:12px; margin-left:5px;overflow: hidden; max-height: 31px; overflow: hidden; max-height: 31px;   max-width:120px; padding-top: 0px; margin-top: 0px; white-space: nowrap;">{{userFirstName}}</div>
 146                                                 </div>
 147                                             </li>
 148                                             <li class="megamenu__item" style="width:120px;">&nbsp;</li>
 149                                     </div>
 150
 151                                 </div>
 152
 153                             </div>
 154                         </div>
 155                         <div style="clear: both"></div>
 156                     </div>
 157                 </div>
 158             </div>
 159         </div>
 160     </div>
 161 </div>
 162 <script type="text/ng-template" id="loginSnippet.html">
 163     <div style="line-height: normal; right: 167px; min-height: 200px; height: auto; width: auto; " ng-controller="loginSnippetCtrl" >
 164         <div id="reg-header-snippet">
 165             <div class="reg-profilePicture" style="min-height: 215px; width: auto; " id="reg-profile-links">
 166                 <div id="reg-profileImage">
 167                     <div style="clear: both; height: 80px; position: relative; width: 80px;">
 168                         <span style="  background-position: -1px -1px; height: 81px;left: 0;position: absolute;top: 0;width: 81px;">&nbsp;</span>
 169                     </div>
 170                 </div>
 171                 <div id="reg-logout-div">
 172                     <a class="reg-logout-btn" href="logout.htm">Log Out</a>
 173                 </div>
 174             </div>
 175             <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
 176                 <ul class="reg-Details-table" style="list-style: none;">
 177                     <li><div class="reg-userName-table"><div id="reg-userName-table-row"><div id="reg-userName-table-cell"><h3 class="att-global-fonts" style="font-size:18px !important;" id="reg-userName">{{userProfile.fullName}}&nbsp;</h3><span class="visuallyhidden">.</span></div></div></div></li>
 178                     <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">EMAIL<span class="visuallyhidden">:</span></span></div></li>
 179                     <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">{{userProfile.email}}<span class="visuallyhidden">.</span></span></div></li>
 180                     <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">User ID<span class="visuallyhidden">:</span></span></div></li>
 181                     <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">{{userProfile.orgUserId}}<span class="visuallyhidden"></span></span></div></li>
 182                 </ul>
 183             </div>
 184         </div>
 185     </div>
 186 </script>