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

Unified Diff: ui/file_manager/file_manager/foreground/js/toolbar_controller.js

Issue 904403002: Make the position of 'n files selected' label synced with the width of navigation list. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Set initial width for #cancel-selection-button-wrapper, used before the first relayout event. Created 5 years, 10 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 side-by-side diff with in-line comments
Download patch
Index: ui/file_manager/file_manager/foreground/js/toolbar_controller.js
diff --git a/ui/file_manager/file_manager/foreground/js/toolbar_controller.js b/ui/file_manager/file_manager/foreground/js/toolbar_controller.js
index 32476bd10577c14de687e14062c6cf116ae640a0..7f0b3c8ddc809a8ae01472d3be261261cfab9ebe 100644
--- a/ui/file_manager/file_manager/foreground/js/toolbar_controller.js
+++ b/ui/file_manager/file_manager/foreground/js/toolbar_controller.js
@@ -7,8 +7,12 @@
* status is changed, this class changes the view of toolbar. If cancel
* selection button is pressed, this class clears the selection.
* @param {!HTMLElement} cancelSelectionButton Button to cancel selection.
+ * @param {!HTMLElement} cancelSelectionButtonWrapper Wapper for the button,
+ * which works as a spacer for the filesSelectionLabel.
* @param {!HTMLElement} filesSelectedLabel Label to show how many files are
* selected.
+ * @param {!HTMLElement} navigationList Navigation list on the left pane. The
+ * position of silesSelectedLabel depends on the navitaion list's width.
* @param {!FileSelectionHandler} selectionHandler
* @param {!cr.ui.ListSelectionModel|!cr.ui.ListSingleSelectionModel}
* selectionModel
@@ -16,12 +20,20 @@
* @struct
*/
function ToolbarController(cancelSelectionButton,
+ cancelSelectionButtonWrapper,
filesSelectedLabel,
+ navigationList,
selectionHandler,
selectionModel) {
/** @private {!HTMLElement} */
+ this.cancelSelectionButtonWrapper_ = cancelSelectionButtonWrapper;
+
+ /** @private {!HTMLElement} */
this.filesSelectedLabel_ = filesSelectedLabel;
+ /** @private {!HTMLElement} */
+ this.navigationList_ = navigationList;
+
/** @private {!FileSelectionHandler} */
this.selectionHandler_ = selectionHandler;
@@ -34,6 +46,9 @@ function ToolbarController(cancelSelectionButton,
cancelSelectionButton.addEventListener(
'click', this.onCancelSelectionButtonClicked_.bind(this));
+
+ this.navigationList_.addEventListener(
+ 'relayout', this.onNavigationListRelayout_.bind(this));
}
/**
@@ -73,3 +88,13 @@ ToolbarController.prototype.onSelectionChanged_ = function() {
ToolbarController.prototype.onCancelSelectionButtonClicked_ = function() {
this.selectionModel_.unselectAll();
}
+
+/**
+ * Handles the relayout event occured on the navigation list.
+ * @private
+ */
+ToolbarController.prototype.onNavigationListRelayout_ = function() {
+ // Make the width of spacer same as the width of navigation list.
+ var navWidth = parseFloat(getComputedStyle(this.navigationList_).width);
+ this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px';
+}

Powered by Google App Engine
This is Rietveld 408576698