rename sidebar element and use css and js utility functions to core

7 files changed, 80 insertions, 56 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index ec0d5ac2110..e89a6a36f4c 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -1,53 +1,17 @@
-
-
-.app-files .detailsView.disappear {
-	visibility: hidden;
-}
-
-.with-sidebar {
-	width: 80%;
-}
-
-.app-files .detailsView {
-	position: absolute;
-	width: 20%;
-	top: 44px; /* main header's height */
-	right: 0;
-	left: auto;
-	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;
-	visibility: visible;
-}
-
-.app-files .detailsView {
-	background: #eee;
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-	box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
-	display: block;
-	z-index: 500;
-}
-
-.app-files .detailsView .detailFileInfoContainer {
+#app-sidebar .detailFileInfoContainer {
 	min-height: 60px;
 	padding: 15px;
 }
 
-.app-files .detailsView .detailFileInfoContainer > div {
+#app-sidebar .detailFileInfoContainer > div {
 	clear: both;
 }
 
-.app-files .detailsView .mainFileInfoView {
+#app-sidebar .mainFileInfoView {
 	margin-right: 20px; /* accomodate for close icon */
 }
 
-.app-files .detailsView .thumbnail {
+#app-sidebar .thumbnail {
 	width: 50px;
 	height: 50px;
 	float: left;
@@ -55,23 +19,23 @@
 	background-size: 50px;
 }
 
-.app-files .detailsView .ellipsis {
+#app-sidebar .ellipsis {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.app-files .detailsView .fileName {
+#app-sidebar .fileName {
 	font-weight: bold;
 	font-size: 17px;
 	overflow: hidden;
 }
 
-.app-files .detailsView .detailList {
+#app-sidebar .detailList {
 	float: left;
 }
 
-.app-files .detailsView .close {
+#app-sidebar .close {
 	position: absolute;
 	top: 0;
 	right: 0;
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 0cf4ade0767..03fe736856e 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -74,15 +74,13 @@
 		 */
 		initialize: function() {
 			var self = this;
-			this.$el = $('<div class="detailsView"></div>');
+			this.$el = $('<div id="app-sidebar"></div>');
 			this.fileInfo = null;
 			this._tabViews = [];
 			this._detailFileInfoViews = [];
 
 			this.$el.on('click', 'a.close', function(event) {
-				self.$el
-					.addClass('disappear')
-					.siblings('.with-sidebar').removeClass('with-sidebar');
+				OC.Apps.hideAppSidebar();
 				event.preventDefault();
 			});
 
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 7e94d5c3d4e..8ec7e626162 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -214,7 +214,7 @@
 			if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
 				this._detailsView = new OCA.Files.DetailsView();
 				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
-				this._detailsView.$el.insertAfter(this.$el);
+				this._detailsView.$el.insertBefore(this.$el);
 				this._detailsView.$el.addClass('disappear');
 			}
 
@@ -232,7 +232,7 @@
 			this.$el.on('click', function(event) {
 				var $target = $(event.target);
 				// click outside file row ?
-				if (!$target.closest('tbody').length && !$target.closest('.detailsView').length) {
+				if (!$target.closest('tbody').length && !$target.closest('#app-sidebar').length) {
 					self._updateDetailsView(null);
 				}
 			});
@@ -300,8 +300,7 @@
 			}
 
 			if (!fileInfo) {
-				this._detailsView.$el.addClass('disappear');
-				this.$el.removeClass('with-sidebar');
+				OC.Apps.hideAppSidebar();
 				this._detailsView.setFileInfo(null);
 				return;
 			}
@@ -311,10 +310,7 @@
 				path: this.getCurrentDirectory()
 			}, fileInfo));
 			this._detailsView.$el.scrollTop(0);
-			_.defer(function() {
-				self._detailsView.$el.removeClass('disappear hidden');
-				self.$el.addClass('with-sidebar');
-			});
+			_.defer(OC.Apps.showAppSidebar);
 		},
 
 		/**
diff --git a/core/css/apps.css b/core/css/apps.css
index 57133729f15..d3b9c0e7095 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -417,7 +417,43 @@
 	min-height: 100%;
 }
 
+/* APP-SIDEBAR ----------------------------------------------------------------*/
+
+/*
+	Sidebar: a sidebar to be used within #app-content
+	 have it as first element within app-content in order to shrink other
+	 sibling containers properly. Compare Files app for example.
+*/
+#app-sidebar {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: auto;
+	bottom: 0;
+	width: 30%;
+	min-width: 300px;
+	display: block;
+	background: #eee;
+	-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;
+	visibility: visible;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
+	z-index: 500;
+}
 
+#app-sidebar ~ .with-app-sidebar {
+	width: 70%;
+}
+
+#app-sidebar.disappear {
+	visibility: hidden;
+}
 
 /* APP-SETTINGS ---------------------------------------------------------------*/
 
diff --git a/core/css/mobile.css b/core/css/mobile.css
index 80217d7069c..e38d9756d95 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -103,6 +103,14 @@
 	z-index: 1000;
 }
 
+#app-sidebar {
+	width: 250px;
+}
+
+#app-sidebar ~ .with-app-sidebar {
+	width: 100%;
+}
+
 /* allow horizontal scrollbar in settings
 	otherwise user management is not usable on mobile */
 #body-settings #app-content {
diff --git a/core/js/apps.js b/core/js/apps.js
index 71170bbc23a..1606abf5971 100644
--- a/core/js/apps.js
+++ b/core/js/apps.js
@@ -21,6 +21,27 @@
 	};
 
 	/**
+	 * Shows the #app-sidebar and add .with-app-sidebar to subsequent siblings
+	 */
+	exports.Apps.showAppSidebar = function() {
+		var $appSidebar = $('#app-sidebar');
+		$appSidebar
+			.removeClass('disappear')
+			.find('~ .with-app-sidebar').removeClass('.with-app-sidebar');
+	};
+
+	/**
+	 * Shows the #app-sidebar and removes .with-app-sidebar from subsequent
+	 * siblings
+	 */
+	exports.Apps.hideAppSidebar = function() {
+		var $appSidebar = $('#app-sidebar');
+		$appSidebar
+			.addClass('disappear')
+			.find('~').addClass('.with-app-sidebar');
+	};
+
+	/**
 	 * Provides a way to slide down a target area through a button and slide it
 	 * up if the user clicks somewhere else. Used for the news app settings and
 	 * add new field.
diff --git a/core/js/core.json b/core/js/core.json
index 0f052b798a9..1053debaa99 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -20,6 +20,7 @@
 		"oc-dialogs.js",
 		"js.js",
 		"l10n.js",
+		"apps.js",
 		"share.js",
 		"octemplate.js",
 		"eventsource.js",