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

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;

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();
 			});
 

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);
 		},
 
 		/**

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 ---------------------------------------------------------------*/
 

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 {

core/js/apps.js

@@ -20,6 +20,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

core/js/core.json

@@ -20,6 +20,7 @@
 		"oc-dialogs.js",
 		"js.js",
 		"l10n.js",
+		"apps.js",
 		"share.js",
 		"octemplate.js",
 		"eventsource.js",