| <link rel="import" href="chrome://resources/html/polymer.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.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html"> |
| |
| <dom-module id="cr-toolbar"> |
| <template> |
| <style> |
| :host { |
| --cr-toolbar-field-width: 580px; |
| --cr-toolbar-height: 56px; |
| --paper-icon-button-ink-color: white; |
| align-items: center; |
| color: #fff; |
| display: flex; |
| height: var(--cr-toolbar-height); |
| } |
| |
| h1 { |
| -webkit-margin-start: 6px; |
| -webkit-padding-end: 12px; |
| flex: 1; |
| font-size: 123%; |
| font-weight: 400; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| #leftContent { |
| /* margin-start here must match margin-end on #rightContent. */ |
| -webkit-margin-start: 12px; |
| position: relative; |
| transition: opacity 100ms; |
| } |
| |
| #leftSpacer { |
| -webkit-margin-start: 6px; |
| align-items: center; |
| display: flex; |
| } |
| |
| #menuButton { |
| height: 32px; |
| margin-bottom: 6px; |
| margin-top: 6px; |
| min-width: 32px; |
| padding: 6px; |
| width: 32px; |
| } |
| |
| #centeredContent { |
| display: flex; |
| flex: 1 1 0; |
| justify-content: center; |
| } |
| |
| #rightContent { |
| -webkit-margin-end: 12px; |
| } |
| |
| :host([narrow]) #centeredContent { |
| justify-content: flex-end; |
| } |
| |
| :host([narrow][showing-search_]) #leftContent { |
| position: absolute; |
| opacity: 0; |
| } |
| |
| :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 { |
| -webkit-padding-end: 12px; |
| -webkit-padding-start: 8px; |
| 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-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; |
| left: 10px; |
| height: 6px; |
| position: absolute; |
| top: -6px; |
| width: 12px; |
| } |
| |
| :host-context([dir=rtl]) #menuPromo::before { |
| left: auto; |
| right: 10px; |
| } |
| |
| #closePromo { |
| -webkit-appearance: none; |
| -webkit-margin-start: 12px; |
| background: none; |
| border: none; |
| color: inherit; |
| font-size: 20px; /* Shouldn't change if default font-size changes. */ |
| line-height: 20px; |
| 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 id="menuButton" icon="cr20:menu" |
| on-tap="onMenuTap_" |
| title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" |
| aria-label$="[[menuLabel]]"> |
| </paper-icon-button> |
| <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"> |
| <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: 900px)" query-matches="{{narrow}}"> |
| </iron-media-query> |
| </div> |
| |
| <div id="rightContent"> |
| <content select=".more-actions"></content> |
| </div> |
| </template> |
| <script src="cr_toolbar.js"></script> |
| </dom-module> |