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 d2d810c1e6c..bbc95d7cd6d 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 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", diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index e6b1e54d389..9cae72a176f 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 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/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 8cb10f08bbc..767166b06c3 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 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 @@ 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 cfc8c002e17..239876223d5 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 1b26a468172..27c56997786 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 04ff243d07b..9d1308af3e4 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 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 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 b3ce4c02392..6a56036119a 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 42526a5c3f5..a53066c4452 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 6a56036119a..06567332b7d 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 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); } 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 32b151ae684..324e4d8a7e0 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 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);