rename sidebar element and use css and js utility functions to core
This commit is contained in:
parent
f508cf40da
commit
5af59c6871
|
@ -1,53 +1,17 @@
|
||||||
|
#app-sidebar .detailFileInfoContainer {
|
||||||
|
|
||||||
.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 {
|
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .detailFileInfoContainer > div {
|
#app-sidebar .detailFileInfoContainer > div {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .mainFileInfoView {
|
#app-sidebar .mainFileInfoView {
|
||||||
margin-right: 20px; /* accomodate for close icon */
|
margin-right: 20px; /* accomodate for close icon */
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .thumbnail {
|
#app-sidebar .thumbnail {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -55,23 +19,23 @@
|
||||||
background-size: 50px;
|
background-size: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .ellipsis {
|
#app-sidebar .ellipsis {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .fileName {
|
#app-sidebar .fileName {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .detailList {
|
#app-sidebar .detailList {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .detailsView .close {
|
#app-sidebar .close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
@ -74,15 +74,13 @@
|
||||||
*/
|
*/
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
this.$el = $('<div class="detailsView"></div>');
|
this.$el = $('<div id="app-sidebar"></div>');
|
||||||
this.fileInfo = null;
|
this.fileInfo = null;
|
||||||
this._tabViews = [];
|
this._tabViews = [];
|
||||||
this._detailFileInfoViews = [];
|
this._detailFileInfoViews = [];
|
||||||
|
|
||||||
this.$el.on('click', 'a.close', function(event) {
|
this.$el.on('click', 'a.close', function(event) {
|
||||||
self.$el
|
OC.Apps.hideAppSidebar();
|
||||||
.addClass('disappear')
|
|
||||||
.siblings('.with-sidebar').removeClass('with-sidebar');
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -214,7 +214,7 @@
|
||||||
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
|
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
|
||||||
this._detailsView = new OCA.Files.DetailsView();
|
this._detailsView = new OCA.Files.DetailsView();
|
||||||
this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
|
this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
|
||||||
this._detailsView.$el.insertAfter(this.$el);
|
this._detailsView.$el.insertBefore(this.$el);
|
||||||
this._detailsView.$el.addClass('disappear');
|
this._detailsView.$el.addClass('disappear');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -232,7 +232,7 @@
|
||||||
this.$el.on('click', function(event) {
|
this.$el.on('click', function(event) {
|
||||||
var $target = $(event.target);
|
var $target = $(event.target);
|
||||||
// click outside file row ?
|
// 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);
|
self._updateDetailsView(null);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -300,8 +300,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!fileInfo) {
|
if (!fileInfo) {
|
||||||
this._detailsView.$el.addClass('disappear');
|
OC.Apps.hideAppSidebar();
|
||||||
this.$el.removeClass('with-sidebar');
|
|
||||||
this._detailsView.setFileInfo(null);
|
this._detailsView.setFileInfo(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -311,10 +310,7 @@
|
||||||
path: this.getCurrentDirectory()
|
path: this.getCurrentDirectory()
|
||||||
}, fileInfo));
|
}, fileInfo));
|
||||||
this._detailsView.$el.scrollTop(0);
|
this._detailsView.$el.scrollTop(0);
|
||||||
_.defer(function() {
|
_.defer(OC.Apps.showAppSidebar);
|
||||||
self._detailsView.$el.removeClass('disappear hidden');
|
|
||||||
self.$el.addClass('with-sidebar');
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -417,7 +417,43 @@
|
||||||
min-height: 100%;
|
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 ---------------------------------------------------------------*/
|
/* APP-SETTINGS ---------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
|
@ -103,6 +103,14 @@
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app-sidebar {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app-sidebar ~ .with-app-sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* allow horizontal scrollbar in settings
|
/* allow horizontal scrollbar in settings
|
||||||
otherwise user management is not usable on mobile */
|
otherwise user management is not usable on mobile */
|
||||||
#body-settings #app-content {
|
#body-settings #app-content {
|
||||||
|
|
|
@ -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
|
* 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
|
* up if the user clicks somewhere else. Used for the news app settings and
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
"oc-dialogs.js",
|
"oc-dialogs.js",
|
||||||
"js.js",
|
"js.js",
|
||||||
"l10n.js",
|
"l10n.js",
|
||||||
|
"apps.js",
|
||||||
"share.js",
|
"share.js",
|
||||||
"octemplate.js",
|
"octemplate.js",
|
||||||
"eventsource.js",
|
"eventsource.js",
|
||||||
|
|
Loading…
Reference in New Issue