ecomp-portal-FE/client/app/views/header/header.tpl.html

   1 <!--
   2   ================================================================================
   3   eCOMP Portal
   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 <style type="text/css">
  21
  22     .att-popover .pop-over-caret.pop-over-caret--below{
  23         left: 5%;
  24         color:#fff;
  25     }
  26     .att-popover .pop-over-caret.pop-over-caret-border--below{
  27         left: 5%;
  28     }
  29
  30     .popover-demo.att-popover{
  31         float: left;
  32         top:    44px;
  33     }
  34     .reg-profileDetails{
  35         outline:none !important;
  36     }
  37     #reg-header-snippet .reg-profileDetails {
  38         padding: 0px;
  39         min-height: 150px;
  40     }
  41     #reg-header-snippet .reg-profileDetails .reg-userEmail-label .reg-userEmail-label-spn {
  42          color: #0574ac; font-size: 13px; font-weight: bold;
  43     }
  44     #reg-header-snippet .reg-profileDetails .reg-userRole-label .reg-userRole-label-spn {
  45         color: #0574ac;font-size: 13px; font-weight: bold;
  46     }
  47
  48 </style>
  49 <div class="header-section">
  50     <div class="headerContainer" id="headerContainer">
  51     <div id="megaMenuContainer" class="megaMenuContainer">
  52         <div>
  53 <!--for mega Menu-->
  54 <!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu -->
  55             <div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false">
  56                 <div class="megaMenuDataObject" parent-tab menu-items="megaMenuDataObject"
  57                      active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'>
  58                     <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" class="parentmenu-tabs">
  59                         <div class="menu-section">
  60 <!-- TITLE -->
  61                             <li class="megamenu__item" style="line-height:55px;" onclick="window.location = 'applicationsHome'">
  62                                 <span id="logo-image"  class="logo-image"></span>
  63                                 <span id="portal-title" class="portal-title" >OpenECOMP Portal</span>
  64                             </li>
  65 <!-- MENUS -->              <!-- MENUS -->
  66                             <div id="menu-tabs-mega-menu"
  67                                  menu-tabs mega-menu="true"
  68                                  tab-name="item.text"
  69                                  menu-item="item"
  70                                  ng-mousedown="loadFavorites()"
  71                                  active-menu="activeClickMenu.x"
  72                                  ng-repeat="item in megaMenuDataObject" style="font-size: 18px;">
  73                                 <div id="parentmenu-tabs" parentmenu-tabs sub-menu="true"
  74                                      ng-show="activeClickMenu.x.active && item.active"
  75                                      menu-items="activeClickMenu.x.children">
  76
  77 <!-- Second level menu -->          <!-- Second level menu -->
  78                                     <div id="second-level-menus" menu-tabs sub-menu="true"
  79                                          menu-item="subItem" tab-name="subItem.text" tab-url="subItem.url"
  80                                          ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'"
  81                                          active-menu="activeClickSubMenu.x"
  82                                          sub-item-active="{{subItem.active}}" style="float:left;"
  83                                          aria-label="{{subItem.text}} | orderBy : 'column'"
  84                                          ng-mousemove="submenuLevelAction(subItem.text,subItem.column)"
  85                                          ng-if="item.text!='Help' && item.text!='Support'"
  86                                          >
  87                                         <i ng-if="subItem.text=='Favorites'" id="favorite-star" data-size="large"
  88                                            class="ion-star favorites-icon-active">
  89                                         </i>
  90                                     </div>
  91                                     <div id="second-level-menus-help" menu-tabs sub-menu="true"
  92                                          menu-item="subItem"
  93                                          ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'"
  94                                          ng-if="item.text=='Help' || item.text=='Support'"
  95                                          >
  96                                         <span ng-click="goToUrl(subItem)">{{subItem.text}}</span>
  97                                     </div>
  98
  99
 100                                         <div class="sub__menu" >
 101                                             <ul ng-show="activeClickSubMenu.x.active"  role="menubar" class="header-columns">
 102 <!-- Third level menu -->                       <!-- Third level menu -->
 103                                                 <div id="third-level-menus" class="header-columns-div"
 104                                                      ng-hide='favoritesWindow || hideMenus'
 105                                                      menu-tabs menu-item="subItem"
 106                                                      ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'"
 107                                                      ng-show="activeClickSubMenu.x.active" >
 108                                                     <i id="level3-star-inactive-{{subItem.menuId}}" ng-cloak
 109                                                        class="ion-star level3-favorites-icon-inactive"  data-size="large"
 110                                                        data-ng-click="setAsFavoriteItem($event, subItem.menuId)"
 111                                                        ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)==false">
 112                                                     </i>
 113                                                     <i id="level3-star-active-{{subItem.menuId}}" ng-cloak
 114                                                        ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)"
 115                                                        class="ion-star favorites-icon-active ng-cloak"  data-size="large"
 116                                                        data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
 117                                                       >
 118                                                     </i>
 119                                                     <span class="title"
 120                                                           aria-label="{{subItem.text | elipsis: 50}}"
 121                                                           ng-click="goToUrl(subItem)">{{subItem.text}}</span>
 122 <!-- Fourth level menus -                         <!-- Fourth level menus -->
 123                                                     <div class ="header-level4-div" att-links-list="" ng-repeat="tabValue in subItem.children" >
 124                                                             <i id="level4-star-inactive-{{tabValue.menuId}}" ng-cloak
 125                                                                class="ion-star level4-favorites-icon-inactive"
 126                                                                data-ng-click="setAsFavoriteItem($event, tabValue.menuId)"
 127                                                                ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)==false">
 128                                                             </i>
 129                                                             <i id="level4-star-active-{{tabValue.menuId}}" ng-cloak
 130                                                                class="ion-star favorites-icon-active"
 131                                                                data-ng-click="removeAsFavoriteItem($event, tabValue.menuId)"
 132                                                                ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)">
 133
 134                                                             </i>
 135
 136                                                             <span ng-click="goToUrl(tabValue)"
 137                                                                   role="menuitem" att-links-list-item=""
 138                                                                   style="display: inline; padding-left: 8px"
 139                                                                   att-accessibility-click="13,32"
 140                                                                   title="{{tabValue.text}}"
 141                                                                   ng-class="{'disabled': tabValue.disabled}">{{tabValue.text | elipsis: 50}}</span>
 142                                                         </div>
 143                                                     <div att-divider-lines ng-show="!$last"></div>
 144                                                     </div>
 145                                             </ul>
 146 <!-- Favorites level menu -->               <!-- Favorites level menu -->
 147                                             <div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()">
 148                                                 <div id="favorites-menu-items" att-links-list=""
 149                                                      ng-show="showFavorites"
 150                                                      ng-hide="hideMenus"
 151                                                      ng-repeat="subItem in favoritesMenuItems"
 152                                                      att-links-list="" >
 153
 154                                                     <div class="fav-links">
 155                                                         <i id="favorite-selector-favorites-list"
 156                                                            class="ion-star favorites-icon-active"
 157                                                            style="font-size:18px"
 158                                                            data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
 159                                                             ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">
 160                                                         </i>
 161                                                         <a id="favorites-list" aria-label="{{subItem.text}}" style="color: #000"
 162                                                            ng-click="goToUrl(subItem)">{{subItem.text}}
 163                                                         </a>
 164                                                     </div>
 165                                                 </div>
 166                                                 <!-- Favorites when empty -->
 167                                                 <div id="favorites-empty"
 168                                                      ng-show="emptyFavorites"
 169                                                      class="favorites-window-empty" >
 170                                                     <div>
 171                                                         <span id="fav-icon" class="ion-ios-star" ></span>
 172                                                         <p id="p-no-favs" class="largeText">No Favorites</p>
 173                                                         <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>
 174                                                     </div>
 175                                                 </div>
 176                                             </div>
 177                                         </div>
 178
 179                                 </div>
 180                             </div >
 181                         </div>
 182
 183                             <div class="login-section">
 184                                 <li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" >
 185                                                                         <div  popover="loginSnippet.html"  aria-label="Login Snippet" referby="loginSnippet" att-accessibility-click="13,32" popover-style="" popover-trigger="click" popover-placement="below" style="width: 150px; height: 55px; display: inline-flex">
 186                                         <div id="icon-user-small" class="ion-android-person login-snippet-icon"></div>
 187                                         <div id="login-snippet-text" class="login-snippet-text">{{header.firstName}}</div>
 188                                     </div>
 189                                 </li>
 190                             </div>
 191                         </div>
 192                     </div>
 193                     <div style="clear: both"></div>
 194                 </div>
 195             </div>
 196         </div>
 197     </div>
 198 </div>
 199 <script type="text/ng-template" id="loginSnippet.html">
 200         <div  ng-controller="loginSnippetCtrl" >
 201                 <div id="reg-header-snippet">
 202                         <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
 203                                 <ul class="reg-Details-table" style="list-style: none; border-bottom: 1px solid #bbb; padding-bottom: 20px;" >
 204                                         <li>
 205                         <div class="reg-userName-table">
 206                             <div id="reg-userName-table-row">
 207                                 <div id="reg-userName-table-cell">
 208                                     <h3 class="att-global-fonts" style="font-size:18px; line-height:1.6 !important;" id="reg-userName" >
 209                                     {{firstName}} {{lastName}}&nbsp;</h3>
 210                                     <span>&nbsp;</span>
 211                                 </div>
 212                             </div>
 213                         </div>
 214                     </li>
 215                                         <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">Email<span class="visuallyhidden">:
 216                     </span></span></div></li>
 217                                         <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
 218                         {{loginSnippetEmail}}</span></div></li>
 219                     <li>&nbsp;</li>
 220                                         <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">
 221                         User ID<span class="visuallyhidden">:</span></span></div></li>
 222                                         <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
 223                         {{loginSnippetUserId}}<span class="visuallyhidden"></span></span></div></li>
 224
 225                                 </ul>
 226                 <div id="reg-logout-div" style="padding-top: 8px;">
 227                                         <p>Last login: <span ng-bind="lastLogin"></span></p>
 228                     <div style="margin-top: 10px">
 229                     <a href="javascript:void(0)" id="allLogout" ng-click="openEditUserModal()" style="" class="new-button">
 230                                                 Profile
 231                                         </a>
 232                                         <a href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="new-button">
 233                                                 Log out
 234                                         </a>
 235                     </div>
 236                 </div>
 237             </div>
 238                 </div>
 239         </div>
 240
 241 </script>
 242 <script type="text/ng-template" id="notificationCtrl.html">
 243         <div style="line-height: normal; right: 167px; min-height: 122px; height: auto; width: auto; "  ng-controller="notificationCtrl" >
 244                 <div class="ng-scope">
 245                         <div id="notification" class="notificationBox ">
 246                                         <div class="notification-header">
 247                                                         <div style="float:left;">
 248                                                                 <p class="notification-heading">Notifications</p>
 249                                                         </div>
 250                                                                                 <!--    <div class="notification-close ng-isolate-scope" tabindex="0" ddh-accessibility-click="13,32" b2b-close-flyout="">
 251                                                                                                 <span class="icon-circle-action-close" aria-label="close button"></span>
 252                                                                                         </div>-->
 253                                                                                                         <div style="clear:both;"></div>
 254                                                                                                 </div>
 255                                                                                                 <div class="notification-main">
 256                                                                                                         <div style="height:113px;">
 257                                                                                                                 <div align="center" class="icon-information notification-info-icon"></div>
 258                                                                                                         </div>
 259                                                                                                 <div>
 260                                                                                                 <p class="notification-text">No New Notifications.</p>
 261                                                                                         </div>
 262                                                                                 </div>
 263                                                                                 <div class="notification-main ng-hide" ng-show="showList">
 264                                                                                         <!-- ngRepeat: notification in notifications track by $index -->
 265                                                                                 </div>
 266                                                                                 <div class="notification-footer">
 267                                                                                         <div class="notification-links">
 268                                                                                                 <div style="clear:both;"></div>
 269                                                                                         </div>
 270                                                                                 </div>
 271                                                                         <!--/div -->
 272
 273
 274                                                         </div>
 275                                                 </div>
 276         </div>
 277 </script>