From 174ba1f0124b9f5999d6f9842259ab1b2b143c5a Mon Sep 17 00:00:00 2001 From: Abijeet Date: Mon, 28 May 2018 07:19:01 +0530 Subject: Adds an action dropdown that is shown on file selection. Signed-off-by: Abijeet --- apps/files/js/filelist.js | 53 ++++++++++++++++---- apps/files/js/fileselectionmenu.js | 100 +++++++++++++++++++++++++++++++++++++ apps/files/js/merged-index.json | 1 + 3 files changed, 144 insertions(+), 10 deletions(-) create mode 100644 apps/files/js/fileselectionmenu.js (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 307147076b2..ec203043e4f 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 00000000000..8cb10f08bbc --- /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 127bbb46b29..05b33139e95 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", -- cgit v1.2.3 From 45db89f3e6b7b391db5f9c766f3b3ef8b4e0750a Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 2 Jun 2018 20:45:19 +0530 Subject: Added a new action menu in files and trash list. Uses the new file-multi-select-menu component. Towards #7647 Signed-off-by: Abijeet --- apps/files/css/files.scss | 13 ++-- apps/files/css/mobile.scss | 14 ++-- apps/files/js/app.js | 19 +++++- apps/files/js/fileactions.js | 12 ++-- apps/files/js/filelist.js | 91 ++++++++++++-------------- apps/files/js/filemultiselectmenu.js | 110 ++++++++++++++++++++++++++++++++ apps/files/js/fileselectionmenu.js | 100 ----------------------------- apps/files/js/merged-index.json | 2 +- apps/files/templates/recentlist.php | 10 +-- apps/files/templates/simplelist.php | 13 ++-- apps/files_trashbin/js/app.js | 14 +++- apps/files_trashbin/templates/index.php | 16 +---- 12 files changed, 217 insertions(+), 197 deletions(-) create mode 100644 apps/files/js/filemultiselectmenu.js delete mode 100644 apps/files/js/fileselectionmenu.js (limited to 'apps/files/js') diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index bbc95d7cd6d..b3ce4c02392 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -169,13 +169,16 @@ table.multiselect th a { color: #000; } table th .columntitle { - display: inline-block; + display: block; padding: 15px; height: 50px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: middle; } +table.multiselect th .columntitle { + display: inline-block; +} table th .columntitle.name { padding-left: 5px; margin-left: 50px; @@ -482,9 +485,7 @@ a.action > img { line-height: 50px; padding: 18px 5px; } -.selectedActions a.delete-selected { - padding-right: 15px; -} + .selectedActions a.hidden { display: none; } @@ -493,10 +494,6 @@ a.action > img { vertical-align: text-bottom; margin-bottom: -1px; } -/* hide the delete icon in name column normal resolutions */ -table th#headerName .selectedActions .delete-selected { - display: none; -} #fileList td a { a.action { diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index c5bb8193924..42526a5c3f5 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -28,7 +28,7 @@ table td { table.multiselect thead { padding-left: 0; } - + #fileList a.action.action-menu img { padding-left: 0; } @@ -41,10 +41,6 @@ table.multiselect thead { display: none !important; } -/* show the delete icon in name column in lower resolutions */ -table th#headerName .selectedActions .delete-selected { - display: inline; -} /* proper notification area for multi line messages */ #notification-container { @@ -70,8 +66,14 @@ table.dragshadow { } @media only screen and (max-width: 480px) { + table thead { + width: 100% !important; + } /* Only show icons */ - table th .selectedActions a span:not(.icon) { + table th .selectedActions { + float: right; + } + table th .selectedActions > a span:not(.icon) { display: none; } diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 6e4e8c1b136..f8e59a71b94 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -88,6 +88,23 @@ allowLegacyActions: true, scrollTo: urlParams.scrollto, filesClient: OC.Files.getClient(), + multiSelectMenu: [ + { + name: 'moveCopy', + displayName: t('files', 'Move or copy'), + iconClass: 'icon-external', + }, + { + name: 'download', + displayName: t('files', 'Download'), + iconClass: 'icon-download', + }, + { + name: 'delete', + displayName: t('files', 'Delete'), + iconClass: 'icon-delete', + } + ], sorting: { mode: $('#defaultFileSorting').val(), direction: $('#defaultFileSortingDirection').val() @@ -130,7 +147,7 @@ window.FileActions.off('registerAction.app-files', this._onActionsUpdated); }, - _onActionsUpdated: function(ev, newAction) { + _onActionsUpdated: function(ev) { // forward new action to the file list if (ev.action) { this.fileList.fileActions.registerAction(ev.action); diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js index 4c0ccaf6451..3623663ed6c 100644 --- a/apps/files/js/fileactions.js +++ b/apps/files/js/fileactions.js @@ -692,21 +692,21 @@ OCA.Files.FileActions = FileActions; /** - * Replaces the download icon with a loading spinner and vice versa + * Replaces the button icon with a loading spinner and vice versa * - also adds the class disabled to the passed in element * - * @param {jQuery} $downloadButtonElement download fileaction + * @param {jQuery} $buttonElement The button element * @param {boolean} showIt whether to show the spinner(true) or to hide it(false) */ - OCA.Files.FileActions.updateFileActionSpinner = function($downloadButtonElement, showIt) { - var $icon = $downloadButtonElement.find('.icon'); + OCA.Files.FileActions.updateFileActionSpinner = function($buttonElement, showIt) { + var $icon = $buttonElement.find('.icon'); if (showIt) { var $loadingIcon = $(''); $icon.after($loadingIcon); $icon.addClass('hidden'); } else { - $downloadButtonElement.find('.icon-loading-small').remove(); - $downloadButtonElement.find('.icon').removeClass('hidden'); + $buttonElement.find('.icon-loading-small').remove(); + $buttonElement.find('.icon').removeClass('hidden'); } }; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index ec203043e4f..c5929fbd212 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -130,7 +130,7 @@ * File selection menu, defaults to OCA.Files.FileSelectionMenu * @type OCA.Files.FileSelectionMenu */ - fileSelectionMenu: null, + fileMultiSelectMenu: null, /** * Whether selection is allowed, checkboxes and selection overlay will * be rendered @@ -293,27 +293,10 @@ 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.multiSelectMenu) { + this.fileMultiSelectMenu = new OCA.Files.FileMultiSelectMenu(options.multiSelectMenu); + this.$el.find('#selectedActionsList').append(this.fileMultiSelectMenu.$el); + } if (options.sorting) { this.setSort(options.sorting.mode, options.sorting.direction, false, false); @@ -363,16 +346,11 @@ this.$el.on('show', _.bind(this._onShow, this)); this.$el.on('urlChanged', _.bind(this._onUrlChanged, this)); this.$el.find('.select-all').click(_.bind(this._onClickSelectAll, this)); - 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); + self.fileMultiSelectMenu.show(self); return false; }); - this.$el.find('.selectedActions a').tooltip({placement:'top'}); - this.$container.on('scroll', _.bind(this._onScroll, this)); if (options.scrollTo) { @@ -420,6 +398,22 @@ $('#app-content').off('appresized', this._onResize); }, + multiSelectMenuClick: function (ev, action) { + switch (action) { + case 'delete': + this._onClickDeleteSelected(ev) + break; + case 'download': + this._onClickDownloadSelected(ev); + break; + case 'moveCopy': + this._onClickCopyMoveSelected(ev); + break; + case 'restore': + this._onClickRestoreSelected(ev); + break; + } + }, /** * Initializes the file actions, set up listeners. * @@ -775,9 +769,11 @@ /** * Event handler for when clicking on "Download" for the selected files */ - _onClickDownloadSelected: function(event) { + _onClickDownloadSelected: function() { var files; + var self = this; var dir = this.getCurrentDirectory(); + if (this.isAllSelected() && this.getSelectedFiles().length > 1) { files = OC.basename(dir); dir = OC.dirname(dir) || '/'; @@ -786,20 +782,16 @@ files = _.pluck(this.getSelectedFiles(), 'name'); } - // TODO: Update - var downloadFileaction = $('#selectedActionsList').find('.download'); - // don't allow a second click on the download action - if(downloadFileaction.hasClass('disabled')) { - event.preventDefault(); - return; + if(this.fileMultiSelectMenu.isDisabled('download')) { + return false; } + this.fileMultiSelectMenu.toggleLoading('download', true); var disableLoadingState = function(){ - OCA.Files.FileActions.updateFileActionSpinner(downloadFileaction, false); + self.fileMultiSelectMenu.toggleLoading('download', false); }; - OCA.Files.FileActions.updateFileActionSpinner(downloadFileaction, true); if(this.getSelectedFiles().length > 1) { OCA.Files.Files.handleDownload(this.getDownloadUrl(files, dir, true), disableLoadingState); } @@ -813,23 +805,20 @@ /** * Event handler for when clicking on "Move" for the selected files */ - _onClickCopyMoveSelected: function(event) { + _onClickCopyMoveSelected: function() { var files; var self = this; files = _.pluck(this.getSelectedFiles(), 'name'); - // TODO: Update - var moveFileAction = $('#selectedActionsList').find('.move'); - // don't allow a second click on the download action - if(moveFileAction.hasClass('disabled')) { - event.preventDefault(); - return; + if(this.fileMultiSelectMenu.isDisabled('moveCopy')) { + return false; } + self.fileMultiSelectMenu.toggleLoading('moveCopy', true); var disableLoadingState = function(){ - OCA.Files.FileActions.updateFileActionSpinner(moveFileAction, false); + self.fileMultiSelectMenu.toggleLoading('moveCopy', false); }; var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY; @@ -847,7 +836,7 @@ /** * Event handler for when clicking on "Delete" for the selected files */ - _onClickDeleteSelected: function(event) { + _onClickDeleteSelected: function() { var files = null; if (!this.isAllSelected()) { files = _.pluck(this.getSelectedFiles(), 'name'); @@ -2922,14 +2911,14 @@ this.$el.find('table').addClass('multiselect'); - this.fileSelectionMenu.toggleItemVisibility('download', !this.isSelectedDownloadable()); - this.fileSelectionMenu.toggleItemVisibility('delete', !this.isSelectedDeletable()); - this.fileSelectionMenu.toggleItemVisibility('moveCopy', !this.isSelectedCopiable()); + this.fileMultiSelectMenu.toggleItemVisibility('download', !this.isSelectedDownloadable()); + this.fileMultiSelectMenu.toggleItemVisibility('delete', !this.isSelectedDeletable()); + this.fileMultiSelectMenu.toggleItemVisibility('moveCopy', !this.isSelectedCopiable()); if (this.isSelectedCopiable()) { if (this.isSelectedMovable()) { - this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Move or copy')); + this.fileMultiSelectMenu.updateItemText('moveCopy', t('files', 'Move or copy')); } else { - this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Copy')); + this.fileMultiSelectMenu.updateItemText('moveCopy', t('files', 'Copy')); } } } diff --git a/apps/files/js/filemultiselectmenu.js b/apps/files/js/filemultiselectmenu.js new file mode 100644 index 00000000000..767166b06c3 --- /dev/null +++ b/apps/files/js/filemultiselectmenu.js @@ -0,0 +1,110 @@ +/* + * 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 FileMultiSelectMenu = OC.Backbone.View.extend({ + tagName: 'div', + className: 'filesSelectMenu popovermenu bubble menu-center', + _scopes: null, + initialize: function(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'); + if (window.innerWidth < 480) { + this.$el.removeClass('menu-center').addClass('menu-right'); + } else { + this.$el.removeClass('menu-right').addClass('menu-center'); + } + 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); + }, + toggleLoading: function (itemName, showLoading) { + var $actionElement = this.$el.find('.item-' + itemName); + if ($actionElement.length === 0) { + return; + } + var $icon = $actionElement.find('.icon'); + if (showLoading) { + var $loadingIcon = $(''); + $icon.after($loadingIcon); + $icon.addClass('hidden'); + $actionElement.addClass('disabled'); + } else { + $actionElement.find('.icon-loading-small').remove(); + $actionElement.find('.icon').removeClass('hidden'); + $actionElement.removeClass('disabled'); + } + }, + isDisabled: function (itemName) { + var $actionElement = this.$el.find('.item-' + itemName); + return $actionElement.hasClass('disabled'); + }, + /** + * 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(); + this._context.multiSelectMenuClick(event, $target.data('action')); + return false; + } + }); + + OCA.Files.FileMultiSelectMenu = FileMultiSelectMenu; +})(OC, OCA); diff --git a/apps/files/js/fileselectionmenu.js b/apps/files/js/fileselectionmenu.js deleted file mode 100644 index 8cb10f08bbc..00000000000 --- a/apps/files/js/fileselectionmenu.js +++ /dev/null @@ -1,100 +0,0 @@ -/* - * 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 05b33139e95..cd7e72e1a51 100644 --- a/apps/files/js/merged-index.json +++ b/apps/files/js/merged-index.json @@ -6,7 +6,7 @@ "jquery-visibility.js", "fileinfomodel.js", "filesummary.js", - "fileselectionmenu.js", + "filemultiselectmenu.js", "breadcrumb.js", "filelist.js", "search.js", diff --git a/apps/files/templates/recentlist.php b/apps/files/templates/recentlist.php index 6c271a07f5f..cfdb95c80a0 100644 --- a/apps/files/templates/recentlist.php +++ b/apps/files/templates/recentlist.php @@ -28,10 +28,12 @@ t('Modified')); ?> - - t('Delete')) ?> - - + + + + t('Delete')) ?> + + diff --git a/apps/files/templates/simplelist.php b/apps/files/templates/simplelist.php index 1dc927c9b59..78adb21922f 100644 --- a/apps/files/templates/simplelist.php +++ b/apps/files/templates/simplelist.php @@ -13,7 +13,6 @@

t('No entries found in this folder')); ?>

- @@ -27,11 +26,13 @@ diff --git a/apps/files_trashbin/js/app.js b/apps/files_trashbin/js/app.js index fd3d5db32ff..002c01bf967 100644 --- a/apps/files_trashbin/js/app.js +++ b/apps/files_trashbin/js/app.js @@ -30,7 +30,19 @@ OCA.Trashbin.App = { fileActions: this._createFileActions(), detailsViewEnabled: false, scrollTo: urlParams.scrollto, - config: OCA.Files.App.getFilesConfig() + config: OCA.Files.App.getFilesConfig(), + multiSelectMenu: [ + { + name: 'restore', + displayName: t('files', 'Restore'), + iconClass: 'icon-history', + }, + { + name: 'delete', + displayName: t('files', 'Delete'), + iconClass: 'icon-delete', + } + ] } ); }, diff --git a/apps/files_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php index a4459947d09..dd24abb5de1 100644 --- a/apps/files_trashbin/templates/index.php +++ b/apps/files_trashbin/templates/index.php @@ -31,25 +31,15 @@ -- cgit v1.2.3 From 0c77b93b8674db71df7d6ca24a8de600818175f6 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Wed, 6 Jun 2018 23:31:25 +0530 Subject: Fixes issues found during running of test cases. Signed-off-by: Abijeet --- apps/files/js/app.js | 2 +- apps/files/js/filelist.js | 42 +++++++++++++++++++----------------- apps/files/js/filemultiselectmenu.js | 12 ++++++----- apps/files_trashbin/js/filelist.js | 20 +++++------------ 4 files changed, 35 insertions(+), 41 deletions(-) (limited to 'apps/files/js') diff --git a/apps/files/js/app.js b/apps/files/js/app.js index f8e59a71b94..6a21bce975b 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -90,7 +90,7 @@ filesClient: OC.Files.getClient(), multiSelectMenu: [ { - name: 'moveCopy', + name: 'copyMove', displayName: t('files', 'Move or copy'), iconClass: 'icon-external', }, diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index c5929fbd212..cddedecda78 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -295,7 +295,8 @@ if (options.multiSelectMenu) { this.fileMultiSelectMenu = new OCA.Files.FileMultiSelectMenu(options.multiSelectMenu); - this.$el.find('#selectedActionsList').append(this.fileMultiSelectMenu.$el); + this.fileMultiSelectMenu.render(); + this.$el.find('.selectedActions').append(this.fileMultiSelectMenu.$el); } if (options.sorting) { @@ -406,7 +407,7 @@ case 'download': this._onClickDownloadSelected(ev); break; - case 'moveCopy': + case 'copyMove': this._onClickCopyMoveSelected(ev); break; case 'restore': @@ -769,7 +770,7 @@ /** * Event handler for when clicking on "Download" for the selected files */ - _onClickDownloadSelected: function() { + _onClickDownloadSelected: function(event) { var files; var self = this; var dir = this.getCurrentDirectory(); @@ -799,26 +800,26 @@ var first = this.getSelectedFiles()[0]; OCA.Files.Files.handleDownload(this.getDownloadUrl(first.name, dir, true), disableLoadingState); } - return false; + event.preventDefault(); }, /** * Event handler for when clicking on "Move" for the selected files */ - _onClickCopyMoveSelected: function() { + _onClickCopyMoveSelected: function(event) { var files; var self = this; files = _.pluck(this.getSelectedFiles(), 'name'); // don't allow a second click on the download action - if(this.fileMultiSelectMenu.isDisabled('moveCopy')) { + if(this.fileMultiSelectMenu.isDisabled('copyMove')) { return false; } - self.fileMultiSelectMenu.toggleLoading('moveCopy', true); + self.fileMultiSelectMenu.toggleLoading('copyMove', true); var disableLoadingState = function(){ - self.fileMultiSelectMenu.toggleLoading('moveCopy', false); + self.fileMultiSelectMenu.toggleLoading('copyMove', false); }; var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY; @@ -830,20 +831,19 @@ self.move(files, targetPath, disableLoadingState); } }, false, "httpd/unix-directory", true, actions); - return false; + event.preventDefault(); }, /** * Event handler for when clicking on "Delete" for the selected files */ - _onClickDeleteSelected: function() { + _onClickDeleteSelected: function(event) { var files = null; if (!this.isAllSelected()) { files = _.pluck(this.getSelectedFiles(), 'name'); } this.do_delete(files); event.preventDefault(); - return false; }, /** @@ -2905,20 +2905,22 @@ 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.fileMultiSelectMenu.toggleItemVisibility('download', !this.isSelectedDownloadable()); - this.fileMultiSelectMenu.toggleItemVisibility('delete', !this.isSelectedDeletable()); - this.fileMultiSelectMenu.toggleItemVisibility('moveCopy', !this.isSelectedCopiable()); - if (this.isSelectedCopiable()) { - if (this.isSelectedMovable()) { - this.fileMultiSelectMenu.updateItemText('moveCopy', t('files', 'Move or copy')); + if (this.fileMultiSelectMenu) { + this.fileMultiSelectMenu.toggleItemVisibility('download', this.isSelectedDownloadable()); + this.fileMultiSelectMenu.toggleItemVisibility('delete', this.isSelectedDeletable()); + this.fileMultiSelectMenu.toggleItemVisibility('copyMove', this.isSelectedCopiable()); + if (this.isSelectedCopiable()) { + if (this.isSelectedMovable()) { + this.fileMultiSelectMenu.updateItemText('copyMove', t('files', 'Move or copy')); + } else { + this.fileMultiSelectMenu.updateItemText('copyMove', t('files', 'Copy')); + } } else { - this.fileMultiSelectMenu.updateItemText('moveCopy', t('files', 'Copy')); + this.fileMultiSelectMenu.toggleItemVisibility('copyMove', false); } } } diff --git a/apps/files/js/filemultiselectmenu.js b/apps/files/js/filemultiselectmenu.js index 767166b06c3..d587d1fbdb2 100644 --- a/apps/files/js/filemultiselectmenu.js +++ b/apps/files/js/filemultiselectmenu.js @@ -51,8 +51,6 @@ */ show: function(context) { this._context = context; - - this.render(); this.$el.removeClass('hidden'); if (window.innerWidth < 480) { this.$el.removeClass('menu-center').addClass('menu-right'); @@ -62,11 +60,15 @@ OC.showMenu(null, this.$el); return false; }, - toggleItemVisibility: function (itemName, hide) { - this.$el.find('.item-' + itemName).toggleClass('hidden', hide); + toggleItemVisibility: function (itemName, show) { + if (show) { + this.$el.find('.item-' + itemName).removeClass('hidden'); + } else { + this.$el.find('.item-' + itemName).addClass('hidden'); + } }, updateItemText: function (itemName, translation) { - this.$el.find('.item-' + itemName).find('label').text(translation); + this.$el.find('.item-' + itemName).find('.label').text(translation); }, toggleLoading: function (itemName, showLoading) { var $actionElement = this.$el.find('.item-' + itemName); diff --git a/apps/files_trashbin/js/filelist.js b/apps/files_trashbin/js/filelist.js index 4846c2361fe..32b151ae684 100644 --- a/apps/files_trashbin/js/filelist.js +++ b/apps/files_trashbin/js/filelist.js @@ -153,7 +153,6 @@ } this.fileSummary.update(); this.updateEmptyContent(); - this.enableActions(); }, _onClickRestoreSelected: function(event) { @@ -162,7 +161,7 @@ var allFiles = this.$el.find('.select-all').is(':checked'); var files = []; var params = {}; - this.disableActions(); + this.fileMultiSelectMenu.toggleLoading('restore', true); if (allFiles) { this.showMask(); params = { @@ -192,13 +191,14 @@ self.hideMask(); // simply remove all files self.setFiles([]); - self.enableActions(); } else { self._removeCallback(result); } + self.fileMultiSelectMenu.toggleLoading('restore', true); } ); + event.preventDefault(); }, _onClickDeleteSelected: function(event) { @@ -221,7 +221,7 @@ }; } - this.disableActions(); + this.fileMultiSelectMenu.toggleLoading('delete', true); if (allFiles) { this.showMask(); } @@ -242,11 +242,11 @@ self.hideMask(); // simply remove all files self.setFiles([]); - self.enableActions(); } else { self._removeCallback(result); } + self.fileMultiSelectMenu.toggleLoading('delete', false); } ); }, @@ -268,16 +268,6 @@ return '#'; }, - enableActions: function() { - this.$el.find('.action').css('display', 'inline'); - this.$el.find('input:checkbox').removeClass('u-hidden'); - }, - - disableActions: function() { - this.$el.find('.action').css('display', 'none'); - this.$el.find('input:checkbox').addClass('u-hidden'); - }, - updateStorageStatistics: function() { // no op because the trashbin doesn't have // storage info like free space / used space -- cgit v1.2.3 From 470310b3bff21ebbc8b994ebba7c9de685f97c44 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 16 Jun 2018 02:35:29 +0530 Subject: Fixes issue with action being displayed incorrectly. Also fixes the issue with the loading icon on copy & move. Signed-off-by: Abijeet --- apps/files/css/files.scss | 4 +++- apps/files/js/filelist.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'apps/files/js') diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 06567332b7d..38c74d242bc 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -480,7 +480,9 @@ a.action > img { display: inline-block; vertical-align: middle; } - +.selectedActions.hidden { + display: none; +} .selectedActions a { display: inline; line-height: 50px; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index cddedecda78..08c2844a294 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -817,13 +817,13 @@ return false; } - self.fileMultiSelectMenu.toggleLoading('copyMove', true); var disableLoadingState = function(){ self.fileMultiSelectMenu.toggleLoading('copyMove', false); }; var actions = this.isSelectedMovable() ? OC.dialogs.FILEPICKER_TYPE_COPY_MOVE : OC.dialogs.FILEPICKER_TYPE_COPY; OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) { + self.fileMultiSelectMenu.toggleLoading('copyMove', true); if (type === OC.dialogs.FILEPICKER_TYPE_COPY) { self.copy(files, targetPath, disableLoadingState); } -- cgit v1.2.3 From 419d72e0eed300e5792f02c8d458a5da0367541d Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 16 Jun 2018 13:07:55 +0530 Subject: Adds a test case for the loading symbol in deleted files. Signed-off-by: Abijeet --- apps/files/js/filelist.js | 3 +-- apps/files/tests/js/filelistSpec.js | 2 +- apps/files_trashbin/tests/js/filelistSpec.js | 10 ++++++++-- 3 files changed, 10 insertions(+), 5 deletions(-) (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 08c2844a294..c420e7212a0 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -275,8 +275,7 @@ if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) { this._detailsView = new OCA.Files.DetailsView(); this._detailsView.$el.insertBefore(this.$el); - // this._detailsView.$el.addClass('disappear'); - this.showDetailsView('/'); + this._detailsView.$el.addClass('disappear'); } this._initFileActions(options.fileActions); diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 27c56997786..efaf9968def 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -94,7 +94,7 @@ describe('OCA.Files.FileList tests', function() { '' + 'Name' + '' + '' + diff --git a/apps/files_trashbin/tests/js/filelistSpec.js b/apps/files_trashbin/tests/js/filelistSpec.js index 9d1308af3e4..c5b1018856b 100644 --- a/apps/files_trashbin/tests/js/filelistSpec.js +++ b/apps/files_trashbin/tests/js/filelistSpec.js @@ -303,7 +303,9 @@ describe('OCA.Trashbin.FileList tests', function() { }); it('Deletes selected files when "Delete" clicked', function() { var request; - $('.selectedActions .filesSelectMenu .delete').click(); + var $deleteLink = $('.selectedActions .filesSelectMenu .delete'); + $deleteLink.click(); + expect($deleteLink.find('.icon-loading-small').length).toEqual(1); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/delete.php'); @@ -323,6 +325,7 @@ describe('OCA.Trashbin.FileList tests', function() { } }) ); + expect($deleteLink.find('.icon-loading-small').length).toEqual(0); expect(fileList.findFileEl('One.txt.d11111').length).toEqual(0); expect(fileList.findFileEl('Three.pdf.d33333').length).toEqual(0); expect(fileList.findFileEl('somedir.d99999').length).toEqual(0); @@ -348,7 +351,9 @@ describe('OCA.Trashbin.FileList tests', function() { describe('Restore', function() { it('Restores selected files when "Restore" clicked', function() { var request; - $('.selectedActions .filesSelectMenu .restore').click(); + var $restoreLink = $('.selectedActions .filesSelectMenu .restore'); + $restoreLink.click(); + expect($restoreLink.find('.icon-loading-small').length).toEqual(1); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/undelete.php'); @@ -368,6 +373,7 @@ describe('OCA.Trashbin.FileList tests', function() { } }) ); + expect($restoreLink.find('.icon-loading-small').length).toEqual(0); expect(fileList.findFileEl('One.txt.d11111').length).toEqual(0); expect(fileList.findFileEl('Three.pdf.d33333').length).toEqual(0); expect(fileList.findFileEl('somedir.d99999').length).toEqual(0); -- cgit v1.2.3