Fix filelist size issues, breadcrumb, multiselect

- calculate multiselect header width to exclude scrollbar
- call FileList._onResize() when sidebar is toggled ("appresized"), this
  also updates the breadcrumb width
- moved global getScrollBarWidth() to OC.Util namespace

2 files changed, 47 insertions, 25 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 9c4e43b3b8b..2516dd3e957 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -233,6 +233,7 @@
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 100);
+			$('#app-content').on('appresized', this._onResize);
 			$(window).resize(this._onResize);
 
 			this.$el.on('show', this._onResize);
@@ -278,6 +279,7 @@
 			this.fileActions.off('registerAction', this._onFileActionsUpdated);
 			this.fileActions.off('setDefault', this._onFileActionsUpdated);
 			OC.Plugins.detach('OCA.Files.FileList', this);
+			$('#app-content').off('appresized', this._onResize);
 		},
 
 		/**
@@ -437,6 +439,8 @@
 
 			this.breadcrumb.setMaxWidth(containerWidth - actionsWidth - 10);
 
+			this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
+
 			this.updateSearch();
 		},
 
diff --git a/core/js/js.js b/core/js/js.js
index e40141ac617..38ccc70cb15 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1637,6 +1637,45 @@ OC.Util = {
 	},
 
 	/**
+	 * Returns the width of a generic browser scrollbar
+	 *
+	 * @return {int} width of scrollbar
+	 */
+	getScrollBarWidth: function() {
+		if (this._scrollBarWidth) {
+			return this._scrollBarWidth;
+		}
+
+		var inner = document.createElement('p');
+		inner.style.width = "100%";
+		inner.style.height = "200px";
+
+		var outer = document.createElement('div');
+		outer.style.position = "absolute";
+		outer.style.top = "0px";
+		outer.style.left = "0px";
+		outer.style.visibility = "hidden";
+		outer.style.width = "200px";
+		outer.style.height = "150px";
+		outer.style.overflow = "hidden";
+		outer.appendChild (inner);
+
+		document.body.appendChild (outer);
+		var w1 = inner.offsetWidth;
+		outer.style.overflow = 'scroll';
+		var w2 = inner.offsetWidth;
+		if(w1 === w2) {
+			w2 = outer.clientWidth;
+		}
+
+		document.body.removeChild (outer);
+
+		this._scrollBarWidth = (w1 - w2);
+
+		return this._scrollBarWidth;
+	},
+
+	/**
 	 * Remove the time component from a given date
 	 *
 	 * @param {Date} date date
@@ -1926,32 +1965,11 @@ jQuery.fn.exists = function(){
 	return this.length > 0;
 };
 
+/**
+ * @deprecated use OC.Util.getScrollBarWidth() instead
+ */
 function getScrollBarWidth() {
-	var inner = document.createElement('p');
-	inner.style.width = "100%";
-	inner.style.height = "200px";
-
-	var outer = document.createElement('div');
-	outer.style.position = "absolute";
-	outer.style.top = "0px";
-	outer.style.left = "0px";
-	outer.style.visibility = "hidden";
-	outer.style.width = "200px";
-	outer.style.height = "150px";
-	outer.style.overflow = "hidden";
-	outer.appendChild (inner);
-
-	document.body.appendChild (outer);
-	var w1 = inner.offsetWidth;
-	outer.style.overflow = 'scroll';
-	var w2 = inner.offsetWidth;
-	if(w1 === w2) {
-		w2 = outer.clientWidth;
-	}
-
-	document.body.removeChild (outer);
-
-	return (w1 - w2);
+	return OC.Util.getScrollBarWidth();
 }
 
 /**