Initial OpenECOMP Portal commit
[portal.git] / ecomp-portal-FE / client / app / views / header / header.tpl.html
diff --git a/ecomp-portal-FE/client/app/views/header/header.tpl.html b/ecomp-portal-FE/client/app/views/header/header.tpl.html
new file mode 100644 (file)
index 0000000..1928cb6
--- /dev/null
@@ -0,0 +1,277 @@
+<!--
+  ================================================================================
+  eCOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<style type="text/css">
+
+    .att-popover .pop-over-caret.pop-over-caret--below{
+        left: 5%;
+        color:#fff;
+    }
+    .att-popover .pop-over-caret.pop-over-caret-border--below{
+        left: 5%;
+    }
+
+    .popover-demo.att-popover{
+        float: left;
+        top:    44px;
+    }
+    .reg-profileDetails{
+        outline:none !important;
+    }
+    #reg-header-snippet .reg-profileDetails {
+        padding: 0px;
+        min-height: 150px;
+    }
+    #reg-header-snippet .reg-profileDetails .reg-userEmail-label .reg-userEmail-label-spn {
+         color: #0574ac; font-size: 13px; font-weight: bold;
+    }
+    #reg-header-snippet .reg-profileDetails .reg-userRole-label .reg-userRole-label-spn {
+        color: #0574ac;font-size: 13px; font-weight: bold;
+    }
+
+</style>
+<div class="header-section">
+    <div class="headerContainer" id="headerContainer">
+    <div id="megaMenuContainer" class="megaMenuContainer">
+        <div>
+<!--for mega Menu-->
+<!-- Mega Menu parent-tab directive with three models menu-items, active-sub-menu, active-menu -->
+            <div id="topMenu" class="top-megamenu" ng-mouseleave="activeClickSubMenu.x.active=false; activeClickMenu.x.active=false">
+                <div class="megaMenuDataObject" parent-tab menu-items="megaMenuDataObject"
+                     active-sub-menu='activeClickSubMenu.x' active-menu='activeClickMenu.x'>
+                    <div parentmenu-tabs mega-menu="true" menu-items="megaMenuDataObject" class="parentmenu-tabs">
+                        <div class="menu-section">
+<!-- TITLE -->
+                            <li class="megamenu__item" style="line-height:55px;" onclick="window.location = 'applicationsHome'">
+                                <span id="logo-image"  class="logo-image"></span>
+                                <span id="portal-title" class="portal-title" >OpenECOMP Portal</span>
+                            </li>
+<!-- MENUS -->              <!-- MENUS -->
+                            <div id="menu-tabs-mega-menu"
+                                 menu-tabs mega-menu="true"
+                                 tab-name="item.text"
+                                 menu-item="item"
+                                 ng-mousedown="loadFavorites()"
+                                 active-menu="activeClickMenu.x"
+                                 ng-repeat="item in megaMenuDataObject" style="font-size: 18px;">
+                                <div id="parentmenu-tabs" parentmenu-tabs sub-menu="true"
+                                     ng-show="activeClickMenu.x.active && item.active"
+                                     menu-items="activeClickMenu.x.children">
+
+<!-- Second level menu -->          <!-- Second level menu -->
+                                    <div id="second-level-menus" menu-tabs sub-menu="true"
+                                         menu-item="subItem" tab-name="subItem.text" tab-url="subItem.url"
+                                         ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'"
+                                         active-menu="activeClickSubMenu.x"
+                                         sub-item-active="{{subItem.active}}" style="float:left;"
+                                         aria-label="{{subItem.text}} | orderBy : 'column'"
+                                         ng-mousemove="submenuLevelAction(subItem.text,subItem.column)"
+                                         ng-if="item.text!='Help' && item.text!='Support'"
+                                         >
+                                        <i ng-if="subItem.text=='Favorites'" id="favorite-star" data-size="large"
+                                           class="ion-star favorites-icon-active">
+                                        </i>
+                                    </div>
+                                    <div id="second-level-menus-help" menu-tabs sub-menu="true"
+                                         menu-item="subItem" 
+                                         ng-repeat="subItem in activeClickMenu.x.children | orderBy : 'column'"                                  
+                                         ng-if="item.text=='Help' || item.text=='Support'"
+                                         >
+                                        <span ng-click="goToUrl(subItem)">{{subItem.text}}</span>
+                                    </div>
+                                                                       
+
+                                        <div class="sub__menu" >
+                                            <ul ng-show="activeClickSubMenu.x.active"  role="menubar" class="header-columns">
+<!-- Third level menu -->                       <!-- Third level menu -->
+                                                <div id="third-level-menus" class="header-columns-div"
+                                                     ng-hide='favoritesWindow || hideMenus'
+                                                     menu-tabs menu-item="subItem"
+                                                     ng-repeat="subItem in activeClickSubMenu.x.children | orderBy : 'column'"
+                                                     ng-show="activeClickSubMenu.x.active" >
+                                                    <i id="level3-star-inactive-{{subItem.menuId}}" ng-cloak
+                                                       class="ion-star level3-favorites-icon-inactive"  data-size="large"
+                                                       data-ng-click="setAsFavoriteItem($event, subItem.menuId)"
+                                                       ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)==false">
+                                                    </i>
+                                                    <i id="level3-star-active-{{subItem.menuId}}" ng-cloak
+                                                       ng-if="subItem.url.length > 1 && isUrlFavorite(subItem.menuId)"
+                                                       class="ion-star favorites-icon-active ng-cloak"  data-size="large"
+                                                       data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
+                                                      >
+                                                    </i>
+                                                    <span class="title"
+                                                          aria-label="{{subItem.text | elipsis: 50}}"
+                                                          ng-click="goToUrl(subItem)">{{subItem.text}}</span>
+<!-- Fourth level menus -                         <!-- Fourth level menus -->
+                                                    <div class ="header-level4-div" att-links-list="" ng-repeat="tabValue in subItem.children" >
+                                                            <i id="level4-star-inactive-{{tabValue.menuId}}" ng-cloak
+                                                               class="ion-star level4-favorites-icon-inactive"
+                                                               data-ng-click="setAsFavoriteItem($event, tabValue.menuId)"
+                                                               ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)==false">
+                                                            </i>
+                                                            <i id="level4-star-active-{{tabValue.menuId}}" ng-cloak
+                                                               class="ion-star favorites-icon-active"
+                                                               data-ng-click="removeAsFavoriteItem($event, tabValue.menuId)"
+                                                               ng-if="tabValue.url.length > 1 && isUrlFavorite(tabValue.menuId)">
+
+                                                            </i>
+
+                                                            <span ng-click="goToUrl(tabValue)"
+                                                                  role="menuitem" att-links-list-item=""
+                                                                  style="display: inline; padding-left: 8px"
+                                                                  att-accessibility-click="13,32"
+                                                                  title="{{tabValue.text}}"
+                                                                  ng-class="{'disabled': tabValue.disabled}">{{tabValue.text | elipsis: 50}}</span>
+                                                        </div>
+                                                    <div att-divider-lines ng-show="!$last"></div>
+                                                    </div>
+                                            </ul>
+<!-- Favorites level menu -->               <!-- Favorites level menu -->
+                                            <div class="header-columns-div" ng-show='favoritesWindow' ng-mouseleave="hideFavoritesWindow()">
+                                                <div id="favorites-menu-items" att-links-list=""
+                                                     ng-show="showFavorites"
+                                                     ng-hide="hideMenus"
+                                                     ng-repeat="subItem in favoritesMenuItems"
+                                                     att-links-list="" >
+
+                                                    <div class="fav-links">
+                                                        <i id="favorite-selector-favorites-list"
+                                                           class="ion-star favorites-icon-active"
+                                                           style="font-size:18px"
+                                                           data-ng-click="removeAsFavoriteItem($event, subItem.menuId)"
+                                                            ng-mousedown="removeAsFavoriteItem($event, subItem.menuId)">
+                                                        </i>
+                                                        <a id="favorites-list" aria-label="{{subItem.text}}" style="color: #000"
+                                                           ng-click="goToUrl(subItem)">{{subItem.text}}
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                                <!-- Favorites when empty -->
+                                                <div id="favorites-empty"
+                                                     ng-show="emptyFavorites"
+                                                     class="favorites-window-empty" >
+                                                    <div>
+                                                        <span id="fav-icon" class="ion-ios-star" ></span>
+                                                        <p id="p-no-favs" class="largeText">No Favorites</p>
+                                                        <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                </div>
+                            </div >
+                        </div>
+
+                            <div class="login-section">
+                               <li id="bcLoginSnippet" class="megamenu__item" style="width: 140px;" >
+                                                                       <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">
+                                        <div id="icon-user-small" class="ion-android-person login-snippet-icon"></div>
+                                        <div id="login-snippet-text" class="login-snippet-text">{{header.firstName}}</div>
+                                    </div>
+                                </li>                                          
+                            </div>
+                        </div>
+                    </div>
+                    <div style="clear: both"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/ng-template" id="loginSnippet.html">
+       <div  ng-controller="loginSnippetCtrl" >
+               <div id="reg-header-snippet">
+                       <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
+                               <ul class="reg-Details-table" style="list-style: none; border-bottom: 1px solid #bbb; padding-bottom: 20px;" >
+                                       <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; line-height:1.6 !important;" id="reg-userName" >
+                                    {{firstName}} {{lastName}}&nbsp;</h3>
+                                    <span>&nbsp;</span>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                                       <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">Email<span class="visuallyhidden">:
+                    </span></span></div></li>
+                                       <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
+                        {{loginSnippetEmail}}</span></div></li>
+                    <li>&nbsp;</li>
+                                       <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">
+                        User ID<span class="visuallyhidden">:</span></span></div></li>
+                                       <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
+                        {{loginSnippetUserId}}<span class="visuallyhidden"></span></span></div></li>
+
+                               </ul>
+                <div id="reg-logout-div" style="padding-top: 8px;">
+                                       <p>Last login: <span ng-bind="lastLogin"></span></p>
+                    <div style="margin-top: 10px">
+                    <a href="javascript:void(0)" id="allLogout" ng-click="openEditUserModal()" style="" class="new-button">
+                                               Profile
+                                       </a>
+                                       <a href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="new-button">
+                                               Log out
+                                       </a>
+                    </div>
+                </div>
+            </div>
+               </div>
+       </div>
+
+</script>
+<script type="text/ng-template" id="notificationCtrl.html">
+       <div style="line-height: normal; right: 167px; min-height: 122px; height: auto; width: auto; "  ng-controller="notificationCtrl" >
+               <div class="ng-scope">
+                       <div id="notification" class="notificationBox ">
+                                       <div class="notification-header">
+                                                       <div style="float:left;">
+                                                               <p class="notification-heading">Notifications</p>
+                                                       </div>
+                                                                               <!--    <div class="notification-close ng-isolate-scope" tabindex="0" ddh-accessibility-click="13,32" b2b-close-flyout="">
+                                                                                               <span class="icon-circle-action-close" aria-label="close button"></span>
+                                                                                       </div>-->
+                                                                                                       <div style="clear:both;"></div>
+                                                                                               </div>
+                                                                                               <div class="notification-main">
+                                                                                                       <div style="height:113px;">
+                                                                                                               <div align="center" class="icon-information notification-info-icon"></div>
+                                                                                                       </div>
+                                                                                               <div>
+                                                                                               <p class="notification-text">No New Notifications.</p>
+                                                                                       </div>
+                                                                               </div>
+                                                                               <div class="notification-main ng-hide" ng-show="showList">
+                                                                                       <!-- ngRepeat: notification in notifications track by $index -->
+                                                                               </div>
+                                                                               <div class="notification-footer">
+                                                                                       <div class="notification-links">
+                                                                                               <div style="clear:both;"></div>
+                                                                                       </div>
+                                                                               </div>
+                                                                       <!--/div -->
+                                                                       
+                                                               
+                                                       </div>                                                                  
+                                               </div>
+       </div>
+</script>