🚸 (#2345): add Remaining Actions

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

2 files changed, 34 insertions, 2 deletions

diff --git a/src/components/Menu/Bar.vue b/src/components/Menu/Bar.vue
index 041051d8c..a70766afb 100644
--- a/src/components/Menu/Bar.vue
+++ b/src/components/Menu/Bar.vue
@@ -37,6 +37,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import actionsFullEntries from './entries.js'
 import ActionEntry from './ActionEntry.js'
 import { useIsRichEditorMixin, useEditorMixin } from '../EditorWrapper.provider.js'
+import { DotsHorizontal } from '../icons.js'
 
 export default {
 	// eslint-disable-next-line vue/match-component-file-name
@@ -77,9 +78,39 @@ export default {
 			return slots - 1
 		},
 		visibleEntries() {
-			return [...actionsFullEntries].filter(entry => {
-				return entry.priority <= this.iconsLimit
+			const { hiddenEntries, remainAction } = this
+			const list = [...actionsFullEntries].filter(({ priority }) => {
+				// if entry do not have priority, we assume it aways will be visible
+				return priority === undefined || priority <= this.iconsLimit
 			})
+
+			if (hiddenEntries.length === 0) {
+				return list
+			}
+
+			if (hiddenEntries.length === 1) {
+				// put only one entry
+				list.push(hiddenEntries[0])
+			} else {
+				// add all hidden entries as list of actions
+				list.push(remainAction)
+			}
+
+			return list
+		},
+		hiddenEntries() {
+			return [...actionsFullEntries].filter(({ priority }) => {
+				// reverse logic from visibleEntries
+				return priority !== undefined && priority >= this.iconsLimit
+			})
+		},
+		remainAction() {
+			return {
+				_key: 'remain',
+				label: this.t('text', 'Remaining Actions'),
+				icon: DotsHorizontal,
+				children: this.hiddenEntries,
+			}
 		},
 	},
 	mounted() {
diff --git a/src/components/icons.js b/src/components/icons.js
index bfc53cde2..0b2515766 100644
--- a/src/components/icons.js
+++ b/src/components/icons.js
@@ -36,6 +36,7 @@ export { default as Images } from 'vue-material-design-icons/ImageMultipleOutlin
 export { default as Help } from 'vue-material-design-icons/HelpCircle'
 export { default as Upload } from 'vue-material-design-icons/Upload'
 export { default as Folder } from 'vue-material-design-icons/Folder'
+export { default as DotsHorizontal } from 'vue-material-design-icons/DotsHorizontal'
 export { default as FormatBold } from 'vue-material-design-icons/FormatBold'
 export { default as FormatItalic } from 'vue-material-design-icons/FormatItalic'
 export { default as FormatUnderline } from 'vue-material-design-icons/FormatUnderline'