From 5af59c68712032ef387ccd4410eb4b8b04c27df9 Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Fri, 24 Jul 2015 23:07:09 +0200 Subject: [PATCH] rename sidebar element and use css and js utility functions to core --- apps/files/css/detailsView.css | 52 ++++++---------------------------- apps/files/js/detailsview.js | 6 ++-- apps/files/js/filelist.js | 12 +++----- core/css/apps.css | 36 +++++++++++++++++++++++ core/css/mobile.css | 8 ++++++ core/js/apps.js | 21 ++++++++++++++ core/js/core.json | 1 + 7 files changed, 80 insertions(+), 56 deletions(-) diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index ec0d5ac211..e89a6a36f4 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 0cf4ade076..03fe736856 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -74,15 +74,13 @@ */ initialize: function() { var self = this; - this.$el = $('
'); + this.$el = $('
'); 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 7e94d5c3d4..8ec7e62616 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 57133729f1..d3b9c0e709 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 80217d7069..e38d9756d9 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 71170bbc23..1606abf597 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 0f052b798a..1053debaa9 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",