| <!-- |
| @license |
| 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="../../../behaviors/docs-url-behavior/docs-url-behavior.html"> |
| <link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html"> |
| <link rel="import" href="../../../behaviors/gr-admin-nav-behavior/gr-admin-nav-behavior.html"> |
| <link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html"> |
| <link rel="import" href="../../shared/gr-dropdown/gr-dropdown.html"> |
| <link rel="import" href="../../shared/gr-icons/gr-icons.html"> |
| <link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.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-smart-search/gr-smart-search.html"> |
| |
| <dom-module id="gr-main-header"> |
| <template> |
| <style include="shared-styles"> |
| :host { |
| display: block; |
| } |
| nav { |
| align-items: center; |
| display: flex; |
| } |
| .bigTitle { |
| color: var(--header-text-color); |
| font-size: 1.75rem; |
| text-decoration: none; |
| } |
| .bigTitle:hover { |
| text-decoration: underline; |
| } |
| /* TODO (viktard): Clean-up after chromium-style migrates to component. */ |
| .titleText::before { |
| background-image: var(--header-icon); |
| background-size: var(--header-icon-size) var(--header-icon-size); |
| background-repeat: no-repeat; |
| content: ""; |
| display: inline-block; |
| height: var(--header-icon-size); |
| margin-right: calc(var(--header-icon-size) / 4); |
| vertical-align: text-bottom; |
| width: var(--header-icon-size); |
| } |
| .titleText::after { |
| content: var(--header-title-content); |
| } |
| ul { |
| list-style: none; |
| padding-left: 1em; |
| } |
| .links > li { |
| cursor: default; |
| display: inline-block; |
| padding: 0; |
| position: relative; |
| } |
| .linksTitle { |
| color: var(--header-text-color); |
| display: inline-block; |
| font-weight: var(--font-weight-bold); |
| position: relative; |
| text-transform: uppercase; |
| } |
| .linksTitle:hover { |
| opacity: .75; |
| } |
| .rightItems { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| justify-content: flex-end; |
| } |
| .rightItems gr-endpoint-decorator:not(:empty) { |
| margin-left: 1em; |
| } |
| gr-smart-search { |
| flex-grow: 1; |
| margin-left: .5em; |
| max-width: 500px; |
| } |
| gr-dropdown, |
| .browse { |
| padding: .6em .5em; |
| } |
| gr-dropdown { |
| --gr-dropdown-item: { |
| color: var(--primary-text-color); |
| } |
| } |
| .settingsButton { |
| margin-left: .5em; |
| } |
| .browse { |
| color: var(--header-text-color); |
| /* Same as gr-button */ |
| margin: 5px 4px; |
| text-decoration: none; |
| } |
| .invisible, |
| .settingsButton, |
| gr-account-dropdown { |
| display: none; |
| } |
| :host([loading]) .accountContainer, |
| :host([logged-in]) .loginButton, |
| :host([logged-in]) .registerButton { |
| display: none; |
| } |
| :host([logged-in]) .settingsButton, |
| :host([logged-in]) gr-account-dropdown { |
| display: inline; |
| } |
| iron-icon { |
| color: var(--header-text-color); |
| } |
| .accountContainer { |
| align-items: center; |
| display: flex; |
| margin: 0 -.5em 0 .5em; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .loginButton, .registerButton { |
| color: var(--header-text-color); |
| padding: .5em 1em; |
| } |
| .dropdown-trigger { |
| text-decoration: none; |
| } |
| .dropdown-content { |
| background-color: var(--view-background-color); |
| box-shadow: 0 1px 5px rgba(0, 0, 0, .3); |
| } |
| @media screen and (max-width: 50em) { |
| .bigTitle { |
| font-size: var(--font-size-large); |
| font-weight: var(--font-weight-bold); |
| } |
| gr-smart-search, |
| .browse, |
| .rightItems .hideOnMobile, |
| .links > li.hideOnMobile { |
| display: none; |
| } |
| .accountContainer { |
| margin-left: .5em !important; |
| } |
| gr-dropdown { |
| padding: .5em 0 .5em .5em; |
| } |
| } |
| </style> |
| <nav> |
| <a href$="[[_computeRelativeURL('/')]]" class="bigTitle"> |
| <gr-endpoint-decorator name="header-title"> |
| <span class="titleText"></span> |
| </gr-endpoint-decorator> |
| </a> |
| <ul class="links"> |
| <template is="dom-repeat" items="[[_links]]" as="linkGroup"> |
| <li class$="[[linkGroup.class]]"> |
| <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-smart-search |
| id="search" |
| search-query="{{searchQuery}}"></gr-smart-search> |
| <gr-endpoint-decorator |
| class="hideOnMobile" |
| name="header-browse-source"></gr-endpoint-decorator> |
| <div class="accountContainer" id="accountContainer"> |
| <div class$="[[_computeIsInvisible(_registerURL)]]"> |
| <a |
| class="registerButton" |
| href$="[[_registerURL]]"> |
| [[_registerText]] |
| </a> |
| </div> |
| <a class="loginButton" href$="[[_loginURL]]">Sign in</a> |
| <a |
| class="settingsButton" |
| href$="[[_generateSettingsLink()]]" |
| title="Settings"> |
| <iron-icon icon="gr-icons:settings"></iron-icon> |
| </a> |
| <gr-account-dropdown account="[[_account]]"></gr-account-dropdown> |
| </div> |
| </div> |
| </nav> |
| <gr-js-api-interface id="jsAPI"></gr-js-api-interface> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| </template> |
| <script src="gr-main-header.js"></script> |
| </dom-module> |
