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-icon/iron-icon.htm
l"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
3 <link rel="import" href="chrome://resources/cr_elements/icons.html"> | |
4 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_r
ender.html"> | 3 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_r
ender.html"> |
5 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht
ml"> | 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht
ml"> |
6 <link rel="import" href="chrome://history/browser_service.html"> | 5 <link rel="import" href="chrome://history/browser_service.html"> |
7 <link rel="import" href="chrome://history/icons.html"> | 6 <link rel="import" href="chrome://history/icons.html"> |
8 <link rel="import" href="chrome://history/shared_style.html"> | 7 <link rel="import" href="chrome://history/shared_style.html"> |
9 | 8 |
10 <!-- Lazy loaded: iron-dropdown, paper-button, paper-icon-button-light. --> | 9 <!-- Lazy loaded: cr-toolbar-selection-overlay. --> |
11 | 10 |
12 <dom-module id="history-toolbar"> | 11 <dom-module id="history-toolbar"> |
13 <template> | 12 <template> |
14 <style include="shared-style"> | 13 <style include="shared-style"> |
15 :host { | 14 :host { |
16 color: #fff; | 15 color: #fff; |
17 display: block; | 16 display: flex; |
18 transition: background-color 150ms; | 17 transition: background-color 150ms; |
19 width: 100%; | |
20 } | 18 } |
21 | 19 |
22 /* General toolbar layout. */ | 20 /* General toolbar layout. */ |
23 | 21 |
24 cr-toolbar, | |
25 #overlay-buttons, | |
26 #overlay-wrapper, | |
27 #toolbar-container { | |
28 align-items: center; | |
29 display: flex; | |
30 width: 100%; | |
31 } | |
32 | |
33 :host([items-selected_]) { | 22 :host([items-selected_]) { |
34 background: var(--interactive-color); | 23 background: var(--interactive-color); |
35 } | 24 } |
36 | 25 |
37 #toolbar-container { | 26 cr-toolbar, |
38 height: var(--toolbar-height); | 27 cr-toolbar-selection-overlay { |
| 28 --cr-toolbar-field-margin: var(--side-bar-width); |
| 29 flex: 1; |
39 } | 30 } |
40 | 31 |
41 cr-toolbar { | 32 :host([has-drawer]) cr-toolbar, |
42 --cr-toolbar-field-margin: var(--side-bar-width); | 33 :host([has-drawer]) cr-toolbar-selection-overlay { |
| 34 --cr-toolbar-field-margin: 0; |
43 } | 35 } |
44 | 36 |
45 :host([has-drawer]) cr-toolbar { | 37 cr-toolbar-selection-overlay { |
46 --cr-toolbar-field-margin: 0; | 38 --selection-overlay-max-width: var(--card-max-width); |
47 } | 39 } |
48 | 40 |
49 /* Info button and dropdown. */ | 41 /* Info button and dropdown. */ |
50 | 42 |
51 #info-button { | 43 #info-button { |
52 /* Additional styles for unresolved <button>. */ | 44 /* Additional styles for unresolved <button>. */ |
53 background: none; | 45 background: none; |
54 border: none; | 46 border: none; |
55 color: inherit; | 47 color: inherit; |
56 height: 32px; | 48 height: 32px; |
(...skipping 15 matching lines...) Expand all Loading... |
72 color: var(--primary-text-color); | 64 color: var(--primary-text-color); |
73 overflow: hidden; | 65 overflow: hidden; |
74 padding: 12px 20px; | 66 padding: 12px 20px; |
75 position: absolute; | 67 position: absolute; |
76 right: 24px; | 68 right: 24px; |
77 top: 46px; | 69 top: 46px; |
78 z-index: 1; | 70 z-index: 1; |
79 } | 71 } |
80 | 72 |
81 :host-context([dir=rtl]) #sync-notice { | 73 :host-context([dir=rtl]) #sync-notice { |
| 74 left: 24px; |
82 right: auto; | 75 right: auto; |
83 left: 24px; | |
84 } | |
85 | |
86 /* Selection overlay. */ | |
87 | |
88 :host(:not([has-drawer])) #overlay-wrapper { | |
89 -webkit-margin-start: var(--side-bar-width); | |
90 } | |
91 | |
92 #overlay-buttons { | |
93 margin: 0 auto; | |
94 max-width: var(--card-max-width); | |
95 padding: 0 var(--card-padding-side); | |
96 } | |
97 | |
98 paper-button { | |
99 font-weight: 500; | |
100 } | |
101 | |
102 #number-selected { | |
103 flex: 1; | |
104 } | |
105 | |
106 #cancel-icon-button { | |
107 -webkit-margin-end: 24px; | |
108 -webkit-margin-start: 2px; | |
109 } | 76 } |
110 </style> | 77 </style> |
111 <div id="toolbar-container"> | 78 <cr-toolbar id="main-toolbar" |
112 <cr-toolbar id="main-toolbar" | 79 page-name="$i18n{title}" |
113 page-name="$i18n{title}" | 80 clear-label="$i18n{clearSearch}" |
114 clear-label="$i18n{clearSearch}" | 81 search-prompt="$i18n{searchPrompt}" |
115 search-prompt="$i18n{searchPrompt}" | 82 hidden$="[[itemsSelected_]]" |
116 hidden$="[[itemsSelected_]]" | 83 spinner-active="[[spinnerActive]]" |
117 spinner-active="[[spinnerActive]]" | 84 show-menu="[[hasDrawer]]" |
118 show-menu="[[hasDrawer]]" | 85 show-menu-promo="[[showMenuPromo]]" |
119 show-menu-promo="[[showMenuPromo]]" | 86 menu-label="$i18n{historyMenuButton}" |
120 menu-label="$i18n{historyMenuButton}" | 87 menu-promo="$i18n{menuPromo}" |
121 menu-promo="$i18n{menuPromo}" | 88 close-menu-promo="$i18n{closeMenuPromo}" |
122 close-menu-promo="$i18n{closeMenuPromo}" | 89 on-search-changed="onSearchChanged_"> |
123 on-search-changed="onSearchChanged_"> | 90 <div class="more-actions"> |
124 <div class="more-actions"> | 91 <template is="dom-if" if="[[showSyncNotice]]"> |
125 <template is="dom-if" if="[[showSyncNotice]]"> | 92 <button is="paper-icon-button-light" id="info-button" |
126 <button is="paper-icon-button-light" id="info-button" | 93 on-click="onInfoButtonTap_" |
127 on-click="onInfoButtonTap_" | 94 aria-label="$i18n{hasSyncedResultsDescription}"> |
128 aria-label="$i18n{hasSyncedResultsDescription}"> | 95 <iron-icon icon="history:info-outline" id="info-button-icon"> |
129 <iron-icon icon="history:info-outline" id="info-button-icon"> | 96 </iron-icon> |
130 </iron-icon> | 97 </button> |
131 </button> | 98 </template> |
132 </template> | |
133 </div> | |
134 </cr-toolbar> | |
135 <div id="sync-notice" hidden="[[!syncNoticeVisible_]]"> | |
136 $i18nRaw{hasSyncedResults} | |
137 </div> | 99 </div> |
138 <template is="dom-if" if="[[itemsSelected_]]"> | 100 </cr-toolbar> |
139 <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]"> | 101 <div id="sync-notice" hidden="[[!syncNoticeVisible_]]"> |
140 <div id="overlay-buttons"> | 102 $i18nRaw{hasSyncedResults} |
141 <button is="paper-icon-button-light" | |
142 id="cancel-icon-button" | |
143 class="icon-button" | |
144 on-tap="onClearSelectionTap_" | |
145 title="$i18n{cancel}"> | |
146 <iron-icon icon="cr:clear"></iron-icon> | |
147 </button> | |
148 <div id="number-selected">[[numberOfItemsSelected_(count)]]</div> | |
149 <paper-button id="cancel-button" on-tap="onClearSelectionTap_"> | |
150 $i18n{cancel} | |
151 </paper-button> | |
152 <paper-button id="delete-button" on-tap="onDeleteTap_"> | |
153 $i18n{delete} | |
154 </paper-button> | |
155 </div> | |
156 </div> | |
157 </template> | |
158 </div> | 103 </div> |
| 104 <template is="dom-if" if="[[itemsSelected_]]"> |
| 105 <cr-toolbar-selection-overlay delete-label="$i18n{delete}" |
| 106 cancel-label="$i18n{cancel}" |
| 107 selection-label="[[numberOfItemsSelected_(count)]]" |
| 108 on-clear-selected-items="clearSelectedItems" |
| 109 on-delete-selected-items="deleteSelectedItems"> |
| 110 </cr-toolbar-selection-overlay> |
| 111 </template> |
159 </template> | 112 </template> |
160 <script src="chrome://history/history_toolbar.js"></script> | 113 <script src="chrome://history/history_toolbar.js"></script> |
161 </dom-module> | 114 </dom-module> |
OLD | NEW |