Merge pull request #2414 from nextcloud/fix/noid/crumb-menu-icon

Allow custom action menu icon for breadcrumb

src/components/Breadcrumb/Breadcrumb.vue

@@ -32,6 +32,7 @@ This component is meant to be used inside a Breadcrumbs component.
 	<div ref="crumb"
 		class="vue-crumb"
 		:class="{'vue-crumb--with-action': $slots.default, 'vue-crumb--hovered': hovering}"
+		:[crumbId]="''"
 		draggable="false"
 		@dragstart.prevent="() => {/** Prevent the breadcrumb from being draggable. */}"
 		@drop.prevent="dropped"
@@ -52,8 +53,12 @@ This component is meant to be used inside a Breadcrumbs component.
 		<Actions ref="actions"
 			:force-menu="forceMenu"
 			:open="open"
-			@update:open="onOpenChange"
-			container=".vue-crumb--with-action.dropdown">
+			:container="`.vue-crumb--with-action[${crumbId}]`"
+			@update:open="onOpenChange">
+			<template #icon>
+				<!-- @slot Slot for the custom menu icon -->
+				<slot name="menu-icon" />
+			</template>
 			<!-- @slot All action elements passed into the default slot will be used -->
 			<slot />
 		</Actions>
@@ -63,6 +68,7 @@ This component is meant to be used inside a Breadcrumbs component.
 
 <script>
 import Actions from '../Actions'
+import GenRandomId from '../../utils/GenRandomId'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
 
@@ -130,6 +136,11 @@ export default {
 			 * Variable to track if we hover over the breadcrumb
 			 */
 			hovering: false,
+			/**
+			 * The unique id of the breadcrumb. Necessary to append the
+			 * Actions menu to the correct crumb.
+			 */
+			crumbId: `crumb-id-${GenRandomId()}`,
 		}
 	},
 	computed: {

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -45,9 +45,21 @@ is dropped on a creadcrumb.
 				<Breadcrumb title="Folder 3" href="/Folder 1/Folder 2/Folder 3" />
 				<Breadcrumb title="Folder 4" href="/Folder 1/Folder 2/Folder 3/Folder 4" />
 				<Breadcrumb title="Folder 5" href="/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5" :disable-drop="true">
-					<ActionButton icon="icon-share" @click="alert('Share')">
+					<template #menu-icon>
+						<MenuDown :size="20" />
+					</template>
+					<ActionButton @click="alert('Share')">
+						<template #icon>
+							<ShareVariant :size="20" />
+						</template>
 						Share
 					</ActionButton>
+					<ActionButton @click="alert('Download')">
+						<template #icon>
+							<Download :size="20" />
+						</template>
+						Download
+					</ActionButton>
 				</Breadcrumb>
 			</Breadcrumbs>
 		</div>
@@ -59,11 +71,17 @@ is dropped on a creadcrumb.
 </template>
 
 <script>
+import Download from 'vue-material-design-icons/Download'
 import Folder from 'vue-material-design-icons/Folder'
+import MenuDown from 'vue-material-design-icons/MenuDown'
+import ShareVariant from 'vue-material-design-icons/ShareVariant'
 
 export default {
 	components: {
+		Download,
 		Folder,
+		MenuDown,
+		ShareVariant,
 	},
 	methods: {
 		dropped(e, path) {