diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index ec0d5ac21108955b5fe9721c3e9e879d66722f26..e89a6a36f4c1370dd22fb64330b34a8559367f79 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 0cf4ade0767bf33e36239b6da29d7a7242c51996..03fe736856e64117926faa7fbb12fb83f1137454 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 7e94d5c3d4e58bfbca9188d426d2d6798345c0ef..8ec7e62616238e1eefa0a54f03e5adc95564d7f0 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 57133729f151fea915c36e527372160b4b443a21..d3b9c0e709580781e9547c3b6ff1c594c046059e 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 80217d7069cdcb7a4ded9e15a4448cfa430a2726..e38d9756d95ad20f5a767196fba8d1fe9978ae62 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 71170bbc23a0c19dce0d425a1ec449cd3f4c031c..1606abf5971fa06f7df59c8e81dcc2f946427da9 100644
--- a/core/js/apps.js
+++ b/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
diff --git a/core/js/core.json b/core/js/core.json
index 0f052b798a98668accafaacfa384a4002220bfa4..1053debaa99968ba9ad431113720a80c3c421e5a 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",