| <link rel="import" href="../../html/polymer.html"> |
| |
| <link rel="import" href="../cr_icons_css.html"> |
| <link rel="import" href="../cr_toolbar/cr_toolbar_search_field.html"> |
| <link rel="import" href="../hidden_style_css.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| |
| <dom-module id="cr-toolbar"> |
| <template> |
| <style include="cr-icons cr-hidden-style"> |
| :host { |
| --cr-toolbar-height: 56px; |
| --paper-icon-button-ink-color: white; |
| align-items: center; |
| color: #fff; |
| display: flex; |
| height: var(--cr-toolbar-height); |
| } |
| |
| :host-context([dark]) { |
| border-bottom: 1px solid var(--cr-separator-color); |
| } |
| |
| h1 { |
| flex: 1; |
| font-size: 123%; |
| font-weight: 400; |
| letter-spacing: .25px; |
| line-height: normal; |
| margin-inline-start: 6px; |
| padding-inline-end: 12px; |
| } |
| |
| #leftContent { |
| /* margin-start here must match margin-end on #rightContent. */ |
| margin-inline-start: 12px; |
| position: relative; |
| transition: opacity 100ms; |
| } |
| |
| #leftSpacer { |
| align-items: center; |
| display: flex; |
| margin-inline-start: 6px; |
| } |
| |
| #menuButtonContainer { |
| height: 32px; |
| min-width: 32px; |
| padding: 6px 0; |
| width: 32px; |
| } |
| |
| #centeredContent { |
| display: flex; |
| flex: 1 1 0; |
| justify-content: center; |
| } |
| |
| #rightContent { |
| margin-inline-end: 12px; |
| } |
| |
| :host([narrow]) #centeredContent { |
| justify-content: flex-end; |
| } |
| |
| :host([has-overlay]) { |
| transition: visibility var(--cr-toolbar-overlay-animation-duration); |
| visibility: hidden; |
| } |
| |
| :host([narrow][showing-search_]) #leftContent { |
| opacity: 0; |
| position: absolute; |
| } |
| |
| :host(:not([narrow])) #leftContent { |
| flex: 1 1 var(--cr-toolbar-field-margin, 0); |
| } |
| |
| :host(:not([narrow])) #rightContent { |
| flex: 1 1 0; |
| text-align: end; |
| } |
| |
| #menuPromo { |
| align-items: center; |
| background: #616161; |
| border-radius: 2px; |
| color: white; |
| display: flex; |
| font-size: 92.3%; |
| font-weight: 500; |
| opacity: 0; |
| padding-bottom: 6px; |
| padding-inline-end: 12px; |
| padding-inline-start: 8px; |
| padding-top: 6px; |
| position: absolute; |
| top: var(--cr-toolbar-height); |
| white-space: nowrap; |
| z-index: 2; |
| } |
| |
| #menuPromo::before { |
| background: inherit; |
| /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */ |
| clip-path: polygon(0 105%, 100% 105%, 50% 0); |
| content: ''; |
| display: block; |
| height: 6px; |
| left: 10px; |
| position: absolute; |
| top: -6px; |
| width: 12px; |
| } |
| |
| :host-context([dir=rtl]) #menuPromo::before { |
| left: auto; |
| right: 10px; |
| } |
| |
| #closePromo { |
| -webkit-appearance: none; |
| background: none; |
| border: none; |
| color: inherit; |
| font-size: 20px; /* Shouldn't change if default font-size changes. */ |
| line-height: 20px; |
| margin-inline-start: 12px; |
| padding: 0; |
| width: 20px; |
| } |
| </style> |
| <div id="leftContent"> |
| <div id="leftSpacer"> |
| <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. --> |
| <template is="dom-if" if="[[showMenu]]" restamp> |
| <paper-icon-button-light id="menuButtonContainer" |
| class="icon-menu-white no-overlap"> |
| <button id="menuButton" |
| on-tap="onMenuTap_" |
| title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" |
| aria-label$="[[menuLabel]]"> |
| </button> |
| </paper-icon-button-light> |
| <template is="dom-if" if="[[showMenuPromo]]"> |
| <div id="menuPromo" role="tooltip"> |
| [[menuPromo]] |
| <button id="closePromo" on-tap="onClosePromoTap_" |
| aria-label$="[[closeMenuPromo]]">✕</button> |
| </paper-tooltip> |
| </template> |
| </template> |
| <h1>[[pageName]]</h1> |
| </div> |
| </div> |
| |
| <div id="centeredContent" hidden$="[[!showSearch]]"> |
| <cr-toolbar-search-field id="search" narrow="[[narrow]]" |
| label="[[searchPrompt]]" clear-label="[[clearLabel]]" |
| spinner-active="[[spinnerActive]]" |
| showing-search="{{showingSearch_}}"> |
| </cr-toolbar-search-field> |
| <iron-media-query query="(max-width: [[narrowThreshold]]px)" |
| query-matches="{{narrow}}"> |
| </iron-media-query> |
| </div> |
| |
| <div id="rightContent"> |
| <slot></slot> |
| </div> |
| </template> |
| <script src="cr_toolbar.js"></script> |
| </dom-module> |