From 12e5f310ddb784c0ed1248020b770d93040918da Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 15 Jul 2015 16:09:00 +0200 Subject: Improved right sidebar Added owner info. Added animation, but causes scrollbal. Default file action now when clicking on name directly. Fixed icon. Added empty share tab. --- apps/files_sharing/js/share.js | 7 ++++ apps/files_sharing/js/sharedetailview.js | 63 +++++++++++++++++++++++++++++++ apps/files_sharing/js/sharetabview.js | 64 ++++++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+) create mode 100644 apps/files_sharing/js/sharedetailview.js create mode 100644 apps/files_sharing/js/sharetabview.js (limited to 'apps/files_sharing/js') diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js index e7823454c53..227eec79578 100644 --- a/apps/files_sharing/js/share.js +++ b/apps/files_sharing/js/share.js @@ -140,6 +140,13 @@ } }); }, t('files_sharing', 'Share')); + + 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 new file mode 100644 index 00000000000..a18a6d19d15 --- /dev/null +++ b/apps/files_sharing/js/sharedetailview.js @@ -0,0 +1,63 @@ +/* + * 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 new file mode 100644 index 00000000000..48dfcae16d8 --- /dev/null +++ b/apps/files_sharing/js/sharetabview.js @@ -0,0 +1,64 @@ +/* + * 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 = + '
TODO: here comes the share dialog
'; + + /** + * @class OCA.Sharing.ShareTabView + * @classdesc + * + * Displays sharing information + * + */ + var ShareTabView = function(id) { + this.initialize(id); + }; + /** + * @memberof OCA.Sharing + */ + ShareTabView.prototype = _.extend({}, OCA.Files.DetailTabView.prototype, + /** @lends OCA.Sharing.ShareTabView.prototype */ { + _template: null, + + /** + * Initialize the details view + */ + initialize: function() { + OCA.Files.DetailTabView.prototype.initialize.apply(this, arguments); + this.$el.addClass('shareTabView'); + }, + + getLabel: function() { + return t('files_sharing', 'Sharing'); + }, + + /** + * 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()); + } else { + // TODO: render placeholder text? + } + } + }); + + OCA.Sharing.ShareTabView = ShareTabView; +})(); + -- cgit v1.2.3 From ff614a7dbde66a9cd795a674d0e0635b6f32e3a5 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 15 Jul 2015 17:05:25 +0200 Subject: 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 (limited to 'apps/files_sharing/js') diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index 0bbdfe94903..a62bcd8c968 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 719299485a6..d69d8c09c16 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 355c76f9c64..9f0d48ff011 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 5eb74145f12..88463bda9e6 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 227eec79578..12bec0e8c9a 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 a18a6d19d15..00000000000 --- 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 48dfcae16d8..42bddc20b3c 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? } -- cgit v1.2.3 From ad90ba27cdcdcd60e04ee0b781c6698124e900fa Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Wed, 15 Jul 2015 17:35:35 +0200 Subject: Styling fixes + hightlight in files sidebar Sidebar scrolls with contents Highlight currently show file --- apps/files/css/detailsView.css | 6 +++--- apps/files/css/files.css | 1 + apps/files/js/detailsview.js | 1 + apps/files/js/filelist.js | 7 +++++++ apps/files_sharing/appinfo/app.php | 1 + apps/files_sharing/css/sharetabview.css | 3 +++ apps/files_sharing/js/sharetabview.js | 1 + 7 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 apps/files_sharing/css/sharetabview.css (limited to 'apps/files_sharing/js') diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css index a62bcd8c968..5b9b51a16d3 100644 --- a/apps/files/css/detailsView.css +++ b/apps/files/css/detailsView.css @@ -8,9 +8,9 @@ position: absolute; width: 350px; top: 0; - bottom: 0; right: 0; left: auto; + min-height: 100%; background-color: white; -webkit-transition: margin-right 300ms; -moz-transition: margin-right 300ms; @@ -28,11 +28,11 @@ } .app-files .detailsView .detailFileInfoContainer { - min-height: 200px; + min-height: 80px; padding: 10px; } -.app-files .detailsView .detailFileInfoContainer > div{ +.app-files .detailsView .detailFileInfoContainer > div { clear: both; margin-left: 5px; } diff --git a/apps/files/css/files.css b/apps/files/css/files.css index f2f2c5ac3bc..7375baeac30 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -143,6 +143,7 @@ #filestable tbody tr:active { background-color: rgb(240,240,240); } +#filestable tbody tr.highlighted, #filestable tbody tr.selected { background-color: rgb(230,230,230); } diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index d69d8c09c16..feced7e34dd 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -153,6 +153,7 @@ setFileInfo: function(fileInfo) { this._fileInfo = fileInfo; + // FIXME: this will render panels twice this.render(); // notify all panels diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 9f0d48ff011..5c7fcb6b998 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -286,12 +286,19 @@ */ _updateDetailsView: function(fileInfo) { var self = this; + var oldFileInfo = this._detailsView.getFileInfo(); + if (oldFileInfo) { + // TODO: use more efficient way, maybe track the highlight + this.$fileList.children().filterAttr('data-id', '' + oldFileInfo.id).removeClass('highlighted'); + } + if (!fileInfo) { this._detailsView.$el.addClass('disappear'); this._detailsView.setFileInfo(null); return; } + this.$fileList.children().filterAttr('data-id', '' + fileInfo.id).addClass('highlighted'); this._detailsView.setFileInfo(_.extend({ path: this.getCurrentDirectory() }, fileInfo)); diff --git a/apps/files_sharing/appinfo/app.php b/apps/files_sharing/appinfo/app.php index f72f5024622..9000fafd8dd 100644 --- a/apps/files_sharing/appinfo/app.php +++ b/apps/files_sharing/appinfo/app.php @@ -56,6 +56,7 @@ $application->setupPropagation(); \OCP\Util::addScript('files_sharing', 'share'); \OCP\Util::addScript('files_sharing', 'external'); +\OCP\Util::addStyle('files_sharing', 'sharetabview'); // FIXME: registering a job here will cause additional useless SQL queries // when the route is not cron.php, needs a better way diff --git a/apps/files_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css new file mode 100644 index 00000000000..a8ad1ceaba7 --- /dev/null +++ b/apps/files_sharing/css/sharetabview.css @@ -0,0 +1,3 @@ +.app-files .shareTabView { + min-height: 200px; +} diff --git a/apps/files_sharing/js/sharetabview.js b/apps/files_sharing/js/sharetabview.js index 42bddc20b3c..e02de923751 100644 --- a/apps/files_sharing/js/sharetabview.js +++ b/apps/files_sharing/js/sharetabview.js @@ -55,6 +55,7 @@ this.$el.append(this._template({ owner: this._fileInfo.shareOwner || OC.currentUser })); + } else { // TODO: render placeholder text? } -- cgit v1.2.3 From b6192db61076b04005388b889d6ec666f3e87687 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 16 Jul 2015 12:28:19 +0200 Subject: Disable right sidebar in public file list page --- apps/files/js/filelist.js | 17 ++++++++++++----- apps/files_sharing/js/public.js | 3 ++- 2 files changed, 14 insertions(+), 6 deletions(-) (limited to 'apps/files_sharing/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 796b14199d8..e228b8e852b 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -23,6 +23,7 @@ * @param [options.scrollContainer] scrollable container, defaults to $(window) * @param [options.dragOptions] drag options, disabled by default * @param [options.folderDropOptions] folder drop options, disabled by default + * @param [options.detailsViewEnabled=true] whether to enable details view */ var FileList = function($el, options) { this.initialize($el, options); @@ -210,10 +211,12 @@ } 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'); + if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) { + 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); @@ -285,6 +288,10 @@ * @param {OCA.Files.FileInfo} fileInfo file info to display */ _updateDetailsView: function(fileInfo) { + if (!this._detailsView) { + return; + } + var self = this; var oldFileInfo = this._detailsView.getFileInfo(); if (oldFileInfo) { @@ -403,7 +410,7 @@ this.updateSelectionSummary(); } else { // clicked directly on the name - if ($(event.target).is('.nametext') || $(event.target).closest('.nametext').length) { + if (!this._detailsView || $(event.target).is('.nametext') || $(event.target).closest('.nametext').length) { var filename = $tr.attr('data-file'); var renaming = $tr.data('renaming'); if (!renaming) { diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index 5923e426f05..1993efe7d73 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -57,7 +57,8 @@ OCA.Sharing.PublicApp = { scrollContainer: $(window), dragOptions: dragOptions, folderDropOptions: folderDropOptions, - fileActions: fileActions + fileActions: fileActions, + detailsViewEnabled: false } ); this.files = OCA.Files.Files; -- cgit v1.2.3