Skip to content

fix: actions menu for envelope #13296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
madbob wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −83
Open

fix: actions menu for envelope #13296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions src/components/EnvelopeSingleClickActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
108 changes: 31 additions & 77 deletions src/components/EnvelopeSkeleton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down Expand Up @@ -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"
Expand All @@ -103,7 +102,7 @@

<!-- Actions -->
<div
v-show="forceDisplayActions || displayActionsOnHoverFocus"
v-show="hasActions"
class="list-item__actions"
@focusout="handleBlur">
<NcActions
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -293,7 +284,6 @@ export default {
hovered: false,
hasActions: false,
hasSubname: false,
displayActionsOnHoverFocus: false,
menuOpen: false,
hasIndicator: false,
hasDetails: false,
Expand All @@ -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
},
},

Expand Down Expand Up @@ -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() {

@ChristophWurst ChristophWurst Jul 17, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

method still used on L39

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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
}
}

Expand Down
Loading