More fixes to the right sidebar
Sidebar now works in all file list views. Moved owner to share tab.
This commit is contained in:
Vincent Petry
Arthur Schiwon
parent
12e5f310dd
commit
ff614a7dbd
7 changed files with 85 additions and 133 deletions
|
|
@ -1,35 +1,43 @@
|
|||
|
||||
|
||||
#app-content-files .detailsView.disappear {
|
||||
margin-right: -300px;
|
||||
.app-files .detailsView.disappear {
|
||||
margin-right: -350px;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView {
|
||||
.app-files .detailsView {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
top: 44px;
|
||||
width: 350px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
-webkit-transition: margin-right 300ms;
|
||||
-moz-transition: margin-right 300ms;
|
||||
-o-transition: margin-right 300ms;
|
||||
transition: margin-right 300ms;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView .detailFileInfoContainer {
|
||||
.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: 200px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView .detailFileInfoContainer > div{
|
||||
.app-files .detailsView .detailFileInfoContainer > div{
|
||||
clear: both;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView .thumbnail {
|
||||
.app-files .detailsView .thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
|
|
@ -37,12 +45,18 @@
|
|||
background-size: 50px;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView .fileName {
|
||||
.app-files .detailsView .fileName {
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#app-content-files .detailsView .detailList {
|
||||
.app-files .detailsView .detailList {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.app-files .detailsView .close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
' <ul class="tabHeadsContainer">' +
|
||||
' </ul>' +
|
||||
' </div>' +
|
||||
' <a class="close icon-close" href="#" alt="{{closeLabel}}"></a>' +
|
||||
'</div>';
|
||||
|
||||
var TEMPLATE_TAB_HEADER =
|
||||
|
|
@ -72,10 +73,16 @@
|
|||
* Initialize the details view
|
||||
*/
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.$el = $('<div class="detailsView"></div>');
|
||||
this.fileInfo = null;
|
||||
this._tabViews = [];
|
||||
this._detailFileInfoViews = [];
|
||||
|
||||
this.$el.on('click', 'a.close', function(event) {
|
||||
self.$el.addClass('disappear');
|
||||
event.preventDefault();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -102,7 +109,9 @@
|
|||
this._templateTabHeader = Handlebars.compile(TEMPLATE_TAB_HEADER);
|
||||
}
|
||||
|
||||
var $el = $(this._template());
|
||||
var $el = $(this._template({
|
||||
closeLabel: t('files', 'Close')
|
||||
}));
|
||||
var $tabsContainer = $el.find('.tabsContainer');
|
||||
var $tabHeadsContainer = $el.find('.tabHeadsContainer');
|
||||
var $detailsContainer = $el.find('.detailFileInfoContainer');
|
||||
|
|
@ -144,6 +153,8 @@
|
|||
setFileInfo: function(fileInfo) {
|
||||
this._fileInfo = fileInfo;
|
||||
|
||||
this.render();
|
||||
|
||||
// notify all panels
|
||||
_.each(this._tabViews, function(tabView) {
|
||||
tabView.setFileInfo(fileInfo);
|
||||
|
|
|
|||
|
|
@ -210,6 +210,11 @@
|
|||
}
|
||||
this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions);
|
||||
|
||||
this._detailsView = new OCA.Files.DetailsView();
|
||||
this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
|
||||
this.$el.append(this._detailsView.$el);
|
||||
this._detailsView.$el.addClass('disappear');
|
||||
|
||||
this.$el.find('#controls').prepend(this.breadcrumb.$el);
|
||||
|
||||
this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
|
||||
|
|
@ -224,7 +229,7 @@
|
|||
this.$el.on('click', function(event) {
|
||||
var $target = $(event.target);
|
||||
// click outside file row ?
|
||||
if (!$target.closest('tbody').length) {
|
||||
if (!$target.closest('tbody').length && !$target.closest('.detailsView').length) {
|
||||
self._updateDetailsView(null);
|
||||
}
|
||||
});
|
||||
|
|
@ -282,32 +287,16 @@
|
|||
_updateDetailsView: function(fileInfo) {
|
||||
var self = this;
|
||||
if (!fileInfo) {
|
||||
if (this._detailsView) {
|
||||
// hide it
|
||||
this._detailsView.$el.addClass('disappear');
|
||||
this._detailsView.setFileInfo(null);
|
||||
}
|
||||
this._detailsView.$el.addClass('disappear');
|
||||
this._detailsView.setFileInfo(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this._detailsView) {
|
||||
this._detailsView = new OCA.Files.DetailsView();
|
||||
this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
|
||||
_.each(this._detailFileInfoViews, function(view) {
|
||||
self._detailsView.addDetailView(view);
|
||||
});
|
||||
_.each(this._tabViews, function(view) {
|
||||
self._detailsView.addTabView(view);
|
||||
});
|
||||
this.$el.append(this._detailsView.$el);
|
||||
this._detailsView.$el.addClass('disappear');
|
||||
this._detailsView.render();
|
||||
}
|
||||
this._detailsView.setFileInfo(_.extend({
|
||||
path: this.getCurrentDirectory()
|
||||
}, fileInfo));
|
||||
_.defer(function() {
|
||||
self._detailsView.$el.removeClass('disappear');
|
||||
self._detailsView.$el.removeClass('disappear hidden');
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -364,6 +353,12 @@
|
|||
delete this._selectedFiles[$tr.data('id')];
|
||||
this._selectionSummary.remove(data);
|
||||
}
|
||||
if (this._selectionSummary.getTotal() === 1) {
|
||||
this._updateDetailsView(_.values(this._selectedFiles)[0]);
|
||||
} else {
|
||||
// show nothing when multiple files are selected
|
||||
this._updateDetailsView(null);
|
||||
}
|
||||
this.$el.find('.select-all').prop('checked', this._selectionSummary.getTotal() === this.files.length);
|
||||
},
|
||||
|
||||
|
|
@ -2233,6 +2228,20 @@
|
|||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Register a tab view to be added to all views
|
||||
*/
|
||||
registerTabView: function(tabView) {
|
||||
this._detailsView.addTabView(tabView);
|
||||
},
|
||||
|
||||
/**
|
||||
* Register a detail view to be added to all views
|
||||
*/
|
||||
registerDetailView: function(detailView) {
|
||||
this._detailsView.addDetailView(detailView);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -2284,34 +2293,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Globally registered tab views
|
||||
*
|
||||
* @type OCA.Files.DetailTabView
|
||||
*/
|
||||
FileList.prototype._tabViews = [];
|
||||
|
||||
/**
|
||||
* Globally registered detail views
|
||||
*
|
||||
* @type OCA.Files.DetailFileInfoView
|
||||
*/
|
||||
FileList.prototype._detailFileInfoViews = [];
|
||||
|
||||
/**
|
||||
* Register a tab view to be added to all views
|
||||
*/
|
||||
FileList.prototype.registerTabView = function(tabView) {
|
||||
this._tabViews.push(tabView);
|
||||
};
|
||||
|
||||
/**
|
||||
* Register a detail view to be added to all views
|
||||
*/
|
||||
FileList.prototype.registerDetailView = function(detailView) {
|
||||
this._detailFileInfoViews.push(detailView);
|
||||
};
|
||||
|
||||
/**
|
||||
* File info attributes.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,7 +11,14 @@
|
|||
(function() {
|
||||
var TEMPLATE =
|
||||
'<div class="thumbnail"></div><div class="fileName">{{name}}</div>' +
|
||||
'<div><span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span></div>';
|
||||
'<div>' +
|
||||
' <a href="#" ' +
|
||||
' alt="{{starAltText}}"' +
|
||||
' class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
|
||||
' <img class="svg" src="{{starIcon}}" />' +
|
||||
' </a>' +
|
||||
' <span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span>' +
|
||||
'</div>';
|
||||
|
||||
/**
|
||||
* @class OCA.Files.MainFileInfoDetailView
|
||||
|
|
@ -48,6 +55,7 @@
|
|||
}
|
||||
|
||||
if (this._fileInfo) {
|
||||
var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0
|
||||
this.$el.append(this._template({
|
||||
nameLabel: t('files', 'Name'),
|
||||
name: this._fileInfo.name,
|
||||
|
|
@ -56,10 +64,13 @@
|
|||
sizeLabel: t('files', 'Size'),
|
||||
// TODO: refactor and use size formatter
|
||||
size: OC.Util.humanFileSize(this._fileInfo.size, true),
|
||||
altSize: this._fileInfo.size,
|
||||
altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
|
||||
dateLabel: t('files', 'Modified'),
|
||||
altDate: OC.Util.formatDate(this._fileInfo.mtime),
|
||||
date: OC.Util.relativeModifiedDate(this._fileInfo.mtime)
|
||||
date: OC.Util.relativeModifiedDate(this._fileInfo.mtime),
|
||||
isFavorite: isFavorite,
|
||||
starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
|
||||
starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
|
||||
}));
|
||||
|
||||
var $iconDiv = this.$el.find('.thumbnail');
|
||||
|
|
@ -78,8 +89,7 @@
|
|||
// TODO: special icons / shared / external
|
||||
$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
|
||||
}
|
||||
} else {
|
||||
// TODO: render placeholder text?
|
||||
this.$el.find('[title]').tipsy();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -144,9 +144,6 @@
|
|||
OC.addScript('files_sharing', 'sharetabview').done(function() {
|
||||
fileList.registerTabView(new OCA.Sharing.ShareTabView('shareTabView'));
|
||||
});
|
||||
OC.addScript('files_sharing', 'sharedetailview').done(function() {
|
||||
fileList.registerDetailView(new OCA.Sharing.ShareDetailView());
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
/*
|
||||
* Copyright (c) 2015
|
||||
*
|
||||
* This file is licensed under the Affero General Public License version 3
|
||||
* or later.
|
||||
*
|
||||
* See the COPYING-README file.
|
||||
*
|
||||
*/
|
||||
|
||||
(function() {
|
||||
var TEMPLATE =
|
||||
'<ul class="shareDetailList">' +
|
||||
' <li>Owner: {{owner}}</li>' +
|
||||
'</ul>';
|
||||
|
||||
/**
|
||||
* @class OCA.Files.MainFileInfoDetailView
|
||||
* @classdesc
|
||||
*
|
||||
* Displays main details about a file
|
||||
*
|
||||
*/
|
||||
var ShareDetailView = function() {
|
||||
this.initialize();
|
||||
};
|
||||
/**
|
||||
* @memberof OCA.Sharing
|
||||
*/
|
||||
ShareDetailView.prototype = _.extend({}, OCA.Files.DetailFileInfoView.prototype,
|
||||
/** @lends OCA.Sharing.ShareDetailView.prototype */ {
|
||||
_template: null,
|
||||
|
||||
/**
|
||||
* Initialize the details view
|
||||
*/
|
||||
initialize: function() {
|
||||
this.$el = $('<div class="shareDetailView"></div>');
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders this details view
|
||||
*/
|
||||
render: function() {
|
||||
this.$el.empty();
|
||||
|
||||
if (!this._template) {
|
||||
this._template = Handlebars.compile(TEMPLATE);
|
||||
}
|
||||
|
||||
if (this._fileInfo) {
|
||||
this.$el.append(this._template({
|
||||
owner: this._fileInfo.shareOwner || OC.currentUser
|
||||
}));
|
||||
} else {
|
||||
// TODO: render placeholder text?
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
OCA.Sharing.ShareDetailView = ShareDetailView;
|
||||
})();
|
||||
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
(function() {
|
||||
var TEMPLATE =
|
||||
'<div>TODO: here comes the share dialog</div>';
|
||||
'<div>Owner: {{owner}}';
|
||||
|
||||
/**
|
||||
* @class OCA.Sharing.ShareTabView
|
||||
|
|
@ -52,7 +52,9 @@
|
|||
}
|
||||
|
||||
if (this._fileInfo) {
|
||||
this.$el.append(this._template());
|
||||
this.$el.append(this._template({
|
||||
owner: this._fileInfo.shareOwner || OC.currentUser
|
||||
}));
|
||||
} else {
|
||||
// TODO: render placeholder text?
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue