From 174ba1f0124b9f5999d6f9842259ab1b2b143c5a Mon Sep 17 00:00:00 2001 From: Abijeet Date: Mon, 28 May 2018 07:19:01 +0530 Subject: [PATCH 01/10] 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'))?> - - From 45db89f3e6b7b391db5f9c766f3b3ef8b4e0750a Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 2 Jun 2018 20:45:19 +0530 Subject: [PATCH 02/10] 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 ++++++++----------- ...electionmenu.js => filemultiselectmenu.js} | 80 +++++++++------- 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 +--- 11 files changed, 152 insertions(+), 132 deletions(-) rename apps/files/js/{fileselectionmenu.js => filemultiselectmenu.js} (62%) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index bbc95d7cd6..b3ce4c0239 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 c5bb819392..42526a5c3f 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 6e4e8c1b13..f8e59a71b9 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 4c0ccaf645..3623663ed6 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 ec203043e4..c5929fbd21 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/fileselectionmenu.js b/apps/files/js/filemultiselectmenu.js similarity index 62% rename from apps/files/js/fileselectionmenu.js rename to apps/files/js/filemultiselectmenu.js index 8cb10f08bb..767166b06c 100644 --- a/apps/files/js/fileselectionmenu.js +++ b/apps/files/js/filemultiselectmenu.js @@ -20,45 +20,15 @@ '' + '{{/if}}' + '{{displayName}}' + - '' + + '' + '{{/each}}' + ''; - var FileSelectionMenu = OC.Backbone.View.extend({ + var FileMultiSelectMenu = 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: { @@ -84,7 +54,11 @@ 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; }, @@ -93,8 +67,44 @@ }, 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.FileSelectionMenu = FileSelectionMenu; -})(OC, OCA); \ No newline at end of file + OCA.Files.FileMultiSelectMenu = FileMultiSelectMenu; +})(OC, OCA); diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json index 05b33139e9..cd7e72e1a5 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 6c271a07f5..cfdb95c80a 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 1dc927c9b5..78adb21922 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 fd3d5db32f..002c01bf96 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 a4459947d0..dd24abb5de 100644 --- a/apps/files_trashbin/templates/index.php +++ b/apps/files_trashbin/templates/index.php @@ -31,25 +31,15 @@ From 0ca9ce0f84a00bf2cabb84be52a3cdaeb7e08cd8 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 2 Jun 2018 20:48:27 +0530 Subject: [PATCH 03/10] Fixes the position of the navigation toggle menu icon in mobile. Signed-off-by: Abijeet --- core/css/mobile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/mobile.scss b/core/css/mobile.scss index cfc8c002e1..239876223d 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -67,7 +67,7 @@ #app-navigation-toggle { position: fixed; display: inline-block !important; - top: 45px; + top: 50px; left: 0; width: 44px; height: 44px; From e89f6590e2983c55b1a15f700eb3258554f36197 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Wed, 6 Jun 2018 23:30:56 +0530 Subject: [PATCH 04/10] Fixed failing test cases for the new actions menu. Signed-off-by: Abijeet --- apps/files/tests/js/filelistSpec.js | 62 ++++++++++++++------ apps/files_trashbin/tests/js/filelistSpec.js | 43 ++++++++++---- 2 files changed, 74 insertions(+), 31 deletions(-) diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 1b26a46817..27c5699778 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -94,9 +94,7 @@ describe('OCA.Files.FileList tests', function() { '' + 'Name' + '' + + 'Actions' + '' + '' + '' + @@ -161,7 +159,22 @@ describe('OCA.Files.FileList tests', function() { fileList = new OCA.Files.FileList($('#app-content-files'), { filesClient: filesClient, config: filesConfig, - enableUpload: true + enableUpload: true, + multiSelectMenu: [{ + name: 'copyMove', + 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', + }] }); }); afterEach(function() { @@ -2100,41 +2113,41 @@ describe('OCA.Files.FileList tests', function() { fileList.setFiles(testFiles); $('#permissions').val(OC.PERMISSION_READ | OC.PERMISSION_UPDATE); $('.select-all').click(); - expect(fileList.$el.find('.selectedActions .copy-move').hasClass('hidden')).toEqual(false); - expect(fileList.$el.find('.selectedActions .copy-move .label').text()).toEqual('Move or copy'); + expect(fileList.$el.find('.selectedActions .item-copyMove').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .item-copyMove .label').text()).toEqual('Move or copy'); testFiles[0].permissions = OC.PERMISSION_READ; $('.select-all').click(); fileList.setFiles(testFiles); $('.select-all').click(); - expect(fileList.$el.find('.selectedActions .copy-move').hasClass('hidden')).toEqual(false); - expect(fileList.$el.find('.selectedActions .copy-move .label').text()).toEqual('Copy'); + expect(fileList.$el.find('.selectedActions .item-copyMove').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .item-copyMove .label').text()).toEqual('Copy'); testFiles[0].permissions = OC.PERMISSION_NONE; $('.select-all').click(); fileList.setFiles(testFiles); $('.select-all').click(); - expect(fileList.$el.find('.selectedActions .copy-move').hasClass('hidden')).toEqual(true); + expect(fileList.$el.find('.selectedActions .item-copyMove').hasClass('hidden')).toEqual(true); }); it('show doesnt show the download action if one or more files are not downloadable', function () { fileList.setFiles(testFiles); $('#permissions').val(OC.PERMISSION_READ | OC.PERMISSION_UPDATE); $('.select-all').click(); - expect(fileList.$el.find('.selectedActions .download').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .item-download').hasClass('hidden')).toEqual(false); testFiles[0].permissions = OC.PERMISSION_UPDATE; $('.select-all').click(); fileList.setFiles(testFiles); $('.select-all').click(); - expect(fileList.$el.find('.selectedActions .download').hasClass('hidden')).toEqual(true); + expect(fileList.$el.find('.selectedActions .item-download').hasClass('hidden')).toEqual(true); }); it('show doesnt show the delete action if one or more files are not deletable', function () { fileList.setFiles(testFiles); $('#permissions').val(OC.PERMISSION_READ | OC.PERMISSION_DELETE); $('.select-all').click(); - expect(fileList.$el.find('.delete-selected').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .item-delete').hasClass('hidden')).toEqual(false); testFiles[0].permissions = OC.PERMISSION_READ; $('.select-all').click(); fileList.setFiles(testFiles); $('.select-all').click(); - expect(fileList.$el.find('.delete-selected').hasClass('hidden')).toEqual(true); + expect(fileList.$el.find('.selectedActions .item-delete').hasClass('hidden')).toEqual(true); }); }); describe('Actions', function() { @@ -2219,8 +2232,12 @@ describe('OCA.Files.FileList tests', function() { }); }); describe('Download', function() { + beforeEach(function() { + fileList.$el.find('.actions-selected').click(); + }); + it('Opens download URL when clicking "Download"', function() { - $('.selectedActions .download').click(); + $('.selectedActions .filesSelectMenu .download').click(); expect(redirectStub.calledOnce).toEqual(true); expect(redirectStub.getCall(0).args[0]).toContain(OC.webroot + '/index.php/apps/files/ajax/download.php?dir=%2Fsubdir&files=%5B%22One.txt%22%2C%22Three.pdf%22%2C%22somedir%22%5D'); redirectStub.restore(); @@ -2228,28 +2245,37 @@ describe('OCA.Files.FileList tests', function() { it('Downloads root folder when all selected in root folder', function() { $('#dir').val('/'); $('.select-all').click(); - $('.selectedActions .download').click(); + $('.selectedActions .filesSelectMenu .download').click(); expect(redirectStub.calledOnce).toEqual(true); expect(redirectStub.getCall(0).args[0]).toContain(OC.webroot + '/index.php/apps/files/ajax/download.php?dir=%2F&files='); }); it('Downloads parent folder when all selected in subfolder', function() { $('.select-all').click(); - $('.selectedActions .download').click(); + $('.selectedActions .filesSelectMenu .download').click(); expect(redirectStub.calledOnce).toEqual(true); expect(redirectStub.getCall(0).args[0]).toContain(OC.webroot + '/index.php/apps/files/ajax/download.php?dir=%2F&files=subdir'); }); + + afterEach(function() { + fileList.$el.find('.actions-selected').click(); + }); }); + describe('Delete', function() { var deleteStub, deferredDelete; beforeEach(function() { deferredDelete = $.Deferred(); deleteStub = sinon.stub(filesClient, 'remove').returns(deferredDelete.promise()); + fileList.$el.find('.actions-selected').click(); }); + afterEach(function() { + fileList.$el.find('.actions-selected').click(); deleteStub.restore(); }); + it('Deletes selected files when "Delete" clicked', function() { - $('.selectedActions .delete-selected').click(); + $('.selectedActions .filesSelectMenu .delete').click(); expect(deleteStub.callCount).toEqual(3); expect(deleteStub.getCall(0).args[0]).toEqual('/subdir/One.txt'); @@ -2265,7 +2291,7 @@ describe('OCA.Files.FileList tests', function() { }); it('Deletes all files when all selected when "Delete" clicked', function() { $('.select-all').click(); - $('.selectedActions .delete-selected').click(); + $('.selectedActions .filesSelectMenu .delete').click(); expect(deleteStub.callCount).toEqual(4); expect(deleteStub.getCall(0).args[0]).toEqual('/subdir/One.txt'); diff --git a/apps/files_trashbin/tests/js/filelistSpec.js b/apps/files_trashbin/tests/js/filelistSpec.js index 04ff243d07..9d1308af3e 100644 --- a/apps/files_trashbin/tests/js/filelistSpec.js +++ b/apps/files_trashbin/tests/js/filelistSpec.js @@ -46,8 +46,8 @@ describe('OCA.Trashbin.FileList tests', function() { '' + 'Name' + '' + + 'Actions' + + '' + '' + '' + '' + @@ -90,7 +90,18 @@ describe('OCA.Trashbin.FileList tests', function() { var fileActions = OCA.Trashbin.App._createFileActions(fileList); fileList = new OCA.Trashbin.FileList( $('#app-content-trashbin'), { - fileActions: fileActions + fileActions: fileActions, + multiSelectMenu: [{ + name: 'restore', + displayName: t('files', 'Restore'), + iconClass: 'icon-history', + }, + { + name: 'delete', + displayName: t('files', 'Delete'), + iconClass: 'icon-delete', + } + ] } ); }); @@ -260,33 +271,39 @@ describe('OCA.Trashbin.FileList tests', function() { fileList.findFileEl('One.txt.d11111').find('input:checkbox').click(); fileList.findFileEl('Three.pdf.d33333').find('input:checkbox').click(); fileList.findFileEl('somedir.d99999').find('input:checkbox').click(); + fileList.$el.find('.actions-selected').click(); }); + + afterEach(function() { + fileList.$el.find('.actions-selected').click(); + }); + describe('Delete', function() { it('Shows trashbin actions', function() { // visible because a few files were selected expect($('.selectedActions').is(':visible')).toEqual(true); - expect($('.selectedActions .delete-selected').is(':visible')).toEqual(true); - expect($('.selectedActions .undelete').is(':visible')).toEqual(true); + expect($('.selectedActions .item-delete').is(':visible')).toEqual(true); + expect($('.selectedActions .item-restore').is(':visible')).toEqual(true); // check fileList.$el.find('.select-all').click(); // stays visible expect($('.selectedActions').is(':visible')).toEqual(true); - expect($('.selectedActions .delete-selected').is(':visible')).toEqual(true); - expect($('.selectedActions .undelete').is(':visible')).toEqual(true); + expect($('.selectedActions .item-delete').is(':visible')).toEqual(true); + expect($('.selectedActions .item-restore').is(':visible')).toEqual(true); // uncheck fileList.$el.find('.select-all').click(); // becomes hidden now expect($('.selectedActions').is(':visible')).toEqual(false); - expect($('.selectedActions .delete-selected').is(':visible')).toEqual(false); - expect($('.selectedActions .undelete').is(':visible')).toEqual(false); + expect($('.selectedActions .item-delete').is(':visible')).toEqual(false); + expect($('.selectedActions .item-restore').is(':visible')).toEqual(false); }); it('Deletes selected files when "Delete" clicked', function() { var request; - $('.selectedActions .delete-selected').click(); + $('.selectedActions .filesSelectMenu .delete').click(); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/delete.php'); @@ -314,7 +331,7 @@ describe('OCA.Trashbin.FileList tests', function() { it('Deletes all files when all selected when "Delete" clicked', function() { var request; $('.select-all').click(); - $('.selectedActions .delete-selected').click(); + $('.selectedActions .filesSelectMenu .delete').click(); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/delete.php'); @@ -331,7 +348,7 @@ describe('OCA.Trashbin.FileList tests', function() { describe('Restore', function() { it('Restores selected files when "Restore" clicked', function() { var request; - $('.selectedActions .undelete').click(); + $('.selectedActions .filesSelectMenu .restore').click(); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/undelete.php'); @@ -359,7 +376,7 @@ describe('OCA.Trashbin.FileList tests', function() { it('Restores all files when all selected when "Restore" clicked', function() { var request; $('.select-all').click(); - $('.selectedActions .undelete').click(); + $('.selectedActions .filesSelectMenu .restore').click(); expect(fakeServer.requests.length).toEqual(1); request = fakeServer.requests[0]; expect(request.url).toEqual(OC.webroot + '/index.php/apps/files_trashbin/ajax/undelete.php'); From 0c77b93b8674db71df7d6ca24a8de600818175f6 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Wed, 6 Jun 2018 23:31:25 +0530 Subject: [PATCH 05/10] 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(-) diff --git a/apps/files/js/app.js b/apps/files/js/app.js index f8e59a71b9..6a21bce975 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 c5929fbd21..cddedecda7 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 767166b06c..d587d1fbdb 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 4846c2361f..32b151ae68 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 From 5d95911537d43ccfbf9d5012763b4c7b5f0c33ff Mon Sep 17 00:00:00 2001 From: Abijeet Date: Thu, 14 Jun 2018 09:36:03 +0530 Subject: [PATCH 06/10] Fixes UI issues with the design, 1. Removes an unnecessary width 2. Content of the table header moving down on selection. Happening due to increase in height of header. 3. Invalid font-size for the actions menu. 4. Vertical position of the action menu Signed-off-by: Abijeet --- apps/files/css/files.scss | 7 ++++--- apps/files/css/mobile.scss | 3 --- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index b3ce4c0239..6a56036119 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -248,7 +248,7 @@ table th.column-last, table td.column-last { } table.multiselect thead { position: fixed; - top: 89px; + top: 94px; z-index: 55; -moz-box-sizing: border-box; box-sizing: border-box; @@ -477,13 +477,14 @@ a.action > img { /* Actions for selected files */ .selectedActions { position: relative; + display: inline-block; + vertical-align: middle; } .selectedActions a { display: inline; - font-size: 11px; line-height: 50px; - padding: 18px 5px; + padding: 16px 5px; } .selectedActions a.hidden { diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index 42526a5c3f..a53066c445 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -66,9 +66,6 @@ table.dragshadow { } @media only screen and (max-width: 480px) { - table thead { - width: 100% !important; - } /* Only show icons */ table th .selectedActions { float: right; From 57b649d665853819a4055f3a3a0ec21f5a1c51f4 Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Fri, 15 Jun 2018 17:13:40 +0200 Subject: [PATCH 07/10] Fix alignment of more icon Signed-off-by: Morris Jobke --- apps/files/css/files.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 6a56036119..06567332b7 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -496,6 +496,10 @@ a.action > img { margin-bottom: -1px; } +.selectedActions .actions-selected .icon-more { + margin-top: -3px; +} + #fileList td a { a.action { display: inline; From 470310b3bff21ebbc8b994ebba7c9de685f97c44 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 16 Jun 2018 02:35:29 +0530 Subject: [PATCH 08/10] 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(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 06567332b7..38c74d242b 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 cddedecda7..08c2844a29 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); } From 55216e6b9558d333158aaed87d16d988f247da82 Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 16 Jun 2018 02:47:46 +0530 Subject: [PATCH 09/10] Fixes the restore loading icon appearing continuously. Signed-off-by: Abijeet --- apps/files_trashbin/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files_trashbin/js/filelist.js b/apps/files_trashbin/js/filelist.js index 32b151ae68..324e4d8a7e 100644 --- a/apps/files_trashbin/js/filelist.js +++ b/apps/files_trashbin/js/filelist.js @@ -195,7 +195,7 @@ else { self._removeCallback(result); } - self.fileMultiSelectMenu.toggleLoading('restore', true); + self.fileMultiSelectMenu.toggleLoading('restore', false); } ); event.preventDefault(); From 419d72e0eed300e5792f02c8d458a5da0367541d Mon Sep 17 00:00:00 2001 From: Abijeet Date: Sat, 16 Jun 2018 13:07:55 +0530 Subject: [PATCH 10/10] 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(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 08c2844a29..c420e7212a 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 27c5699778..efaf9968de 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 9d1308af3e..c5b1018856 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);