File action button behaviour

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
 		 */

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