| <!-- |
| 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="../../../behaviors/base-url-behavior/base-url-behavior.html"> |
| <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="../../shared/gr-dropdown/gr-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 > li { |
| cursor: default; |
| display: inline-block; |
| margin-left: 1em; |
| padding: 0; |
| position: relative; |
| } |
| .linksTitle { |
| color: black; |
| display: inline-block; |
| position: relative; |
| } |
| .rightItems { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| justify-content: flex-end; |
| } |
| gr-search-bar { |
| flex-grow: 1; |
| margin-left: .5em; |
| max-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; |
| } |
| .dropdown-trigger { |
| text-decoration: none; |
| } |
| .dropdown-content { |
| background-color: #fff; |
| box-shadow: 0 1px 5px rgba(0, 0, 0, .3); |
| } |
| @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$="[[_computeRelativeURL('/')]]" class="bigTitle">PolyGerrit</a> |
| <ul class="links"> |
| <template is="dom-repeat" items="[[_links]]" as="linkGroup"> |
| <li> |
| <gr-dropdown |
| link |
| down-arrow |
| items = [[linkGroup.links]] |
| horizontal-align="left"> |
| <span class="linksTitle" id="[[linkGroup.title]]"> |
| [[linkGroup.title]] |
| </span> |
| </gr-dropdown> |
| </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$="[[_loginURL]]" 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> |