2 ================================================================================
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
11 http://www.apache.org/licenses/LICENSE-2.0
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 ================================================================================
20 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
21 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
22 <%@ page isELIgnored ="false" %>
23 <%@ page import="org.openecomp.portalsdk.core.util.SystemProperties" %>
24 <link rel="stylesheet" type="text/css" href="static/ebz/header_new.css">
25 <script src= "static/ebz/js/attHeaderSnippet.js"></script>
26 <script src= "static/ebz/js/attHeader_new.js"></script>
27 <c:set var="menu" value="<%=session.getAttribute(SystemProperties.getProperty(SystemProperties.APPLICATION_MENU_ATTRIBUTE_NAME))%>"/>
35 color: rgb(191, 231, 239);
38 #headerChatIcon:hover {
39 background: url(static/images/headerChatIcon_hover.png) no-repeat -3px
43 .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox:hover
47 text-decoration: none;
50 /* .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox:focus{color:#bfe7fb;margin-top:-2px;text-decoration:none;outline:none} */
51 .headerContentContainer .primaryMenuContainer .headerIconContainer .popbox .openpopbox
61 -webkit-transition: all .3s ease-out;
62 -moz-transition: all .3s ease-out;
63 transition: all .3s ease-out
83 background-color: rgb(255, 255, 255);
86 <div style="position:relative; z-index:999;">
87 <div class="headerContainer" id="headerContainer" >
88 <div class="headerContentContainer">
89 <div class="primaryMenuContainer">
90 <div style="background: url(static/ebz/images/att_logo.png) no-repeat scroll -10px -10px transparent; !important;"></div>
91 <div class="attHomeContainer">
92 <div class="businessCenterR">
93 <a id="attBusinessCenter" href="">OpenECOMP Portal</a>
96 <div class="primaryMenuOptionsContainer" >
98 <div class="primaryMenuOption">
99 <a class="primaryMenuOptionLink" href="javascript:openSecondLevel('m')">Manage</a>
101 <div class="primaryMenuOption">
102 <a id="supportFirstLevel" class="primaryMenuOptionLink" href="javascript:openSecondLevel('s')">Support</a>
105 <div id="indicator" class="selectedOptionIndicator" style="display:none"></div>
107 <div class="headerIconContainer">
108 <%-- <div class="loginName" style="width:107px;">
109 <span class="popbox" >
110 <a style="color:#ffffff;display: block;min-width: 70px;max-width: 115;" class="openpopbox" href="#" >
111 <div id="headerLoginIcon" class="loginIcon"><span id="userIcon" style="font-size:19px;" class="icon-user"></span> </div>
112 <div id="headerNameEllipsis" class="ellipsis-header-name">${ociUserName}</div>
114 <div class="box1" style="line-height: normal; right: 167px; min-height: 200px; height: auto; width: 390px !important; display: none; top: 0px; left: -230.5px;" target="auth">
115 <div class="arrow" style="left: 230px;"></div>
116 <div id="reg-header-snippet">
117 <div class="reg-profilePicture" style="min-height: 215px;" id="reg-profile-links">
118 <div id="reg-profileImage">
119 <div style="clear: both; height: 80px; position: relative; width: 80px;" class="">
120 <img id="reg-userProfilePicture-id" style="height: 80px; width: 80px; float: left;" src="" alt="">
121 <span style=" background-position: -1px -1px; height: 81px;left: 0;position: absolute;top: 0;width: 81px;"> </span>
124 <div id="reg-myprofile-link">
125 <a href="">My Profile</a>
127 <div id="reg-companyProfile-link">
128 <a href="">Company Profile</a>
130 <div id="reg-logout-div">
131 <a class="reg-logout-btn" href="ebiz_logout.htm">Log Out</a>
134 <div tabindex="0" class="reg-profileDetails" id="reg-profiledetails-id">
135 <ul class="reg-Details-table">
136 <li><div class="reg-userName-table"><div id="reg-userName-table-row"><div id="reg-userName-table-cell"><h3 class="att-global-fonts" id="reg-userName">${ociUserName} </h3><span class="visuallyhidden">.</span></div></div></div></li>
137 <li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn">EMAIL<span class="visuallyhidden">:</span></span></div></li>
138 <li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">${email}<span class="visuallyhidden">.</span></span></div></li>
139 <li><div class="reg-userRole-label"><span class="reg-userRole-label-spn">PROFILE ID<span class="visuallyhidden">:</span></span></div></li>
140 <li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">${groupId}<span class="visuallyhidden">.</span></span></div></li>
141 <li><div class="reg-userCompany-label"><span class="reg-userCompany-spn"> ENTERPRISE NAME<span class="visuallyhidden">:</span></span></div></li>
142 <li><div class="reg-userCompany-value"><span class="reg-userCompany-spn">${serviceProviderId}<span class="visuallyhidden">.</span></span></div></li>
152 <!-- <div id="headerChatIcon" class='chatIcon' style="background: url(static/images/headerChatIcon.png) no-repeat -3px -3px;"></div>
153 <div class="chatBox">
154 <div class='arrow'></div>
155 <div class="chatBox-header">
156 <span class="chatBox-heading">Live Chat</span>
157 <i class="icon-erase circle_close_chat"></i>
164 <!-- HTML for the secondary menu for dashboard. -->
165 <div id="secondLevel" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
166 <div id="secondaryMenuContentContainer" class="secondaryMenuContentContainer" style="">
167 <c:forEach items="${menu}" var="menuItem">
168 <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
169 <a id="${menuItem.id}" href="${menuItem.action}" class="secondaryMenuOptionLink selectedSecondaryMenuOption">${menuItem.label}</a>
174 <c:forEach items="${menu}" var="menuItem">
175 <c:if test="${!empty menuItem.childMenus}">
176 <div id="thirdLevel${menuItem.id}" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
177 <div id="secondaryMenuContentContainer${menuItem.id}" class="secondaryMenuContentContainer" style="">
178 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
179 <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
180 <a id="${subMenuItem.id}" href="${subMenuItem.action}" class="thirdMenuOptionLink selectedSecondaryMenuOption">${subMenuItem.label}</a>
187 <%-- <c:forEach items="${menu}" var="menuItem">
188 <c:if test="${!empty menuItem.childMenus}">
189 <div id="thirdLevel${menuItem.id}" class="secondaryMenuContainer secondaryMenuContainerForDashboard" style="display:none;">
190 <div id="secondaryMenuContentContainer${menuItem.id}" class="secondaryMenuContentContainer" style="">
191 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
192 <div class="secondaryMenuOption" style="margin-left:20px; font-size:16px !important;">
193 <a id="${subMenuItem.id}" href="${subMenuItem.action}" class="thirdMenuOptionLink selectedSecondaryMenuOption">${subMenuItem.label}</a>
203 <c:forEach items="${menu}" var="menuItem">
204 <c:if test="${!empty menuItem.childMenus}">
205 <c:forEach items="${menuItem.childMenus}" var="subMenuItem">
206 <div id="megaMenu${subMenuItem.id}" class="megaMenuContainer" style="right:0px; margin-top:145px; display:none;">
207 <div class="megaMenuContentContainer">
208 <ul class="megaMenuTable" id="megaMenuTable" style="padding:0px;">
209 <li class="megaMenuFirstRow megaMenuRow" >
210 <ul style=" display: flex; flex-direction: column; flex-wrap: wrap; height:500px;">
211 <li class="categoryContainerColumn" style="margin-right:30px;">
212 <div class="categoryContainer" align="left" style="margin-top:10px; margin-left:40px;">
213 <c:forEach items="${subMenuItem.childMenus}" var="childSubMenuItem">
214 <div class="categoryOption" style="margin-bottom:13px; width:500px; ">
215 <a class="categoryOptionLink" style="margin-bottom:0px; font-size:16px;" href="${childSubMenuItem.action}">${childSubMenuItem.label}</a>
228 <div id="megaMenuContainerTemp" class="megaMenuContainer" style="right:0px; margin-top:89px; display:none;">
229 <div class="megaMenuContentContainer">
230 <ul class="megaMenuTable" id="megaMenuTable" style="padding:0px;">
231 <li class="megaMenuFirstRow megaMenuRow" >
232 <ul style=" display: flex; flex-direction: column; flex-wrap: wrap; height:500px;">
233 <li class="categoryContainerColumn" style="margin-right:30px;">
234 <div class="categoryContainer" align="left" style="margin-bottom:0px; margin-left:40px;">
235 <div class="categoryTitle" style="margin-top:10px; min-width:160px;"></div>
236 <div class="categoryOption" style="margin-bottom:13px;">
237 <a class="categoryOptionLink" style="margin-bottom:0px;" href="#"></a>
243 <li class="megaMenuSecondRow megaMenuRow" style="display:none"></li>
251 $(document).ready(function() {
252 $(document).on('mouseleave', '#megaMenuContainer', function() {
253 $("#thirdLevel").css("display", "none");
254 $("#megaMenuContainerTemp").css("display", "none");
257 $(document).on('mouseleave', '#megaMenuContainerTemp', function() {
258 $("#megaMenuContainerTemp").css("display", "none");
261 $(document).on('mouseenter', '#secondLevel', function() {
262 <c:forEach items="${menu}" var="menuItem">
264 <c:when test="${!empty menuItem.childMenus}">
265 $("#${menuItem.id}").hover(function() {
266 <c:forEach items="${menu}" var="menuItem2">
267 <c:if test="${!empty menuItem2.childMenus}">
268 $("#thirdLevel${menuItem2.id}").css("display", "none");
271 $(".megaMenuContainer").css("display", "none");
272 $("#thirdLevel${menuItem.id}").css("display", "inline");
276 $("#${menuItem.id}").hover(function() {
277 <c:forEach items="${menu}" var="menuItem2">
278 <c:if test="${!empty menuItem2.childMenus}">
279 $("#thirdLevel${menuItem2.id}").css("display", "none");
282 $(".megaMenuContainer").css("display", "none");
289 $('.thirdMenuOptionLink').hover(function() {
290 $(".megaMenuContainer").css("display", "none");
292 var id= "#megaMenu"+this.id;
293 $(id).css("display", "inline");
296 function openSecondLevel(item){
298 $("#secondLevel").css("display", "inline");