Allow to cancel repies and adapt comment ui to talk

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/CardSidebarTabComments.vue

@@ -7,7 +7,11 @@
 			</span>
 		</div>
 
-		<CommentItem v-if="replyTo" :comment="replyTo" :reply="true" />
+		<CommentItem v-if="replyTo"
+			:comment="replyTo"
+			:reply="true"
+			:preview="true"
+			@cancel="cancelReply" />
 		<CommentForm v-model="newComment" @submit="createComment" />
 
 		<ul v-if="getCommentsForCard(card.id).length > 0" id="commentsFeed">
@@ -36,6 +40,7 @@ import CommentItem from './CommentItem'
 import CommentForm from './CommentForm'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
+
 export default {
 	name: 'CardSidebarTabComments',
 	components: {
@@ -101,6 +106,7 @@ export default {
 			}
 		},
 		async loadComments() {
+			this.$store.dispatch('setReplyTo', null)
 			this.error = null
 			this.isLoading = true
 			try {
@@ -130,6 +136,9 @@ export default {
 			await this.$store.dispatch('fetchMore', { cardId: this.card.id })
 			this.isLoading = false
 		},
+		cancelReply() {
+			this.$store.dispatch('setReplyTo', null)
+		},
 	},
 }
 </script>

src/components/card/CommentForm.vue

@@ -178,6 +178,7 @@ export default {
 
 	.comment-form__contenteditable {
 		word-break: break-word;
+		border-radius: var(--border-radius-large)
 	}
 
 	.atwho-wrap {

src/components/card/CommentItem.vue

@@ -1,11 +1,23 @@
 <template>
-	<div v-if="reply" class="reply">
-		<span class="reply--hint">{{ t('deck', 'In reply to') }} <UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" /></span>
+	<div v-if="reply" class="reply" :class="{ 'reply--preview': preview }">
+		<div class="reply--wrapper">
+			<div class="reply--header">
+				<div class="reply--hint">
+					{{ t('deck', 'In reply to') }}
+					<UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+				</div>
+				<Actions v-if="preview" class="reply--cancel">
+					<ActionButton icon="icon-close" @click="$emit('cancel')">
+						{{ t('deck', 'Cancel reply') }}
+					</ActionButton>
+				</Actions>
+			</div>
 			<RichText class="comment--content"
 				:text="richText(comment)"
 				:arguments="richArgs(comment)"
 				:autolink="true" />
 		</div>
+	</div>
 	<li v-else class="comment">
 		<template>
 			<div class="comment--header">
@@ -14,13 +26,19 @@
 					{{ comment.actorDisplayName }}
 				</span>
 				<Actions v-show="!edit" :force-menu="true">
-					<ActionButton icon="icon-reply" @click="replyTo()">
+					<ActionButton icon="icon-reply" :close-after-click="true" @click="replyTo()">
 						{{ t('deck', 'Reply') }}
 					</ActionButton>
-					<ActionButton v-if="canEdit" icon="icon-rename" @click="showUpdateForm()">
+					<ActionButton v-if="canEdit"
+						icon="icon-rename"
+						:close-after-click="true"
+						@click="showUpdateForm()">
 						{{ t('deck', 'Update') }}
 					</ActionButton>
-					<ActionButton v-if="canEdit" icon="icon-delete" @click="deleteComment()">
+					<ActionButton v-if="canEdit"
+						icon="icon-delete"
+						:close-after-click="true"
+						@click="deleteComment()">
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
@@ -86,6 +104,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		preview: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -175,20 +197,41 @@ export default {
 	@import '../../css/comments';
 
 	.reply {
-		border-left: 3px solid var(--color-primary-element);
-		padding-left: 5px;
-		margin-left: 2px;
-		margin-bottom: 5px;
+		margin: 0 0 0 44px;
+
+		&.reply--preview {
+			margin: 4px 0;
+			padding: 8px;
+			background-color: var(--color-background-hover);
+			border-radius: var(--border-radius-large);
+
+			.reply--wrapper {
+				margin: 8px;
+			}
+
+			.reply--cancel {
+				margin-right: -12px;
+				margin-top: -12px;
+			}
+		}
+
+		.reply--wrapper {
+			border-left: 4px solid var(--color-border-dark);
+			padding-left: 8px;
+		}
 
 		&::v-deep .rich-text--wrapper {
 			margin-top: -3px;
-			color: var(--color-text-light);
+			color: var(--color-text-lighter);
+		}
+
+		.reply--header {
+			display: flex;
 		}
 
 		.reply--hint {
-			font-size: 0.9em;
 			color: var(--color-text-lighter);
-			vertical-align: top;
+			flex-grow: 1;
 		}
 
 		.comment--content {