From 174ba1f0124b9f5999d6f9842259ab1b2b143c5a Mon Sep 17 00:00:00 2001 From: Abijeet Date: Mon, 28 May 2018 07:19:01 +0530 Subject: [PATCH] Adds an action dropdown that is shown on file selection. Signed-off-by: Abijeet --- apps/files/css/files.scss | 8 +-- apps/files/js/filelist.js | 53 ++++++++++++--- apps/files/js/fileselectionmenu.js | 100 +++++++++++++++++++++++++++++ apps/files/js/merged-index.json | 1 + apps/files/templates/list.php | 28 +++----- 5 files changed, 157 insertions(+), 33 deletions(-) create mode 100644 apps/files/js/fileselectionmenu.js diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index d2d810c1e6..bbc95d7cd6 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -169,7 +169,7 @@ table.multiselect th a { color: #000; } table th .columntitle { - display: block; + display: inline-block; padding: 15px; height: 50px; box-sizing: border-box; @@ -178,7 +178,6 @@ table th .columntitle { } table th .columntitle.name { padding-left: 5px; - padding-right: 80px; margin-left: 50px; } @@ -474,10 +473,9 @@ a.action > img { /* Actions for selected files */ .selectedActions { - position: absolute; - top: 0; - right: 0; + position: relative; } + .selectedActions a { display: inline; font-size: 11px; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 307147076b..ec203043e4 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -126,7 +126,11 @@ * @type OCA.Files.FileActions */ fileActions: null, - + /** + * File selection menu, defaults to OCA.Files.FileSelectionMenu + * @type OCA.Files.FileSelectionMenu + */ + fileSelectionMenu: null, /** * Whether selection is allowed, checkboxes and selection overlay will * be rendered @@ -271,7 +275,8 @@ if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) { this._detailsView = new OCA.Files.DetailsView(); this._detailsView.$el.insertBefore(this.$el); - this._detailsView.$el.addClass('disappear'); + // this._detailsView.$el.addClass('disappear'); + this.showDetailsView('/'); } this._initFileActions(options.fileActions); @@ -288,6 +293,28 @@ this.fileSummary = this._createSummary(); + this.fileSelectionMenu = new OCA.Files.FileSelectionMenu([ + { + name: 'moveCopy', + displayName: t('files', 'Move or copy'), + iconClass: 'icon-external', + method: _.bind(this._onClickCopyMoveSelected, this) + }, + { + name: 'download', + displayName: t('files', 'Download'), + iconClass: 'icon-download', + method: _.bind(this._onClickDownloadSelected, this) + }, + { + name: 'delete', + displayName: t('files', 'Delete'), + iconClass: 'icon-delete', + method: _.bind(this._onClickDeleteSelected, this) + } + ]); + this.$el.find('#selectedActionsList').append(this.fileSelectionMenu.$el); + if (options.sorting) { this.setSort(options.sorting.mode, options.sorting.direction, false, false); } else { @@ -339,6 +366,10 @@ this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this)); this.$el.find('.copy-move').click(_.bind(this._onClickCopyMoveSelected, this)); this.$el.find('.delete-selected').click(_.bind(this._onClickDeleteSelected, this)); + this.$el.find('.actions-selected').click(function () { + self.fileSelectionMenu.show(self); + return false; + }); this.$el.find('.selectedActions a').tooltip({placement:'top'}); @@ -365,6 +396,7 @@ } } + OC.Plugins.attach('OCA.Files.FileList', this); }, @@ -754,6 +786,7 @@ files = _.pluck(this.getSelectedFiles(), 'name'); } + // TODO: Update var downloadFileaction = $('#selectedActionsList').find('.download'); // don't allow a second click on the download action @@ -786,6 +819,7 @@ files = _.pluck(this.getSelectedFiles(), 'name'); + // TODO: Update var moveFileAction = $('#selectedActionsList').find('.move'); // don't allow a second click on the download action @@ -2882,22 +2916,21 @@ selection += ' (' + hiddenInfo + ')'; } + // TODO : Change here!! this.$el.find('#headerName a.name>span:first').text(selection); this.$el.find('#modified a>span:first').text(''); this.$el.find('table').addClass('multiselect'); - this.$el.find('.selectedActions .download').toggleClass('hidden', !this.isSelectedDownloadable()); - this.$el.find('.delete-selected').toggleClass('hidden', !this.isSelectedDeletable()); - var $copyMove = this.$el.find('.selectedActions .copy-move'); + + this.fileSelectionMenu.toggleItemVisibility('download', !this.isSelectedDownloadable()); + this.fileSelectionMenu.toggleItemVisibility('delete', !this.isSelectedDeletable()); + this.fileSelectionMenu.toggleItemVisibility('moveCopy', !this.isSelectedCopiable()); if (this.isSelectedCopiable()) { - $copyMove.toggleClass('hidden', false); if (this.isSelectedMovable()) { - $copyMove.find('.label').text(t('files', 'Move or copy')); + this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Move or copy')); } else { - $copyMove.find('.label').text(t('files', 'Copy')); + this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Copy')); } - } else { - $copyMove.toggleClass('hidden', true); } } }, diff --git a/apps/files/js/fileselectionmenu.js b/apps/files/js/fileselectionmenu.js new file mode 100644 index 0000000000..8cb10f08bb --- /dev/null +++ b/apps/files/js/fileselectionmenu.js @@ -0,0 +1,100 @@ +/* + * Copyright (c) 2018 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + var TEMPLATE_MENU = + ''; + + var FileSelectionMenu = OC.Backbone.View.extend({ + tagName: 'div', + className: 'filesSelectMenu popovermenu bubble menu-center', + _scopes: null, + /** + * Event handler whenever an action has been clicked within the menu + * + * @param {Object} event event object + */ + _onClickAction: function(event) { + var $target = $(event.currentTarget); + if (!$target.hasClass('menuitem')) { + $target = $target.closest('.menuitem'); + } + + OC.hideMenus(); + + var action = $target.data('action'); + if (!action) { + return; + } + + for (var i = 0; i !== this._scopes.length; ++i) { + var name = this._scopes[i].name; + var method = this._scopes[i].method; + if (name === action) { + method(event); + break; + } + } + + }, + initialize: function(menuItems) { + console.log('init-fileseleectionmenu'); + console.log(menuItems); + this._scopes = menuItems; + }, + events: { + 'click a.action': '_onClickAction' + }, + template: Handlebars.compile(TEMPLATE_MENU), + /** + * Renders the menu with the currently set items + */ + render: function() { + this.$el.html(this.template({ + items: this._scopes + })); + }, + /** + * Displays the menu under the given element + * + * @param {OCA.Files.FileActionContext} context context + * @param {Object} $trigger trigger element + */ + show: function(context) { + this._context = context; + + this.render(); + this.$el.removeClass('hidden'); + + OC.showMenu(null, this.$el); + return false; + }, + toggleItemVisibility: function (itemName, hide) { + this.$el.find('.item-' + itemName).toggleClass('hidden', hide); + }, + updateItemText: function (itemName, translation) { + this.$el.find('.item-' + itemName).find('label').text(translation); + } + }); + + OCA.Files.FileSelectionMenu = FileSelectionMenu; +})(OC, OCA); \ No newline at end of file diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json index 127bbb46b2..05b33139e9 100644 --- a/apps/files/js/merged-index.json +++ b/apps/files/js/merged-index.json @@ -6,6 +6,7 @@ "jquery-visibility.js", "fileinfomodel.js", "filesummary.js", + "fileselectionmenu.js", "breadcrumb.js", "filelist.js", "search.js", diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index e6b1e54d38..9cae72a176 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -49,20 +49,16 @@ @@ -71,10 +67,6 @@ t( 'Modified' )); ?> - - t('Delete'))?> - -