From 7b32738cbdd6d8e614ed4748d83273c29fec97f8 Mon Sep 17 00:00:00 2001 From: "kavita.sonawane@t-systems.com" Date: Thu, 18 May 2023 13:28:46 +0530 Subject: [PATCH] File action button behaviour --- apps/files/js/filelist.js | 76 ++++++++++++++++++ apps/files/js/filemultipleselectionmenu.js | 91 ++++++++++++++++++++++ apps/files/js/filemultiselectmenu.js | 7 +- 3 files changed, 168 insertions(+), 6 deletions(-) create mode 100644 apps/files/js/filemultipleselectionmenu.js diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index e3052ea9fe85b..44b4b7dfbef5c 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -376,6 +376,9 @@ this.$el.on('show', this._onResize); + 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') { @@ -677,6 +680,7 @@ * @param {boolean} [show=true] whether to open the sidebar if it was closed */ _updateDetailsView: function(fileName, show) { + this.resizeFileActionMenu(); if (!(OCA.Files && OCA.Files.Sidebar)) { console.error('No sidebar available'); return; @@ -1501,6 +1505,12 @@ 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 .filesSelectionMenu').remove(); + this.$el.find('.selectedActions').append(this.fileMultipleSelectionMenu.$el); }, /** @@ -3501,6 +3511,72 @@ } }, + /** + * Show or hide file action menu based on the current selection + */ + resizeFileActionMenu: function() { + const appList = this.$el.find('.filesSelectionMenu ul li:not(.hidden-action)'); + const appListWidth = 179; + const checkWidth = Math.ceil(this.$el.find('.column-selection').outerWidth()); + const headerNameWidth = Math.ceil(this.$el.find('.column-name').outerWidth()); + const actionWidth = Math.ceil(this.$el.find('#selectedActionLabel').outerWidth()); + const allLabelWidth = Math.ceil(this.$el.find('#allLabel').not('#allLabel:hidden').outerWidth()); + let headerWidth = Math.ceil(this.$el.find('.files-filestable thead').outerWidth()); + + if($('#app-sidebar-vue').length>0){ + headerWidth = headerWidth - Math.ceil($('#app-sidebar-vue').outerWidth()); + } + + var availableWidth; + if(!allLabelWidth){ + availableWidth = headerWidth - (checkWidth + headerNameWidth); + } + else{ + availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth); + } + + let appCount = Math.floor((availableWidth / appListWidth)); + + if(appCount < appList.length) { + + if(!allLabelWidth){ + availableWidth = headerWidth - (checkWidth + headerNameWidth + actionWidth); + } + else{ + availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth); + } + appCount = Math.floor((availableWidth / appListWidth)); + } + + var summary = this._selectionSummary.summary; + if (summary.totalFiles === 0 && summary.totalDirs === 0) { + this.$el.find('#selectedActionLabel').css('display','none'); + } + else{ + if(appCount < appList.length) { + this.$el.find('#selectedActionLabel').css('display','block'); + } + else if(appCount == appList.length){ + this.$el.find('#selectedActionLabel').css('display','none'); + } + else if (!isFinite(appCount)) + { + this.$el.find('#selectedActionLabel').css('display','block'); + } + else if(appCount > appList.length){ + this.$el.find('#selectedActionLabel').css('display','none'); + } + } + + 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..fd42a21dbb71b --- /dev/null +++ b/apps/files/js/filemultipleselectionmenu.js @@ -0,0 +1,91 @@ +/* + * 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; + return false; + }, + toggleItemVisibility: function (itemName, show) { + var toggle= $('.filesSelectionMenu'); + if (show) { + toggle.find('.item-' + itemName).removeClass('hidden-action'); + } else { + toggle.find('.item-' + itemName).addClass('hidden-action'); + } + }, + 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; },