fix: actions menu for envelope

Signed-off-by: Roberto Guido <info@madbob.org>

Author: madbob

src/components/EnvelopeSingleClickActions.vue

@@ -77,13 +77,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .list-item-content__quick-actions {
-	display: none;
+	display: flex;
 }
 
-.list-item:hover {
-	.list-item-content__quick-actions {
-		display: flex;
-	}
-}
 </style>

src/components/EnvelopeSkeleton.vue

@@ -31,11 +31,10 @@
 					:href="routerLinkHref || href"
 					:target="target || (href === '#' ? undefined : '_blank')"
 					:rel="href === '#' ? undefined : 'noopener noreferrer'"
-					@focus="showActions"
+					@focus="handleMouseover"
 					@focusout="handleBlur"
 					@click="onClick($event, navigate, routerLinkHref)"
-					@contextmenu.prevent
-					@keydown.esc="hideActions">
+					@contextmenu.prevent>
 					<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->
 					<slot name="icon" />
 
@@ -93,7 +92,7 @@
 					</div>
 				</a>
 
-				<div class="list-item__hoverable">
+				<div class="list-item__hoverable" v-show="displayActionsOverlay">
 					<EnvelopeSingleClickActions
 						:is-read="isRead"
 						:is-important="isImportant"
@@ -103,7 +102,7 @@
 
 					<!-- Actions -->
 					<div
-						v-show="forceDisplayActions || displayActionsOnHoverFocus"
+						v-show="hasActions"
 						class="list-item__actions"
 						@focusout="handleBlur">
 						<NcActions
@@ -256,14 +255,6 @@ export default {
 			},
 		},
 
-		/**
-		 * To be used only when the elements in the actions menu are very important
-		 */
-		forceDisplayActions: {
-			type: Boolean,
-			default: false,
-		},
-
 		/**
 		 * Show the list component layout
 		 */
@@ -293,7 +284,6 @@ export default {
 			hovered: false,
 			hasActions: false,
 			hasSubname: false,
-			displayActionsOnHoverFocus: false,
 			menuOpen: false,
 			hasIndicator: false,
 			hasDetails: false,
@@ -302,26 +292,20 @@ export default {
 
 	computed: {
 		showAdditionalElements() {
-			return !this.displayActionsOnHoverFocus || this.forceDisplayActions
+			return !this.hasActions
 		},
 
 		showDetails() {
 			return (this.details !== '' || this.hasDetails)
-				&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)
+				&& !this.hasActions
 		},
 
 		computedActionsAriaLabel() {
 			return this.actionsAriaLabel || t('Actions for item with name "{name}"', { name: this.name })
 		},
-	},
-
-	watch: {
 
-		menuOpen(newValue) {
-			// A click outside both the menu and the root element hides the actions again
-			if (!newValue && !this.hovered) {
-				this.displayActionsOnHoverFocus = false
-			}
+		displayActionsOverlay() {
+			return this.menuOpen || this.hovered
 		},
 	},
 
@@ -355,50 +339,31 @@ export default {
 			}
 		},
 
-		showActions() {
-			if (this.hasActions) {
-				this.displayActionsOnHoverFocus = true
-			}
+		/**
+		 * Hide the actions on mouseleave unless the menu is open
+		 */
+		handleMouseleave() {
 			this.hovered = false
 		},
 
-		hideActions() {
-			this.displayActionsOnHoverFocus = false
+		handleMouseover() {
+			this.hovered = true
 		},
 
-		/**
-		 * @param {FocusEvent} event UI event
-		 */
-		handleBlur(event) {
-			// do not hide if open
-			if (this.menuOpen) {
-				return
-			}
+		handleBlur(e) {
 			// do not hide if focus is kept within
-			if (this.$refs['list-item'].contains(event.relatedTarget)) {
+			if (this.$refs['list-item'].contains(e.relatedTarget)) {
 				return
 			}
-			this.hideActions()
-		},
 
-		/**
-		 * Hide the actions on mouseleave unless the menu is open
-		 */
-		handleMouseleave() {
-			if (!this.menuOpen) {
-				this.displayActionsOnHoverFocus = false
-			}
 			this.hovered = false
 		},
 
-		handleMouseover() {
-			this.showActions()
-			this.hovered = true
-		},
-
 		handleActionsUpdateOpen(e) {
-			this.menuOpen = e
-			this.$emit('update:menuOpen', e)
+			setTimeout(() => {
+				this.menuOpen = e
+				this.$emit('update:menuOpen', e)
+			})
 		},
 
 		// Check if subname and actions slots are populated
@@ -454,10 +419,6 @@ export default {
 		.list-item-details__details {
 			color: var(--color-primary-element-text);
 		}
-
-		.list-item-content__quick-actions :deep(svg) {
-			fill: var(--color-primary-element-text) !important;
-		}
 	}
 	.list-item-content__name,
 	.list-item-content__subname,
@@ -510,10 +471,6 @@ export default {
 		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
-	&__hoverable {
-		visibility: hidden;
-	}
-
 	.list-item-content {
 		display: flex;
 		flex-direction: column;
@@ -702,20 +659,17 @@ export default {
 
 }
 
-.list-item:hover {
-	.list-item__hoverable {
-		visibility: visible;
-		position: absolute;
-		display: flex;
-		background: var(--color-main-background);
-		border-radius: var(--border-radius-element);
-		box-shadow: 0 0 4px 0 var(--color-box-shadow);
-		height: var(--default-clickable-area);
-		inset-inline-end: var(--default-grid-baseline);
-
-		:deep(svg) {
-			fill: var(--color-main-text) !important; // needed to not inherit active styling
-		}
+.list-item__hoverable {
+	position: absolute;
+	display: flex;
+	background: var(--color-main-background);
+	border-radius: var(--border-radius-element);
+	box-shadow: 0 0 4px 0 var(--color-box-shadow);
+	height: var(--default-clickable-area);
+	inset-inline-end: var(--default-grid-baseline);
+
+	:deep(svg) {
+		fill: var(--color-main-text) !important; // needed to not inherit active styling
 	}
 }