Merge pull request #12577 from nextcloud/fix-rendering-of-the-sidebar-in-files-app

Fix rendering of the sidebar in Files app

2 files changed, 25 insertions, 11 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index bac2a5ebd21..699f884ba24 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -96,16 +96,6 @@
 		 * Renders this details view
 		 */
 		render: function() {
-			// remove old instances
-			var $appSidebar = $('#app-sidebar');
-			if ($appSidebar.length === 0) {
-				this.$el.insertAfter($('#app-content'));
-			} else {
-				if ($appSidebar[0] !== this.el) {
-					$appSidebar.replaceWith(this.$el);
-				}
-			}
-			
 			var templateVars = {
 				closeLabel: t('files', 'Close')
 			};
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 94fdada937d..047837cd9d7 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -584,12 +584,36 @@
 			}
 
 			this._currentFileModel = model;
+
+			this._replaceDetailsViewElementIfNeeded();
+
 			this._detailsView.setFileInfo(model);
-			this._detailsView.render();
 			this._detailsView.$el.scrollTop(0);
 		},
 
 		/**
+		 * Replaces the current details view element with the details view
+		 * element of this file list.
+		 *
+		 * Each file list has its own DetailsView object, and each one has its
+		 * own root element, but there can be just one details view/sidebar
+		 * element in the document. This helper method replaces the current
+		 * details view/sidebar element in the document with the element from
+		 * the DetailsView object of this file list.
+		 */
+		_replaceDetailsViewElementIfNeeded: function() {
+			var $appSidebar = $('#app-sidebar');
+			if ($appSidebar.length === 0) {
+				this._detailsView.$el.insertAfter($('#app-content'));
+			} else if ($appSidebar[0] !== this._detailsView.el) {
+				// "replaceWith()" can not be used here, as it removes the old
+				// element instead of just detaching it.
+				this._detailsView.$el.insertBefore($appSidebar);
+				$appSidebar.detach();
+			}
+		},
+
+		/**
 		 * Event handler for when the window size changed
 		 */
 		_onResize: function() {