File action button behaviour

apps/files/js/app.js

@@ -108,6 +108,12 @@
 							iconClass: 'icon-delete',
 							order: 99,
 						},
+						{
+							name: 'cancel',
+							displayName: t('files', 'Cancel'),
+							iconClass: 'icon-close',
+							order: 101,
+						},
 						...(
 							OCA?.SystemTags === undefined ? [] : ([{
 								name: 'tags',

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') {
@@ -561,6 +564,9 @@
 					case 'tags':
 						this._onClickTagSelected(ev);
 						break;
+					case 'cancel':
+						this._onClickCancelSelected(ev);
+						break;
 				}
 		},
 		/**
@@ -677,6 +683,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;
@@ -1177,6 +1184,17 @@
 			});
 		},
 
+		/**
+		 * Event handler for when deselecting all selected files
+		 */
+		 _onClickCancelSelected: function(ev) {
+			this._selectedFiles = {};
+			this._selectionSummary.clear();
+			$('.files-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([]);
@@ -1501,6 +1519,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);
 		},
 
 		/**
@@ -3455,10 +3479,22 @@
 				this.$el.find('.column-mtime a>span:first').text(t('files','Modified'));
 				this.$el.find('table').removeClass('multiselect');
 				this.$el.find('.selectedActions').addClass('hidden');
+				this.$el.find('.column-size').removeClass('hidden');
+				this.$el.find('.column-mtime').removeClass('hidden');
+				this.$el.find('.column-size-count').addClass('hidden');
+				this.$el.find('.column-size-open').addClass('hidden');
+				this.$el.find('#selectedActionLabel').css('display','none');
 			}
 			else {
 				this.$el.find('.selectedActions').removeClass('hidden');
-				this.$el.find('.column-size a>span:first').text(OC.Util.humanFileSize(summary.totalSize));
+				this.$el.find('.column-size').addClass('hidden');
+				this.$el.find('.column-mtime').addClass('hidden');
+				this.$el.find('.column-size-count').removeClass('hidden');
+				this.$el.find('.column-size-open').removeClass('hidden');
+				this.$el.find('#selectedActionsList').removeClass('menu-center');
+				this.$el.find('.column-size-count').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);
@@ -3498,6 +3534,87 @@
 						this.fileMultiSelectMenu.toggleItemVisibility('copyMove', false);
 					}
 				}
+
+				if (this.fileMultipleSelectionMenu) {
+					this.fileMultipleSelectionMenu.toggleItemVisibility('download', this.isSelectedDownloadable());
+					this.fileMultipleSelectionMenu.toggleItemVisibility('delete', this.isSelectedDeletable());
+					this.fileMultipleSelectionMenu.toggleItemVisibility('copyMove', this.isSelectedCopiable());
+					if (this.isSelectedCopiable()) {
+						if (this.isSelectedMovable()) {
+							this.fileMultipleSelectionMenu.updateItemText('copyMove', t('files', 'Move or copy'));
+						} else {
+							this.fileMultipleSelectionMenu.updateItemText('copyMove', t('files', 'Copy'));
+						}
+					} else {
+						this.fileMultipleSelectionMenu.toggleItemVisibility('copyMove', false);
+					}
+				}
+			}
+		},
+
+			/**
+		 * 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');
+				}
 			}
 		},
 

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 = $('<span class="icon icon-loading-small"></span>');
+				$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);

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;
 		},

apps/files/js/merged-index.json

@@ -12,6 +12,7 @@
   "fileinfomodel.js",
   "filelist.js",
   "filemultiselectmenu.js",
+  "filemultipleselectionmenu.js",
   "files.js",
   "filesummary.js",
   "gotoplugin.js",

apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php

@@ -228,6 +228,7 @@ public function renderPage(IShare $share, string $token, string $path): Template
 			Util::addScript('files', 'newfilemenu');
 			Util::addScript('files', 'files');
 			Util::addScript('files', 'filemultiselectmenu');
+			Util::addScript('files', 'filemultipleselectionmenu');
 			Util::addScript('files', 'filelist');
 			Util::addScript('files', 'keyboardshortcuts');
 			Util::addScript('files', 'operationprogressbar');