Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(326)

Side by Side Diff: chrome/browser/resources/md_bookmarks/toolbar.js

Issue 2827573002: MD Bookmarks: Show toolbar overlay when multiple items are selected (Closed)
Patch Set: Fix layout problem Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2016 The Chromium Authors. All rights reserved. 1 // Copyright 2016 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 Polymer({ 5 Polymer({
6 is: 'bookmarks-toolbar', 6 is: 'bookmarks-toolbar',
7 7
8 behaviors: [ 8 behaviors: [
9 bookmarks.StoreClient, 9 bookmarks.StoreClient,
10 ], 10 ],
11 11
12 properties: { 12 properties: {
13 /** @private */ 13 /** @private */
14 searchTerm_: { 14 searchTerm_: {
15 type: String, 15 type: String,
16 observer: 'onSearchTermChanged_', 16 observer: 'onSearchTermChanged_',
17 }, 17 },
18 18
19 sidebarWidth: { 19 sidebarWidth: {
20 type: String, 20 type: String,
21 observer: 'onSidebarWidthChanged_', 21 observer: 'onSidebarWidthChanged_',
22 }, 22 },
23
24 showSelectionOverlay: {
25 type: Boolean,
26 computed: 'shouldShowSelectionOverlay_(selectedCount_)',
27 readOnly: true,
28 reflectToAttribute: true,
29 },
30
31 /** @private */
32 selectedCount_: Number,
23 }, 33 },
24 34
25 attached: function() { 35 attached: function() {
26 this.watch('searchTerm_', function(state) { 36 this.watch('searchTerm_', function(state) {
27 return state.search.term; 37 return state.search.term;
28 }); 38 });
39 this.watch('selectedCount_', function(state) {
40 return state.selection.items.size;
41 });
42 this.updateFromStore();
29 }, 43 },
30 44
31 /** @return {CrToolbarSearchFieldElement} */ 45 /** @return {CrToolbarSearchFieldElement} */
32 get searchField() { 46 get searchField() {
33 return /** @type {CrToolbarElement} */ (this.$$('cr-toolbar')) 47 return /** @type {CrToolbarElement} */ (this.$$('cr-toolbar'))
34 .getSearchField(); 48 .getSearchField();
35 }, 49 },
36 50
37 /** 51 /**
38 * @param {Event} e 52 * @param {Event} e
(...skipping 12 matching lines...) Expand all
51 }, 65 },
52 66
53 /** @private */ 67 /** @private */
54 onAddBookmarkTap_: function() { 68 onAddBookmarkTap_: function() {
55 var dialog = 69 var dialog =
56 /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get()); 70 /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get());
57 dialog.showAddDialog(false, assert(this.getState().selectedFolder)); 71 dialog.showAddDialog(false, assert(this.getState().selectedFolder));
58 this.closeDropdownMenu_(); 72 this.closeDropdownMenu_();
59 }, 73 },
60 74
75 /** @private */
61 onAddFolderTap_: function() { 76 onAddFolderTap_: function() {
62 var dialog = 77 var dialog =
63 /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get()); 78 /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get());
64 dialog.showAddDialog(true, assert(this.getState().selectedFolder)); 79 dialog.showAddDialog(true, assert(this.getState().selectedFolder));
65 this.closeDropdownMenu_(); 80 this.closeDropdownMenu_();
66 }, 81 },
67 82
68 /** @private */ 83 /** @private */
69 onImportTap_: function() { 84 onImportTap_: function() {
70 chrome.bookmarks.import(); 85 chrome.bookmarks.import();
71 this.closeDropdownMenu_(); 86 this.closeDropdownMenu_();
72 }, 87 },
73 88
74 /** @private */ 89 /** @private */
75 onExportTap_: function() { 90 onExportTap_: function() {
76 chrome.bookmarks.export(); 91 chrome.bookmarks.export();
77 this.closeDropdownMenu_(); 92 this.closeDropdownMenu_();
78 }, 93 },
79 94
80 /** @private */ 95 /** @private */
96 onClearSelectionTap_: function() {
97 this.dispatch(bookmarks.actions.deselectItems());
98 },
99
100 /** @private */
81 closeDropdownMenu_: function() { 101 closeDropdownMenu_: function() {
82 var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown); 102 var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown);
83 menu.close(); 103 menu.close();
84 }, 104 },
85 105
86 /** 106 /**
87 * @param {Event} e 107 * @param {Event} e
88 * @private 108 * @private
89 */ 109 */
90 onSearchChanged_: function(e) { 110 onSearchChanged_: function(e) {
91 var searchTerm = /** @type {string} */ (e.detail); 111 var searchTerm = /** @type {string} */ (e.detail);
92 if (searchTerm != this.searchTerm_) 112 if (searchTerm != this.searchTerm_)
93 this.dispatch(bookmarks.actions.setSearchTerm(searchTerm)); 113 this.dispatch(bookmarks.actions.setSearchTerm(searchTerm));
94 }, 114 },
95 115
116 /** @private */
96 onSidebarWidthChanged_: function() { 117 onSidebarWidthChanged_: function() {
97 this.style.setProperty('--sidebar-width', this.sidebarWidth); 118 this.style.setProperty('--sidebar-width', this.sidebarWidth);
98 }, 119 },
99 120
100 /** @private */ 121 /** @private */
101 onSearchTermChanged_: function() { 122 onSearchTermChanged_: function() {
102 this.searchField.setValue(this.searchTerm_ || ''); 123 this.searchField.setValue(this.searchTerm_ || '');
103 }, 124 },
104 125
105 /** 126 /**
106 * @return {boolean} 127 * @return {boolean}
107 * @private 128 * @private
108 */ 129 */
109 hasSearchTerm_: function() { 130 hasSearchTerm_: function() {
110 return !!this.searchTerm_; 131 return !!this.searchTerm_;
111 }, 132 },
133
134 /**
135 * @return {boolean}
136 * @private
137 */
138 shouldShowSelectionOverlay_: function() {
139 return this.selectedCount_ > 1;
140 },
141
142 /**
143 * @return {string}
144 * @private
145 */
146 numberOfItemsSelected_: function() {
147 return loadTimeData.getStringF('itemsSelected', this.selectedCount_);
148 },
112 }); 149 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698