| <!-- |
| Copyright (C) 2016 The Android Open Source Project |
| |
| 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. |
| --> |
| |
| <link rel="import" href="../../../bower_components/polymer/polymer.html"> |
| |
| <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html"> |
| |
| <link rel="import" href="../gr-account-dropdown/gr-account-dropdown.html"> |
| <link rel="import" href="../gr-search-bar/gr-search-bar.html"> |
| |
| <dom-module id="gr-main-header"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| } |
| nav { |
| align-items: center; |
| display: flex; |
| } |
| .bigTitle { |
| color: var(--primary-text-color); |
| font-size: 1.75em; |
| text-decoration: none; |
| } |
| .bigTitle:hover { |
| text-decoration: underline; |
| } |
| ul { |
| list-style: none; |
| } |
| .links { |
| margin-left: 1em; |
| } |
| .links ul { |
| display: none; |
| } |
| .links > li { |
| cursor: default; |
| display: inline-block; |
| margin-left: 1em; |
| padding: .4em 0; |
| position: relative; |
| } |
| .links li:hover ul { |
| background-color: #fff; |
| box-shadow: 0 1px 1px rgba(0, 0, 0, .3); |
| display: block; |
| left: -.75em; |
| position: absolute; |
| top: 2em; |
| z-index: 1000; |
| } |
| .links li ul li a:link, |
| .links li ul li a:visited { |
| color: #00e; |
| display: block; |
| padding: .5em .75em; |
| text-decoration: none; |
| white-space: nowrap; |
| } |
| .links li ul li:hover a { |
| background-color: var(--selection-background-color); |
| } |
| .linksTitle { |
| display: inline-block; |
| padding-right: 1em; |
| position: relative; |
| } |
| .downArrow { |
| border-left: .36em solid transparent; |
| border-right: .36em solid transparent; |
| border-top: .36em solid #ccc; |
| height: 0; |
| position: absolute; |
| right: 0; |
| top: calc(50% - .1em); |
| width: 0; |
| } |
| .links li:hover .downArrow { |
| border-top-color: #666; |
| } |
| .rightItems { |
| display: flex; |
| flex: 1; |
| justify-content: flex-end; |
| } |
| gr-search-bar { |
| margin-left: .5em; |
| width: 500px; |
| } |
| .accountContainer:not(.loggedIn):not(.loggedOut) .loginButton, |
| .accountContainer:not(.loggedIn):not(.loggedOut) gr-account-dropdown, |
| .accountContainer.loggedIn .loginButton, |
| .accountContainer.loggedOut gr-account-dropdown { |
| display: none; |
| } |
| .accountContainer { |
| align-items: center; |
| display: flex; |
| margin-left: var(--default-horizontal-margin); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| @media screen and (max-width: 50em) { |
| .bigTitle { |
| font-size: 14px; |
| font-weight: bold; |
| } |
| gr-search-bar { |
| display: none; |
| } |
| .accountContainer { |
| margin-left: .5em !important; |
| } |
| } |
| </style> |
| <nav> |
| <a href="/" class="bigTitle">PolyGerrit</a> |
| <ul class="links"> |
| <template is="dom-repeat" items="[[_links]]" as="linkGroup"> |
| <li> |
| <span class="linksTitle"> |
| [[linkGroup.title]] <i class="downArrow"></i> |
| </span> |
| <ul> |
| <template is="dom-repeat" items="[[linkGroup.links]]" as="link"> |
| <li><a href="[[link.url]]">[[link.name]]</a></li> |
| </template> |
| </ul> |
| </li> |
| </template> |
| </ul> |
| <div class="rightItems"> |
| <gr-search-bar value="{{searchQuery}}" role="search"></gr-search-bar> |
| <div class="accountContainer" id="accountContainer"> |
| <a class="loginButton" href="/login" on-tap="_loginTapHandler">Sign in</a> |
| <gr-account-dropdown account="[[_account]]"></gr-account-dropdown> |
| </div> |
| </div> |
| </nav> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| </template> |
| <script src="gr-main-header.js"></script> |
| </dom-module> |