diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2021-02-03 17:34:22 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2021-02-03 17:42:42 +0300 |
commit | 2a5221b094fe5ac265967b19ba9cf1e1c47fba0d (patch) | |
tree | 7712b572ba534c0c68209f63e1f0d9390aec96ba | |
parent | 4fe627faea69fb99882a2cf6d6ce9800f5795092 (diff) |
Improve deleted messages look
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 25 |
1 files changed, 17 insertions, 8 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index c4a04bc1a..aab55b106 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"> <div v-if="isFirstMessage && showAuthor" class="message__author" role="heading" @@ -59,7 +59,7 @@ the main body of the message as well as a quote. <Quote v-if="parent" :parent-id="parent" v-bind="quote" /> <RichText :text="message" :arguments="richParameters" :autolink="true" /> </div> - <div class="message__main__right"> + <div v-if="!isDeletedMessage" class="message__main__right"> <span v-tooltip.auto="messageDate" class="date" @@ -169,7 +169,7 @@ import { showError, showSuccess, showWarning, - TOAST_DEFAULT_TIMEOUT + TOAST_DEFAULT_TIMEOUT, } from '@nextcloud/dialogs' export default { @@ -359,7 +359,7 @@ export default { showCommonReadIcon() { return this.conversation.lastCommonReadMessage >= 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 + }, }, } </script> @@ -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 { |