adjust controls bar width to not overlay scrollbar

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 67bc487a72f692460b46b79cf120002724cfe446..9d60e77b0acca3ae051294ffa29f913d62beb141 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -635,6 +635,8 @@
                 * @param filesArray array of file data (map)
                 */
                setFiles: function(filesArray) {
+                       var self = this;
+
                        // detach to make adding multiple rows faster
                        this.files = filesArray;
 
@@ -655,7 +657,10 @@
                        this.updateSelectionSummary();
                        $(window).scrollTop(0);
 
-                       this.$fileList.trigger(jQuery.Event("updated"));
+                       this.$fileList.trigger(jQuery.Event('updated'));
+                       _.defer(function() {
+                               self.$el.closest('#app-content').trigger(jQuery.Event('apprendered'));
+                       });
                },
                /**
                 * Creates a new table row element using the given file data.

diff --git a/core/js/js.js b/core/js/js.js
index ad14c2a855aaf9ffdfc7e4dd609b78dd5106f15d..26eac9c01a8963d177b106d5d6cfc60f25a63542 100644 (file)
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1261,6 +1261,32 @@ function initCore() {
                // initial call
                toggleSnapperOnSize();
 
+               // adjust controls bar width
+               var adjustControlsWidth = function() {
+                       if($('#controls').length) {
+                               // if there is a scrollbar …
+                               if($('#app-content').get(0).scrollHeight > $('#app-content').height()) {
+                                       if($(window).width() > 768) {
+                                               var controlsWidth = $('#content').width() - $('#app-navigation').width() - getScrollBarWidth();
+                                       } else {
+                                               var controlsWidth = $('#content').width() - getScrollBarWidth();
+                                       }
+                               } else { // if there is none
+                                       if($(window).width() > 768) {
+                                               var controlsWidth = $('#content').width() - $('#app-navigation').width();
+                                       } else {
+                                               var controlsWidth = $('#content').width();
+                                       }
+                               }
+                               $('#controls').css('width', controlsWidth);
+                               $('#controls').css('min-width', controlsWidth);
+                       }
+               };
+
+               $(window).resize(_.debounce(adjustControlsWidth, 250));
+
+               $('body').delegate('#app-content', 'apprendered', adjustControlsWidth);
+
        }
 
 }
@@ -1685,3 +1711,29 @@ jQuery.fn.selectRange = function(start, end) {
 jQuery.fn.exists = function(){
        return this.length > 0;
 };
+
+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);
+};