Move crumb Actions into hover background area

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud-libraries · Jan 4, 2022 · f940538 · f940538
1 parent 9987ad1
commit f940538
Showing 1 changed file with 48 additions and 35 deletions.
diff --git a/src/components/Breadcrumb/Breadcrumb.vue b/src/components/Breadcrumb/Breadcrumb.vue
@@ -31,37 +31,44 @@ This component is meant to be used inside a Breadcrumbs component.
 <template>
 	<div ref="crumb"
 		class="vue-crumb"
-		:class="{'vue-crumb--with-action': $slots.default, 'vue-crumb--hovered': hovering}"
+		:class="{
+			'vue-crumb--with-action': $slots.default,
+			'vue-crumb--only-action': (!($slots.icon || icon || title)),
+			'vue-crumb--hovered': hovering
+		}"
 		:[crumbId]="''"
 		draggable="false"
 		@dragstart.prevent="() => {/** Prevent the breadcrumb from being draggable. */}"
 		@drop.prevent="dropped"
 		@dragover.prevent="() => {}"
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
-		<element
-			:is="tag"
-			v-if="title || icon"
-			:to="to"
-			:href="href">
-			<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
-			<slot name="icon">
-				<span v-if="icon" :class="icon" class="icon" />
-				<span v-else>{{ title }}</span>
-			</slot>
-		</element>
-		<Actions ref="actions"
-			:force-menu="forceMenu"
-			:open="open"
-			: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>
+		<div>
+			<element
+				:is="tag"
+				v-if="(title || icon) && !$slots.default"
+				:to="to"
+				:href="href">
+				<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
+				<slot name="icon">
+					<span v-if="icon" :class="icon" class="icon" />
+					<span v-else>{{ title }}</span>
+				</slot>
+			</element>
+			<Actions ref="actions"
+				:force-menu="forceMenu"
+				:open="open"
+				:menu-title="title"
+				: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>
+		</div>
 		<ChevronRight class="vue-crumb__separator" :size="20" />
 	</div>
 </template>
@@ -239,10 +246,8 @@ export default {
 
 	&:last-child {
 		max-width: 210px;
+		font-weight: bold;
 
-		a {
-			flex-shrink: 1;
-		}
 		// Don't show breadcrumb separator for last crumb
 		.vue-crumb__separator {
 			display: none;
@@ -253,37 +258,45 @@ export default {
 		display: none;
 	}
 
-	&--with-action a {
-		padding-right: 2px;
+	&#{&}--with-action > div {
+		padding-right: 0;
 	}
 
-	&__separator {
+	&#{&}--only-action > div {
 		padding: 0;
-		opacity: .7;
 	}
 
-	&#{&}--hovered > a {
+	&#{&}--hovered > div {
 		background-color: var(--color-background-dark);
 		opacity: .7;
 	}
 
-	> a {
+	&__separator {
+		padding: 0;
+		opacity: .7;
+	}
+
+	> div {
 		&:hover,
-		&:focus {
+		&:focus-within {
 			background-color: var(--color-background-dark);
 		}
-		&:focus{
+		&:focus-within {
 			opacity: 1;
 		}
 		&:hover {
 			opacity: .7;
 		}
+		> a {
+			overflow: hidden;
+		}
 		opacity: .5;
 		padding: 12px;
 		max-width: 100%;
 		border-radius: var(--border-radius-pill);
 	}
 
+	> div,
 	a {
 		align-items: center;
 		display: inline-flex;