diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index c4a04bc1a29..aab55b106ab 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -29,9 +29,9 @@ the main body of the message as well as a quote. :id="`message_${id}`" ref="message" class="message" - :class="{'hover': showActions && !isSystemMessage, 'system' : isSystemMessage}" - @mouseover="showActions=true" - @mouseleave="showActions=false"> + :class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}" + @mouseover="handleMouseover" + @mouseleave="handleMouseleave">
-
+
= this.id - && this.showSentIcon + && this.showSentIcon && !this.isDeletedMessage }, showSentIcon() { @@ -368,6 +368,7 @@ export default { && !this.isDeleting && this.actorType === this.participant.actorType && this.actorId === this.participant.actorId + && !this.isDeletedMessage }, messagesList() { @@ -594,6 +595,14 @@ export default { this.isDeleting = false }, + + handleMouseover() { + this.showActions = true + }, + + handleMouseleave() { + this.showActions = false + }, }, } @@ -636,10 +645,10 @@ export default { } &.deleted-message { - background-color: var(--color-background-dark); color: var(--color-text-lighter); - padding: var(--border-radius) var(--border-radius-large); + display: flex; border-radius: var(--border-radius-large); + align-items: center; } ::v-deep .rich-text--wrapper {