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/cr_elements/cr_action_menu/cr_action
_menu.html"> | 2 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action
_menu.html"> |
3 <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"> |
4 <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"> |
| 5 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se
lection_overlay.html"> |
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button-light.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper
-icon-button-light.html"> |
6 <link rel="import" href="chrome://bookmarks/edit_dialog.html"> | 7 <link rel="import" href="chrome://bookmarks/edit_dialog.html"> |
7 <link rel="import" href="chrome://bookmarks/shared_style.html"> | 8 <link rel="import" href="chrome://bookmarks/shared_style.html"> |
8 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> | 9 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> |
9 | 10 |
10 <dom-module id="bookmarks-toolbar"> | 11 <dom-module id="bookmarks-toolbar"> |
11 <template> | 12 <template> |
12 <style include="shared-style"> | 13 <style include="shared-style"> |
| 14 :host { |
| 15 background: var(--md-toolbar-color); |
| 16 color: #fff; |
| 17 transition: background-color 150ms; |
| 18 } |
| 19 |
| 20 :host([show-selection-overlay]) { |
| 21 background: var(--interactive-color); |
| 22 } |
| 23 |
13 button.more-actions { | 24 button.more-actions { |
14 margin: 4px; | 25 margin: 4px; |
15 } | 26 } |
16 | 27 |
17 button.more-vert-button div { | 28 button.more-vert-button div { |
18 border-color: white; | 29 border-color: white; |
19 } | 30 } |
20 | 31 |
| 32 cr-toolbar, |
| 33 cr-toolbar-selection-overlay { |
| 34 flex: 1; |
| 35 } |
| 36 |
21 cr-toolbar { | 37 cr-toolbar { |
22 --cr-toolbar-field-margin: | 38 --cr-toolbar-field-margin: |
23 calc(var(--sidebar-width) + var(--splitter-width)); | 39 calc(var(--sidebar-width) + var(--splitter-width)); |
24 background: var(--md-toolbar-color); | 40 } |
| 41 |
| 42 :host(:not([narrow_])) cr-toolbar-selection-overlay { |
| 43 --selection-overlay-padding: var(--card-padding-side); |
| 44 --cr-toolbar-field-margin: var(--sidebar-width); |
| 45 --selection-overlay-max-width: var(--card-max-width); |
25 } | 46 } |
26 </style> | 47 </style> |
27 <dialog is="cr-action-menu" id="dropdown"> | 48 <dialog is="cr-action-menu" id="dropdown"> |
28 <button class="dropdown-item" on-tap="onSortTap_" | 49 <button class="dropdown-item" on-tap="onSortTap_" |
29 disabled="[[hasSearchTerm_(searchTerm_)]]"> | 50 disabled="[[hasSearchTerm_(searchTerm_)]]"> |
30 $i18n{menuSort} | 51 $i18n{menuSort} |
31 </button> | 52 </button> |
32 <hr> | 53 <hr> |
33 <button class="dropdown-item" on-tap="onAddBookmarkTap_" | 54 <button class="dropdown-item" on-tap="onAddBookmarkTap_" |
34 disabled="[[hasSearchTerm_(searchTerm_)]]"> | 55 disabled="[[hasSearchTerm_(searchTerm_)]]"> |
35 $i18n{menuAddBookmark} | 56 $i18n{menuAddBookmark} |
36 </button> | 57 </button> |
37 <button class="dropdown-item" on-tap="onAddFolderTap_" | 58 <button class="dropdown-item" on-tap="onAddFolderTap_" |
38 disabled="[[hasSearchTerm_(searchTerm_)]]"> | 59 disabled="[[hasSearchTerm_(searchTerm_)]]"> |
39 $i18n{menuAddFolder} | 60 $i18n{menuAddFolder} |
40 </button> | 61 </button> |
41 <hr> | 62 <hr> |
42 <button class="dropdown-item" on-tap="onImportTap_"> | 63 <button class="dropdown-item" on-tap="onImportTap_"> |
43 $i18n{menuImport} | 64 $i18n{menuImport} |
44 </button> | 65 </button> |
45 <button class="dropdown-item" on-tap="onExportTap_"> | 66 <button class="dropdown-item" on-tap="onExportTap_"> |
46 $i18n{menuExport} | 67 $i18n{menuExport} |
47 </button> | 68 </button> |
48 </dialog> | 69 </dialog> |
49 <cr-toolbar page-name="$i18n{title}" | 70 <cr-toolbar page-name="$i18n{title}" |
50 clear-label="$i18n{clearSearch}" | 71 clear-label="$i18n{clearSearch}" |
51 search-prompt="$i18n{searchPrompt}" | 72 search-prompt="$i18n{searchPrompt}" |
| 73 hidden$="[[showSelectionOverlay]]" |
| 74 narrow="{{narrow_}}" |
52 on-search-changed="onSearchChanged_"> | 75 on-search-changed="onSearchChanged_"> |
53 <button is="paper-icon-button-light" class="more-actions more-vert-button" | 76 <button is="paper-icon-button-light" class="more-actions more-vert-button" |
54 on-tap="onMenuButtonOpenTap_"> | 77 on-tap="onMenuButtonOpenTap_"> |
55 <div></div> | 78 <div></div> |
56 <div></div> | 79 <div></div> |
57 <div></div> | 80 <div></div> |
58 </button> | 81 </button> |
59 </cr-toolbar> | 82 </cr-toolbar> |
60 <template is="cr-lazy-render" id="addDialog"> | 83 <template is="cr-lazy-render" id="addDialog"> |
61 <bookmarks-edit-dialog></bookmarks-edit-dialog> | 84 <bookmarks-edit-dialog></bookmarks-edit-dialog> |
62 </template> | 85 </template> |
| 86 <template is="dom-if" if="[[showSelectionOverlay]]"> |
| 87 <cr-toolbar-selection-overlay delete-label="$i18n{delete}" |
| 88 cancel-label="$i18n{cancel}" |
| 89 selection-label="[[getItemsSelectedString_(selectedCount_)]]" |
| 90 on-clear-selected-items="onClearSelectionTap_"> |
| 91 </cr-toolbar-selection-overlay> |
| 92 </template> |
63 </template> | 93 </template> |
64 <script src="chrome://bookmarks/toolbar.js"></script> | 94 <script src="chrome://bookmarks/toolbar.js"></script> |
65 </dom-module> | 95 </dom-module> |
OLD | NEW |