From ff614a7dbde66a9cd795a674d0e0635b6f32e3a5 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 15 Jul 2015 17:05:25 +0200 Subject: [PATCH] More fixes to the right sidebar Sidebar now works in all file list views. Moved owner to share tab. --- apps/files/css/detailsView.css | 36 +++++++---- apps/files/js/detailsview.js | 13 +++- apps/files/js/filelist.js | 77 +++++++++--------------- apps/files/js/mainfileinfodetailview.js | 20 ++++-- apps/files_sharing/js/share.js | 3 - apps/files_sharing/js/sharedetailview.js | 63 ------------------- apps/files_sharing/js/sharetabview.js | 6 +- 7 files changed, 85 insertions(+), 133 deletions(-) delete mode 100644 apps/files_sharing/js/sharedetailview.js diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index 0bbdfe9490..a62bcd8c96 100644 --- a/apps/files/css/detailsView.css +++ b/apps/files/css/detailsView.css @@ -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; +} diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index 719299485a..d69d8c09c1 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -18,6 +18,7 @@ ' ' + ' ' + + ' ' + ''; var TEMPLATE_TAB_HEADER = @@ -72,10 +73,16 @@ * Initialize the details view */ initialize: function() { + var self = this; this.$el = $('
'); 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); diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 355c76f9c6..9f0d48ff01 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -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. * diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js index 5eb74145f1..88463bda9e 100644 --- a/apps/files/js/mainfileinfodetailview.js +++ b/apps/files/js/mainfileinfodetailview.js @@ -11,7 +11,14 @@ (function() { var TEMPLATE = '
{{name}}
' + - '
{{size}}, {{date}}
'; + '
' + + ' ' + + ' ' + + ' ' + + ' {{size}}, {{date}}' + + '
'; /** * @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(); } } }); diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js index 227eec7957..12bec0e8c9 100644 --- a/apps/files_sharing/js/share.js +++ b/apps/files_sharing/js/share.js @@ -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()); - }); }, /** diff --git a/apps/files_sharing/js/sharedetailview.js b/apps/files_sharing/js/sharedetailview.js deleted file mode 100644 index a18a6d19d1..0000000000 --- a/apps/files_sharing/js/sharedetailview.js +++ /dev/null @@ -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 = - ''; - - /** - * @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 = $('
'); - }, - - /** - * 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; -})(); - diff --git a/apps/files_sharing/js/sharetabview.js b/apps/files_sharing/js/sharetabview.js index 48dfcae16d..42bddc20b3 100644 --- a/apps/files_sharing/js/sharetabview.js +++ b/apps/files_sharing/js/sharetabview.js @@ -10,7 +10,7 @@ (function() { var TEMPLATE = - '
TODO: here comes the share dialog
'; + '
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? }