Draft of React test
[clamp.git] / src / main / resources / META-INF / resources / designer / partials / menu.html
1 <!--
2   ============LICENSE_START=======================================================
3   ONAP CLAMP
4   ================================================================================
5   Copyright (C) 2017-2018 AT&T Intellectual Property. All rights
6                               reserved.
7   ================================================================================
8   Licensed under the Apache License, Version 2.0 (the "License"); 
9   you may not use this file except in compliance with the License. 
10   You may obtain a copy of the License at
11   
12   http://www.apache.org/licenses/LICENSE-2.0
13   
14   Unless required by applicable law or agreed to in writing, software 
15   distributed under the License is distributed on an "AS IS" BASIS, 
16   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
17   See the License for the specific language governing permissions and 
18   limitations under the License.
19   ============LICENSE_END============================================
20   ===================================================================
21   
22   -->
23
24 <style>
25 .navbar-custom {
26         background-color: #229922;
27         color: #ffffff;
28         border-radius: 0;
29 }
30
31 .red {
32         color: red;
33 }
34
35 .logo {
36         font-family: 'Trebuchet MS', cursive;
37         font-size: 20px;
38         font-weight: 500;
39         text-align: center;
40 }
41
42 .logo_name {
43         display: block;
44         float: left;
45         font-family: 'Trebuchet MS', cursive;
46         font-size: 15px;
47         font-weight: 500;
48         height: 50px;
49         text-align: center;
50 }
51
52 .ThisLink {
53         pointer-events: none;
54         cursor: default;
55         disabled: true;
56         /*   background-color:#e7e7e7; */
57         color: #A09B9B !important;
58 }
59
60 .ThisLink a.blur:hover,.ThisLink a.blur:focus {
61         color: #933;
62 }
63 </style>
64
65 <nav attribute-test="menu" class="navbar navbar-default navbar-fixed-top" role="navigation"
66         style="margin-left: 2px; margin-right: 2px;">
67
68         <div attribute-test="menuc" class="container-fluid">
69
70                 <div class="col-md-4 col-lg-4">
71                         <img class="onap_logo" src="images/logo_onap_2017.png" height="50px"
72                                 width="234px" style="display: inline-block; float: left">
73                         <div class="navbar-brand logo" ng-href=""
74                                 style="display: inline-block; float: left">
75                                 &nbsp;&nbsp;<b>CLAMP</b>
76                         </div>
77                 </div>
78
79
80                 <div style="float: right; padding-right: 50px;"
81                         class="col-md-2 navbar-header navbar-primary navbar-fixed-right hidden-sm hidden-md hidden-lg">
82                         <button type="button" class="navbar-toggle collapsed"
83                                 data-toggle="collapse" data-target="#navbar" aria-expanded="false"
84                                 aria-controls="navbar">
85                                 <span class="icon-bar"></span> <span class="icon-bar"></span> <span
86                                         class="icon-bar"></span>
87                         </button>
88                         <a class="navbar-brand" ng-href=""></a>
89                 </div>
90
91                 <div id="navbar" class="navbar-collapse collapse col-md-10 col-lg-10">
92                         <ul class="nav navbar-nav">
93
94                                 <li class="dropdown" ng-repeat="dropDownName in keyList"
95                                         style="height: inherit"><a active-link="active"
96                                         class="dropdown-toggle dropdownTitle" role="button"
97                                         data-toggle="dropdown"
98                                         style="height: inherit; font-weight: bold; color: #000">{{dropDownName}}
99                                                 <span class="caret"></span>
100                                 </a>
101                                         <ul class="dropdown-menu" role="menu">
102                                                 <li ng-repeat="section in tabs[dropDownName]"
103                                                         ng-if="section.name==='Open CL'"><a
104                                                         id="{{section.name}}" role="presentation"
105                                                         ng-click="emptyMenuClick(section.link,section.name)">{{section.name}}</a>
106                                                 </li>
107
108                                                 <li ng-repeat="section in tabs[dropDownName]"
109                                                         ng-if="section.name != 'Open CL' && section.name != 'ECOMP User Guide - Design Overview' && section.name != 'ECOMP User Guide - Closed Loop Design' && section.name != 'ECOMP User Guide - CLAMP' && section.name != 'User Info'"><a
110                                                         id="{{section.name}}" role="presentation"
111                                                         ng-click="emptyMenuClick(section.link,section.name)"
112                                                         class="ThisLink">{{section.name}}</a>
113                                            </li>
114                                            <li ng-repeat="section in tabs[dropDownName]"
115                                                         ng-if="section.name==='User Info'"><a
116                                                         id="{{section.name}}" role="presentation"
117                                                         ng-click="emptyMenuClick(section.link,section.name)">{{section.name}}</a>
118                                                 </li>
119                                            <li ng-repeat="section in tabs[dropDownName]"
120                                                         ng-if="section.name == 'ONAP User Guide - Design Overview' || section.name == 'ONAP User Guide - Closed Loop Design' || section.name == 'ONAP User Guide - CLAMP'"><a
121                                                         id="{{section.name}}" role="presentation"
122                                                         ng-href="{{section.link}}"
123                                                         target="_blank"
124                                                         >{{section.name}}</a>
125                                            </li>
126
127                                         </ul></li>
128
129                         </ul>
130
131                 </div>
132
133
134
135                 <div attribute-test="menuid" id="navbar" class="navbar-collapse collapse pull-right">
136                         <ul class="nav navbar-nav">
137                                 <li class="dropdown" style="height: inherit"><a
138                                         class="navbar-brand logo_name" active-link="active"
139                                         class="dropdown-toggle dropdownTitle" role="button"
140                                         data-toggle="dropdown" style="height: inherit;">Hello:{{loginuser}} </a></li>
141                         </ul>
142                 </div>
143
144         </div>
145 </nav>