OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m
edia-query.html"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m
edia-query.html"> |
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> | 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button.html"> |
4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se
arch_field.html"> | 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se
arch_field.html"> |
5 | 5 |
6 <dom-module id="cr-toolbar"> | 6 <dom-module id="cr-toolbar"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 :host { | 9 :host { |
10 --cr-toolbar-field-width: 580px; | 10 --cr-toolbar-field-width: 580px; |
11 --cr-toolbar-height: 56px; | |
12 color: #fff; | 11 color: #fff; |
13 display: flex; | 12 display: flex; |
14 height: var(--cr-toolbar-height); | 13 height: 56px; |
15 } | 14 } |
16 | 15 |
17 h1 { | 16 h1 { |
18 -webkit-margin-start: 6px; | 17 -webkit-margin-start: 6px; |
19 flex: 1; | 18 flex: 1; |
20 font-size: 123%; | 19 font-size: 123%; |
21 font-weight: 400; | 20 font-weight: 400; |
22 text-overflow: ellipsis; | 21 text-overflow: ellipsis; |
23 overflow: hidden; | 22 overflow: hidden; |
24 white-space: nowrap; | 23 white-space: nowrap; |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
65 @apply(--cr-toolbar-right-content-wide); | 64 @apply(--cr-toolbar-right-content-wide); |
66 } | 65 } |
67 | 66 |
68 :host([narrow_]) #centeredContent { | 67 :host([narrow_]) #centeredContent { |
69 justify-content: flex-end; | 68 justify-content: flex-end; |
70 } | 69 } |
71 | 70 |
72 :host([narrow_][showing-search_]) #leftContent { | 71 :host([narrow_][showing-search_]) #leftContent { |
73 opacity: 0; | 72 opacity: 0; |
74 } | 73 } |
75 | |
76 #menuPromo { | |
77 -webkit-padding-end: 12px; | |
78 -webkit-padding-start: 8px; | |
79 align-items: center; | |
80 background: #616161; | |
81 border-radius: 2px; | |
82 color: white; | |
83 display: flex; | |
84 font-size: 92.3%; | |
85 font-weight: 500; | |
86 opacity: 0; | |
87 padding-bottom: 6px; | |
88 padding-top: 6px; | |
89 position: absolute; | |
90 top: var(--cr-toolbar-height); | |
91 white-space: nowrap; | |
92 z-index: 2; | |
93 } | |
94 | |
95 #menuPromo::before { | |
96 background: inherit; | |
97 /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */ | |
98 clip-path: polygon(0 105%, 100% 105%, 50% 0); | |
99 content: ''; | |
100 display: block; | |
101 left: 10px; | |
102 height: 6px; | |
103 position: absolute; | |
104 top: -6px; | |
105 width: 12px; | |
106 } | |
107 | |
108 :host-context([dir=rtl]) #menuPromo::before { | |
109 left: auto; | |
110 right: 10px; | |
111 } | |
112 | |
113 #closePromo { | |
114 -webkit-appearance: none; | |
115 -webkit-margin-start: 12px; | |
116 background: none; | |
117 border: none; | |
118 color: inherit; | |
119 font-size: 20px; /* Shouldn't change if default font-size changes. */ | |
120 line-height: 20px; | |
121 padding: 0; | |
122 width: 20px; | |
123 } | |
124 </style> | 74 </style> |
125 <div id="leftContent"> | 75 <div id="leftContent"> |
126 <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. --> | 76 <template is="dom-if" if="[[showMenu]]"> |
127 <template is="dom-if" if="[[showMenu]]" restamp> | |
128 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" | 77 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" |
129 title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]" | 78 title="[[menuLabel]]"> |
130 aria-label$="[[menuLabel]]"> | |
131 </paper-icon-button> | 79 </paper-icon-button> |
132 <template is="dom-if" if="[[showMenuPromo]]"> | |
133 <div id="menuPromo" role="tooltip"> | |
134 [[menuPromo]] | |
135 <button id="closePromo" on-tap="onClosePromoTap_" | |
136 aria-label$="[[closeMenuPromo]]">✕</button> | |
137 </paper-tooltip> | |
138 </template> | |
139 </template> | 80 </template> |
140 <h1>[[pageName]]</h1> | 81 <h1>[[pageName]]</h1> |
141 </div> | 82 </div> |
142 | 83 |
143 <div id="centeredContent"> | 84 <div id="centeredContent"> |
144 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" | 85 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" |
145 label="[[searchPrompt]]" clear-label="[[clearLabel]]" | 86 label="[[searchPrompt]]" clear-label="[[clearLabel]]" |
146 spinner-active="[[spinnerActive]]" | 87 spinner-active="[[spinnerActive]]" |
147 showing-search="{{showingSearch_}}"> | 88 showing-search="{{showingSearch_}}"> |
148 </cr-toolbar-search-field> | 89 </cr-toolbar-search-field> |
149 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> | 90 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> |
150 </iron-media-query> | 91 </iron-media-query> |
151 </div> | 92 </div> |
152 | 93 |
153 <div id="rightContent"> | 94 <div id="rightContent"> |
154 <content select=".more-actions"></content> | 95 <content select=".more-actions"></content> |
155 </div> | 96 </div> |
156 </template> | 97 </template> |
157 <script src="cr_toolbar.js"></script> | 98 <script src="cr_toolbar.js"></script> |
158 </dom-module> | 99 </dom-module> |
OLD | NEW |