Breadcrumb width calculation fix

Rewrote the breadcrumb calculation to be more readable.

Breadcrumb now has a setMaxWidth() method to set the maximum allowed
width which is used to fit the breadcrumbs.

The breadcrumb width is now based on the container width, passed through
setMaxWidth() by the FileList class.

Now using fixed widths for the test crumbs to simulate consistent
widths across browsers which rendering engines might usually yield
different results.

1 files changed, 23 insertions, 5 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index fb97b2f4595..36f8e063d15 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -150,11 +150,10 @@
 
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
-			$(window).resize(function() {
-				// TODO: debounce this ?
-				var width = $(this).width();
-				self.breadcrumb.resize(width, false);
-			});
+			this._onResize = _.debounce(_.bind(this._onResize, this), 100);
+			$(window).resize(this._onResize);
+
+			this.$el.on('show', this._onResize);
 
 			this.$fileList.on('click','td.filename>a.name', _.bind(this._onClickFile, this));
 			this.$fileList.on('change', 'td.filename>input:checkbox', _.bind(this._onClickFileCheckbox, this));
@@ -177,6 +176,22 @@
 		},
 
 		/**
+		 * Event handler for when the window size changed
+		 */
+		_onResize: function() {
+			var containerWidth = this.$el.width();
+			var actionsWidth = 0;
+			$.each(this.$el.find('#controls .actions'), function(index, action) {
+				actionsWidth += $(action).outerWidth();
+			});
+
+			// substract app navigation toggle when visible
+			containerWidth -= $('#app-navigation-toggle').width();
+
+			this.breadcrumb.setMaxWidth(containerWidth - actionsWidth - 10);
+		},
+
+		/**
 		 * Event handler for when the URL changed
 		 */
 		_onUrlChanged: function(e) {
@@ -1530,6 +1545,9 @@
 			// handle upload events
 			var fileUploadStart = this.$el.find('#file_upload_start');
 
+			// detect the progress bar resize
+			fileUploadStart.on('resized', this._onResize);
+
 			fileUploadStart.on('fileuploaddrop', function(e, data) {
 				OC.Upload.log('filelist handle fileuploaddrop', e, data);