From f135128664cae62a831ed46853ac820af6a4812b Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 2 Oct 2015 18:02:55 +0200 Subject: [PATCH] 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 --- apps/files/js/filelist.js | 4 +++ core/js/js.js | 68 +++++++++++++++++++++++++-------------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 9c4e43b3b8..2516dd3e95 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 e40141ac61..38ccc70cb1 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1636,6 +1636,45 @@ OC.Util = { return $('html').hasClass('ie8'); }, + /** + * 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 * @@ -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(); } /**