Right sidebar now has its own scrollbar

3 files changed, 25 insertions, 5 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 5b9b51a16d3..8d412a83667 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -1,21 +1,23 @@
 
 
 .app-files .detailsView.disappear {
-	margin-right: -350px;
+	margin-right: -359px;
 }
 
 .app-files .detailsView {
-	position: absolute;
+	position: fixed;
 	width: 350px;
-	top: 0;
-	right: 0;
+	top: 44px; /* main header's height */
+	right: 9px;
 	left: auto;
-	min-height: 100%;
+	bottom: 0;
 	background-color: white;
 	-webkit-transition: margin-right 300ms;
 	-moz-transition: margin-right 300ms;
 	-o-transition: margin-right 300ms;
 	transition: margin-right 300ms;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 
 .app-files .detailsView {
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index feced7e34dd..c28de71ab7d 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -83,6 +83,8 @@
 				self.$el.addClass('disappear');
 				event.preventDefault();
 			});
+
+			this._addTestTabs();
 		},
 
 		/**
@@ -94,6 +96,21 @@
 			}
 		},
 
+		_addTestTabs: function() {
+			for (var j = 0; j < 2; j++) {
+				var testView = new OCA.Files.DetailTabView('testtab' + j);
+				testView.index = j;
+				testView.getLabel = function() { return 'Test tab ' + this.index; };
+				testView.render = function() {
+					this.$el.empty();
+					for (var i = 0; i < 100; i++) {
+						this.$el.append('<div>Test tab ' + this.index + ' row ' + i + '</div>');
+					}
+				};
+				this._tabViews.push(testView);
+			}
+		},
+
 		/**
 		 * Renders this details view
 		 */
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 5c7fcb6b998..796b14199d8 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -302,6 +302,7 @@
 			this._detailsView.setFileInfo(_.extend({
 				path: this.getCurrentDirectory()
 			}, fileInfo));
+			this._detailsView.$el.scrollTop(0);
 			_.defer(function() {
 				self._detailsView.$el.removeClass('disappear hidden');
 			});