diff options
author | Joas Schilling <coding@schilljs.com> | 2021-01-15 11:45:41 +0300 |
---|---|---|
committer | backportbot[bot] <backportbot[bot]@users.noreply.github.com> | 2021-02-19 12:45:21 +0300 |
commit | de8de59e08a548a8ae56c9877b9ceca339b1f63e (patch) | |
tree | d442e95cc946a590b7fd7dafd5b3495402bff3a2 /src | |
parent | 5824b0de461f98423ee0cd128afe856631a60650 (diff) |
Render deleted chat messages differently
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 21 |
1 files changed, 21 insertions, 0 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index bda1c092b..b58d76386 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -52,6 +52,9 @@ the main body of the message as well as a quote. <RichText :text="message" :arguments="richParameters" :autolink="true" /> <CallButton /> </div> + <div v-else-if="isDeletedMessage" class="message__main__text deleted-message"> + <RichText :text="message" :arguments="richParameters" :autolink="true" /> + </div> <div v-else class="message__main__text" :class="{'system-message': isSystemMessage}"> <Quote v-if="parent" :parent-id="parent" v-bind="quote" /> <RichText :text="message" :arguments="richParameters" :autolink="true" /> @@ -282,6 +285,13 @@ export default { required: true, }, /** + * The type of the message. + */ + messageType: { + type: String, + required: true, + }, + /** * The parent message's id. */ parent: { @@ -320,6 +330,10 @@ export default { return this.systemMessage !== '' }, + isDeletedMessage() { + return this.messageType === 'comment_deleted' + }, + messageTime() { return moment(this.timestamp * 1000).format('LT') }, @@ -580,6 +594,13 @@ export default { width: 100%; } + &.deleted-message { + background-color: var(--color-background-dark); + color: var(--color-text-lighter); + padding: var(--border-radius) var(--border-radius-large); + border-radius: var(--border-radius-large); + } + ::v-deep .rich-text--wrapper { white-space: pre-wrap; word-break: break-word; |