From f8ee81262cb39ba1ecc23242c59df08e1c2e1aa9 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Tue, 14 Sep 2021 19:35:32 +0530 Subject: [PATCH 01/11] Change the file action button behavior for different viewport Signed-off-by: Kavita Sonawane --- apps/files/css/files.scss | 103 +++++++++++++++++++-- apps/files/css/mobile.scss | 29 ++++++ apps/files/js/app.js | 6 ++ apps/files/js/filelist.js | 69 +++++++++++++- apps/files/js/filemultipleselectionmenu.js | 92 ++++++++++++++++++ apps/files/js/filemultiselectmenu.js | 7 +- apps/files/js/merged-index.json | 1 + apps/files/templates/list.php | 29 ++++-- 8 files changed, 312 insertions(+), 24 deletions(-) create mode 100644 apps/files/js/filemultipleselectionmenu.js diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 15255fdc47f5e..e8c65f49a9440 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -243,6 +243,7 @@ table th .columntitle.name { table.multiselect th .columntitle.name { margin-left: 0; + padding-left: 15px; } table th .sort-indicator { @@ -311,9 +312,9 @@ table th.column-last, table td.column-last { top: 94px; } -#app-content-recent, -#app-content-favorites, -#app-content-shareoverview, +#app-content-recent, +#app-content-favorites, +#app-content-shareoverview, #app-content-sharingout, #app-content-sharingin, #app-content-sharinglinks, @@ -333,7 +334,7 @@ table.multiselect thead th { table.multiselect #headerName { position: relative; - width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ + width: auto; } table.multiselect #modified { display: none; @@ -721,7 +722,7 @@ a.action > img { .summary { color: var(--color-text-maxcontrast); /* add whitespace to bottom of files list to correctly show dropdowns */ - $action-menu-items-count: 7; // list view has currently max 7 items in its action menu + $action-menu-items-count: 7; // list view has currently max 7 items in its action menu height: 44px * ($action-menu-items-count + 0.5); // 0.5 is added to show some whitespace below } #filestable .filesummary { @@ -859,7 +860,7 @@ table.dragshadow td.size { overflow: auto; min-width: 160px; height: 54px; - + &:not(.hidden) { display: flex; } @@ -911,11 +912,9 @@ table.dragshadow td.size { /* HEADER and MULTISELECT */ thead { tr { - display: block; border-bottom: 1px solid var(--color-border); background-color: var(--color-main-background-translucent); th { - width: auto; border: none; } } @@ -1238,3 +1237,91 @@ table.dragshadow td.size { } } +/* Actions for selected files */ +#headerSize .hidden { + display: none; +} + +#headerDate .hidden { + display: none; +} + +#headerSizeOpen .hidden { + display: none; +} + +table.multiselect { + thead { + #selectedMenu { + width: 100%; + } + } +} + +.icon-cancel { + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbi9hY3Rpb24vY2xvc2UvZGVmYXVsdEBzdmc8L3RpdGxlPgogICAgPGcgaWQ9Imljb24vYWN0aW9uL2Nsb3NlL2RlZmF1bHQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0xMy4wNSwxMiBMMTcuOCw3LjI0OTk5OTk4IEMxOC4xLDYuOTQ5OTk5OTggMTguMSw2LjQ5OTk5OTk4IDE3LjgsNi4xOTk5OTk5OCBDMTcuNSw1Ljg5OTk5OTk3IDE3LjA1LDUuODk5OTk5OTcgMTYuNzUsNi4xOTk5OTk5OCBMMTIsMTAuOTUgTDcuMjQ5OTk5OTgsNi4xOTk5OTk5OCBDNi45NDk5OTk5OCw1Ljg5OTk5OTk3IDYuNDk5OTk5OTgsNS44OTk5OTk5NyA2LjE5OTk5OTk4LDYuMTk5OTk5OTggQzUuODk5OTk5OTcsNi40OTk5OTk5OCA1Ljg5OTk5OTk3LDYuOTQ5OTk5OTggNi4xOTk5OTk5OCw3LjI0OTk5OTk4IEwxMC45NSwxMiBMNi4xOTk5OTk5OCwxNi43NSBDNS44OTk5OTk5NywxNy4wNSA1Ljg5OTk5OTk3LDE3LjUgNi4xOTk5OTk5OCwxNy44IEM2LjQ5OTk5OTk4LDE4LjEgNi45NDk5OTk5OCwxOC4xIDcuMjQ5OTk5OTgsMTcuOCBMMTIsMTMuMDUgTDE2Ljc1LDE3LjggQzE3LjA1LDE4LjEgMTcuNSwxOC4xIDE3LjgsMTcuOCBDMTguMSwxNy41IDE4LjEsMTcuMDUgMTcuOCwxNi43NSBMMTMuMDUsMTIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjMjYyNjI2Ij48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==") !important; +} + +.multiselect { + .sort-indicator { + display: none !important; + } +} + +#selectedActionLabel { + padding-right: 16px; + display: none; + a { + display: inline; + line-height: 50px; + padding: 16px 5px; + img { + position: relative; + vertical-align: text-bottom; + margin-bottom: -1px; + } + } + a.hidden { + display: none; + } + .actions-selected { + .icon-more { + display: inline-block; + vertical-align: middle; + } + } +} + +#headerSizeCount .hidden { + display: none !important; +} + +.selectedActions { + .filesSelectionMenu { + display: block !important; + ul { + li { + display: inline; + &.hidden { + display: none !important; + } + } + } + a { + .label { + padding-left: 8px; + padding-right: 19px; + } + } + } +} + +#selectedActionsList { + width: 100% !important; + text-align: right !important; + opacity: unset; + .popovermenu { + right: -70px; + top: 45px; + } +} diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index da6fdd25f285b..03aff83d5342a 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -85,4 +85,33 @@ table.dragshadow { table.multiselect th .columntitle.name { margin-left: 0; } + + /* Actions for selected files */ + table th #selectedActionLabel a { + padding: 17px 14px; + } + + #allLabel { + display: none; + } + + #selectedActionsList .filesSelectionMenu { + display: none !important; + } + + #selectedActionsList .popovermenu { + right: -70px; + top: 25px; + } + + #selectedActionLabel { + padding-right: 0px; + } +} + +@media only screen and (max-width: 440px) { + #selectedActionsList .popovermenu { + right: -85px; + top: 20px; + } } diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 5efa20887e605..9fb340d416b49 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -119,6 +119,12 @@ iconClass: 'icon-tag', order: 100, }, + { + name: 'cancel', + displayName: 'Cancel', + iconClass: 'icon-cancel', + order: 101, + }, ], sorting: { mode: $('#defaultFileSorting').val(), diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4f2f3f104d2ed..2162adc991dbf 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -379,6 +379,10 @@ this.$el.on('show', this._onResize); + $('#selectedActionLabel').css('display','none'); + this.resizeFileActionMenu = _.debounce(_.bind(this.resizeFileActionMenu, this), 250); + $(window).resize(this.resizeFileActionMenu); + // reload files list on share accept $('body').on('OCA.Notification.Action', function(eventObject) { if (eventObject.notification.app === 'files_sharing' && eventObject.action.type === 'POST') { @@ -558,6 +562,9 @@ case 'tags': this._onClickTagSelected(ev); break; + case 'cancel': + this._onClickCancelSelected(ev); + break; } }, /** @@ -1191,6 +1198,17 @@ }); }, + /** + * Event handler for when deselecting all selected files + */ + _onClickCancelSelected: function(ev) { + this._selectedFiles = {}; + this._selectionSummary.clear(); + $('#filestable input').prop('checked', false); + this.$fileList.find('td.selection > .selectCheckBox:visible').closest('tr').toggleClass('selected', false); + this.updateSelectionSummary(); + }, + _onClickDocument: function(ev) { if(!$(ev.target).closest('#editor_container').length) { this._inputView.setValues([]); @@ -1511,6 +1529,11 @@ this.fileMultiSelectMenu.render(); this.$el.find('.selectedActions .filesSelectMenu').remove(); this.$el.find('.selectedActions').append(this.fileMultiSelectMenu.$el); + this.fileMultipleSelectionMenu = new OCA.Files.FileMultipleSelectionMenu(this.multiSelectMenuItems.sort(function(a, b) { + return a.order - b.order + })); + this.fileMultipleSelectionMenu.render(); + this.$el.find('.selectedActions').append(this.fileMultipleSelectionMenu.$el); }, /** @@ -3431,10 +3454,25 @@ this.$el.find('#modified a>span:first').text(t('files','Modified')); this.$el.find('table').removeClass('multiselect'); this.$el.find('.selectedActions').addClass('hidden'); + this.$el.find('#headerSize').removeClass('hidden'); + this.$el.find('#headerDate').removeClass('hidden'); + this.$el.find('#headerSizeCount').addClass('hidden'); + this.$el.find('.headerSizeOpen').addClass('hidden'); + $('#selectedActionLabel').css('display','none'); } else { this.$el.find('.selectedActions').removeClass('hidden'); - this.$el.find('#headerSize a>span:first').text(OC.Util.humanFileSize(summary.totalSize)); + this.$el.find('#headerSize').addClass('hidden'); + this.$el.find('#headerDate').addClass('hidden'); + this.$el.find('#headerSizeCount').removeClass('hidden'); + this.$el.find('.headerSizeOpen').removeClass('hidden'); + this.$el.find('#selectedActionsList').removeClass('menu-center'); + if (window.matchMedia('(max-width: 480px)').matches) { + $('#selectedActionLabel').css('display','block'); + } + this.resizeFileActionMenu(); + this.$el.find('#headerSizeCount').text(OC.Util.humanFileSize(summary.totalSize)); + this.fileMultipleSelectionMenu.show(this); var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs); var fileInfo = n('files', '%n file', '%n files', summary.totalFiles); @@ -3477,6 +3515,35 @@ } }, + /** + * Show or hide file action menu based on the current selection + */ + resizeFileActionMenu: function() { + const appList = $('.filesSelectionMenu ul li'); + const headerWidth = $('#filestable thead').outerWidth(); + const checkWidth = $('#headerSelection').outerWidth(); + const headerNameWidth = $('#headerName').outerWidth(); + const actionWidth = $('#selectedActionLabel').outerWidth(); + const allLabelWidth = $('#allLabel').outerWidth(); + + let availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth); + let appCount = Math.floor((availableWidth / $(appList).width())); + + if(appCount < appList.length) { + $('#selectedActionLabel').css('display','block'); + availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth); + appCount = Math.floor((availableWidth / $(appList).width())); + } + + for (let k = 0; k < appList.length; k++) { + if (k < appCount) { + $(appList[k]).removeClass('hidden'); + } else { + $(appList[k]).addClass('hidden'); + } + } + }, + /** * Check whether all selected files are copiable */ diff --git a/apps/files/js/filemultipleselectionmenu.js b/apps/files/js/filemultipleselectionmenu.js new file mode 100644 index 0000000000000..82870d1b4531d --- /dev/null +++ b/apps/files/js/filemultipleselectionmenu.js @@ -0,0 +1,92 @@ +/* + * Copyright (c) 2018 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + var FileMultipleSelectionMenu = OC.Backbone.View.extend({ + tagName: 'div', + className: 'filesSelectionMenu', + _scopes: null, + initialize: function(menuItems) { + this._scopes = menuItems; + }, + events: { + 'click a.action': '_onClickAction' + }, + + /** + * Renders the menu with the currently set items + */ + render: function() { + this.$el.html(OCA.Files.Templates['filemultiselectmenu']({ + 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.$el.removeClass('hidden'); + OC.showMenu(null, this.$el); + return false; + }, + 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); + }, + 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.FileMultipleSelectionMenu = FileMultipleSelectionMenu; +})(OC, OCA); diff --git a/apps/files/js/filemultiselectmenu.js b/apps/files/js/filemultiselectmenu.js index d50fe28eaceb9..5474fa8887323 100644 --- a/apps/files/js/filemultiselectmenu.js +++ b/apps/files/js/filemultiselectmenu.js @@ -11,7 +11,7 @@ (function() { var FileMultiSelectMenu = OC.Backbone.View.extend({ tagName: 'div', - className: 'filesSelectMenu popovermenu bubble menu-center', + className: 'filesSelectMenu popovermenu bubble menu-right', _scopes: null, initialize: function(menuItems) { this._scopes = menuItems; @@ -37,11 +37,6 @@ show: function(context) { this._context = context; 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; }, diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json index 478db35f6fb4c..df1c480c236be 100644 --- a/apps/files/js/merged-index.json +++ b/apps/files/js/merged-index.json @@ -12,6 +12,7 @@ "fileinfomodel.js", "filelist.js", "filemultiselectmenu.js", + "filemultipleselectionmenu.js", "files.js", "filesummary.js", "gotoplugin.js", diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index a88a9550beb29..5e0f685203487 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -42,19 +42,18 @@ t('Select all'))?> + t('All')); ?>
t('Name')); ?> - - - - - - - t('Actions'))?> - - + + ( + + t('Size')); ?> + + ) +
@@ -63,6 +62,18 @@ t('Modified')); ?> + +
+
+ + + + + + t('Actions'))?> + + + From 458d84dcbffb95b790fbfaa66fca0eb866d221bb Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Mon, 20 Sep 2021 16:19:56 +0530 Subject: [PATCH 02/11] Add Unit Test Cases Signed-off-by: Kavita Sonawane --- apps/files/tests/js/filelistSpec.js | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 06dcb0dd4699b..c5413de25cf0b 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -2175,6 +2175,25 @@ describe('OCA.Files.FileList tests', function() { expect(selectedFiles.length).toEqual(41); }); + describe('Cancel', function() { + it('selection summary hide when "Cancel" clicked', function() { + var $summary = $('#headerName a.name>span:first'); + $('.selectedActions .cancel').click(); + expect($summary.text()).toEqual('Name'); + }); + it('file actions hides when "Cancel" clicked', function() { + var $actions = $('#headerName .selectedActions'); + $('.selectedActions .cancel').click(); + expect($actions.hasClass('hidden')).toEqual(true); + }); + it('Clicking "cancel" will deselect all files', function() { + $('.selectedActions .cancel').click(); + $('#fileList tr input:checkbox').each(function() { + expect($(this).prop('checked')).toEqual(false); + }); + expect(_.pluck(fileList.getSelectedFiles(), 'name').length).toEqual(0); + }); + }); describe('clearing the selection', function() { it('clears selected files selected individually calling setFiles()', function() { var selectedFiles; @@ -2211,19 +2230,19 @@ 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 .item-copyMove').hasClass('hidden')).toEqual(false); - expect(fileList.$el.find('.selectedActions .item-copyMove .label').text()).toEqual('Move or copy'); + expect(fileList.$el.find('.selectedActions .filesSelectMenu .item-copyMove').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .filesSelectMenu .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 .item-copyMove').hasClass('hidden')).toEqual(false); - expect(fileList.$el.find('.selectedActions .item-copyMove .label').text()).toEqual('Copy'); + expect(fileList.$el.find('.selectedActions .filesSelectMenu .item-copyMove').hasClass('hidden')).toEqual(false); + expect(fileList.$el.find('.selectedActions .filesSelectMenu .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 .item-copyMove').hasClass('hidden')).toEqual(true); + expect(fileList.$el.find('.selectedActions .filesSelectMenu .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); From b01090cb6457499c1d2caba28770f4fb3b80b3a3 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Tue, 21 Sep 2021 12:48:15 +0530 Subject: [PATCH 03/11] Change code for file action menu Signed-off-by: Kavita Sonawane --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 2162adc991dbf..4e9169df212bc 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -3519,7 +3519,7 @@ * Show or hide file action menu based on the current selection */ resizeFileActionMenu: function() { - const appList = $('.filesSelectionMenu ul li'); + const appList = $('.filesSelectionMenu ul li').not('.item-toggleSelectionMode:hidden'); const headerWidth = $('#filestable thead').outerWidth(); const checkWidth = $('#headerSelection').outerWidth(); const headerNameWidth = $('#headerName').outerWidth(); From 30d1859d71c11d3c1cb0e5b2871d9578dbd7ccdf Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Mon, 4 Oct 2021 12:56:47 +0530 Subject: [PATCH 04/11] Remove extra cancel icon Signed-off-by: Kavita Sonawane --- apps/files/css/files.scss | 4 ---- apps/files/js/app.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index e8c65f49a9440..1e22e4ed86107 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1258,10 +1258,6 @@ table.multiselect { } } -.icon-cancel { - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbi9hY3Rpb24vY2xvc2UvZGVmYXVsdEBzdmc8L3RpdGxlPgogICAgPGcgaWQ9Imljb24vYWN0aW9uL2Nsb3NlL2RlZmF1bHQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0xMy4wNSwxMiBMMTcuOCw3LjI0OTk5OTk4IEMxOC4xLDYuOTQ5OTk5OTggMTguMSw2LjQ5OTk5OTk4IDE3LjgsNi4xOTk5OTk5OCBDMTcuNSw1Ljg5OTk5OTk3IDE3LjA1LDUuODk5OTk5OTcgMTYuNzUsNi4xOTk5OTk5OCBMMTIsMTAuOTUgTDcuMjQ5OTk5OTgsNi4xOTk5OTk5OCBDNi45NDk5OTk5OCw1Ljg5OTk5OTk3IDYuNDk5OTk5OTgsNS44OTk5OTk5NyA2LjE5OTk5OTk4LDYuMTk5OTk5OTggQzUuODk5OTk5OTcsNi40OTk5OTk5OCA1Ljg5OTk5OTk3LDYuOTQ5OTk5OTggNi4xOTk5OTk5OCw3LjI0OTk5OTk4IEwxMC45NSwxMiBMNi4xOTk5OTk5OCwxNi43NSBDNS44OTk5OTk5NywxNy4wNSA1Ljg5OTk5OTk3LDE3LjUgNi4xOTk5OTk5OCwxNy44IEM2LjQ5OTk5OTk4LDE4LjEgNi45NDk5OTk5OCwxOC4xIDcuMjQ5OTk5OTgsMTcuOCBMMTIsMTMuMDUgTDE2Ljc1LDE3LjggQzE3LjA1LDE4LjEgMTcuNSwxOC4xIDE3LjgsMTcuOCBDMTguMSwxNy41IDE4LjEsMTcuMDUgMTcuOCwxNi43NSBMMTMuMDUsMTIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjMjYyNjI2Ij48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==") !important; -} - .multiselect { .sort-indicator { display: none !important; diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 9fb340d416b49..eb50c38c9a2c4 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -122,7 +122,7 @@ { name: 'cancel', displayName: 'Cancel', - iconClass: 'icon-cancel', + iconClass: 'icon-close', order: 101, }, ], From f4a96a8168be597093b2aa0561c5a71dfe0a25e7 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Tue, 5 Oct 2021 12:48:18 +0530 Subject: [PATCH 05/11] Css related changes Signed-off-by: Kavita Sonawane --- apps/files/css/files.scss | 20 ++++++++++++++++++++ apps/files/js/filemultipleselectionmenu.js | 2 -- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 1e22e4ed86107..db92f68db14ca 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1308,6 +1308,11 @@ table.multiselect { padding-left: 8px; padding-right: 19px; } + &:hover { + .label { + text-decoration: underline; + } + } } } } @@ -1321,3 +1326,18 @@ table.multiselect { top: 45px; } } + +#allLabel { + padding-top: 5px; +} + +.item-cancel { + a { + .label { + color: #ff0000; + } + } + .icon-close { + filter: invert(18%) sepia(99%) saturate(7440%) hue-rotate(1deg) brightness(110%) contrast(115%); + } +} diff --git a/apps/files/js/filemultipleselectionmenu.js b/apps/files/js/filemultipleselectionmenu.js index 82870d1b4531d..f696bf8e9af8c 100644 --- a/apps/files/js/filemultipleselectionmenu.js +++ b/apps/files/js/filemultipleselectionmenu.js @@ -36,8 +36,6 @@ */ show: function(context) { this._context = context; - this.$el.removeClass('hidden'); - OC.showMenu(null, this.$el); return false; }, toggleItemVisibility: function (itemName, show) { From e6398bfb14bf20ee4cfd5ae0898859c2ec9df486 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Wed, 20 Oct 2021 18:37:48 +0530 Subject: [PATCH 06/11] Css changes for delete icon Signed-off-by: Kavita Sonawane --- apps/files/css/files.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index db92f68db14ca..d1b77c45ebc03 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1314,6 +1314,14 @@ table.multiselect { } } } + .item-delete { + a { + &:hover { + color: #ff0000; + filter: invert(18%) sepia(99%) saturate(7440%) hue-rotate(1deg) brightness(110%) contrast(115%); + } + } + } } } From 5f214b23d9f8e498e6c2b90c0ac760f91ffed118 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Thu, 21 Oct 2021 17:16:23 +0530 Subject: [PATCH 07/11] File action button changes Signed-off-by: Kavita Sonawane --- apps/files/js/filelist.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4e9169df212bc..b680162416131 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1533,6 +1533,7 @@ return a.order - b.order })); this.fileMultipleSelectionMenu.render(); + this.$el.find('.selectedActions .filesSelectionMenu').remove(); this.$el.find('.selectedActions').append(this.fileMultipleSelectionMenu.$el); }, From 7809349ff2450a2b650ca5f733a0ca805cfa76eb Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Fri, 22 Oct 2021 20:05:15 +0530 Subject: [PATCH 08/11] Css changes for grid view Signed-off-by: Kavita Sonawane --- apps/files/css/files.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index d1b77c45ebc03..3541ba22f40bf 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -1253,7 +1253,7 @@ table.dragshadow td.size { table.multiselect { thead { #selectedMenu { - width: 100%; + width: 100% !important; } } } From 3c6b3b376b0941132d3dfa69a9487bee5fa32374 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Fri, 29 Oct 2021 18:42:22 +0530 Subject: [PATCH 09/11] Resolved issue for action label Signed-off-by: Kavita Sonawane --- apps/files/js/filelist.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index b680162416131..4b50a41a15b26 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -3520,7 +3520,7 @@ * Show or hide file action menu based on the current selection */ resizeFileActionMenu: function() { - const appList = $('.filesSelectionMenu ul li').not('.item-toggleSelectionMode:hidden'); + const appList = $('.filesSelectionMenu ul li').not('.item-toggleSelectionMode:hidden,.item-tags:hidden'); const headerWidth = $('#filestable thead').outerWidth(); const checkWidth = $('#headerSelection').outerWidth(); const headerNameWidth = $('#headerName').outerWidth(); @@ -3529,12 +3529,19 @@ let availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth); let appCount = Math.floor((availableWidth / $(appList).width())); + let appListCount = $(appList).width(); if(appCount < appList.length) { $('#selectedActionLabel').css('display','block'); availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth); appCount = Math.floor((availableWidth / $(appList).width())); } + else if(appListCount==0) { + $('#selectedActionLabel').css('display','block'); + } + else{ + $('#selectedActionLabel').css('display','none'); + } for (let k = 0; k < appList.length; k++) { if (k < appCount) { From 70311f8139d646f465fcd6428fad71c9eaba914b Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Mon, 1 Nov 2021 15:39:45 +0530 Subject: [PATCH 10/11] Fixed action label issue Signed-off-by: Kavita Sonawane --- apps/files/js/filelist.js | 45 +++++++++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4b50a41a15b26..4db99e7cfe8e4 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -379,7 +379,6 @@ this.$el.on('show', this._onResize); - $('#selectedActionLabel').css('display','none'); this.resizeFileActionMenu = _.debounce(_.bind(this.resizeFileActionMenu, this), 250); $(window).resize(this.resizeFileActionMenu); @@ -3468,12 +3467,9 @@ this.$el.find('#headerSizeCount').removeClass('hidden'); this.$el.find('.headerSizeOpen').removeClass('hidden'); this.$el.find('#selectedActionsList').removeClass('menu-center'); - if (window.matchMedia('(max-width: 480px)').matches) { - $('#selectedActionLabel').css('display','block'); - } - this.resizeFileActionMenu(); this.$el.find('#headerSizeCount').text(OC.Util.humanFileSize(summary.totalSize)); this.fileMultipleSelectionMenu.show(this); + this.resizeFileActionMenu(); var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs); var fileInfo = n('files', '%n file', '%n files', summary.totalFiles); @@ -3519,28 +3515,48 @@ /** * Show or hide file action menu based on the current selection */ - resizeFileActionMenu: function() { + resizeFileActionMenu: function() { const appList = $('.filesSelectionMenu ul li').not('.item-toggleSelectionMode:hidden,.item-tags:hidden'); const headerWidth = $('#filestable thead').outerWidth(); const checkWidth = $('#headerSelection').outerWidth(); const headerNameWidth = $('#headerName').outerWidth(); const actionWidth = $('#selectedActionLabel').outerWidth(); - const allLabelWidth = $('#allLabel').outerWidth(); + const allLabelWidth = $('#allLabel').not('#allLabel:hidden').outerWidth(); + var availableWidth; + if(!allLabelWidth){ + availableWidth = headerWidth - (checkWidth + headerNameWidth); + } + else{ + availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth); + } - let availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth); let appCount = Math.floor((availableWidth / $(appList).width())); - let appListCount = $(appList).width(); if(appCount < appList.length) { - $('#selectedActionLabel').css('display','block'); - availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth); + if(!allLabelWidth){ + availableWidth = headerWidth - (checkWidth + headerNameWidth + actionWidth); + } + else{ + availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth); + } appCount = Math.floor((availableWidth / $(appList).width())); } - else if(appListCount==0) { - $('#selectedActionLabel').css('display','block'); + + var summary = this._selectionSummary.summary; + if (summary.totalFiles === 0 && summary.totalDirs === 0) { + $('#selectedActionLabel').css('display','none'); } else{ - $('#selectedActionLabel').css('display','none'); + if(appCount < appList.length) { + $('#selectedActionLabel').css('display','block'); + } + else if(appCount == appList.length){ + $('#selectedActionLabel').css('display','none'); + } + else if (!isFinite(appCount)) + { + $('#selectedActionLabel').css('display','block'); + } } for (let k = 0; k < appList.length; k++) { @@ -3552,6 +3568,7 @@ } }, + /** * Check whether all selected files are copiable */ From f3b18e632f6f4e01b11d493158909a074d2810bd Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Tue, 2 Nov 2021 15:12:53 +0530 Subject: [PATCH 11/11] Remove unwanted code Signed-off-by: Kavita Sonawane --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4db99e7cfe8e4..ae0c162b3b0e0 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -3516,7 +3516,7 @@ * Show or hide file action menu based on the current selection */ resizeFileActionMenu: function() { - const appList = $('.filesSelectionMenu ul li').not('.item-toggleSelectionMode:hidden,.item-tags:hidden'); + const appList = $('.filesSelectionMenu ul li'); const headerWidth = $('#filestable thead').outerWidth(); const checkWidth = $('#headerSelection').outerWidth(); const headerNameWidth = $('#headerName').outerWidth();