group comments by user and posting time

Signed-off-by: dartcafe <github@dartcafe.de>

2 files changed, 50 insertions, 12 deletions

diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue
index 7d45e3e6..52563d53 100644
--- a/src/js/components/Actions/ActionDelete.vue
+++ b/src/js/components/Actions/ActionDelete.vue
@@ -21,36 +21,53 @@
   -->
 
 <template>
-	<Actions>
-		<ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()">
-			{{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }}
-		</ActionButton>
-		<ActionButton v-else icon="icon-delete" @click="deleteItem()">
-			{{ title }}
-		</ActionButton>
-	</Actions>
+	<div class="">
+		<DeleteIcon v-if="iconMode && !deleteTimeout" :size="iconSize" @click="deleteItem()" />
+		<UndoIcon v-if="iconMode && deleteTimeout" :size="iconSize" @click="cancelDelete()" />
+
+		<Actions v-if="!iconMode">
+			<ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()">
+				{{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }}
+			</ActionButton>
+			<ActionButton v-else icon="icon-delete" @click="deleteItem()">
+				{{ title }}
+			</ActionButton>
+		</Actions>
+	</div>
 </template>
 
 <script>
 import { Actions, ActionButton } from '@nextcloud/vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue'
 
 export default {
 	name: 'ActionDelete',
 	components: {
 		Actions,
 		ActionButton,
+		DeleteIcon,
+		UndoIcon,
 	},
 
 	props: {
 		// timeout in seconds
 		timeout: {
 			type: Number,
-			default: 7,
+			default: 4,
 		},
 		title: {
 			type: String,
 			default: t('polls', 'Delete'),
 		},
+		iconMode: {
+			type: Boolean,
+			default: false,
+		},
+		iconSize: {
+			type: Number,
+			default: 20,
+		},
 	},
 
 	data() {
@@ -88,3 +105,17 @@ export default {
 	},
 }
 </script>
+
+<style lang ="scss">
+.material-design-icon {
+
+	&.delete-icon,
+	&.undo-icon {
+		cursor: pointer;
+	}
+
+	&.delete-icon:hover {
+		color: var(--color-error-hover);
+	}
+}
+</style>
diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 3da126ed..5e0107f2 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -26,11 +26,14 @@
 		<div class="comment-item__content">
 			<span class="comment-item__user">{{ comment.user.displayName }}</span>
 			<span class="comment-item__date">{{ dateCommentedRelative }}</span>
-			<div class="comment-item__comment">
-				{{ comment.comment }}
-			</div>
+			<p v-for="(subComment) in comment.subComments"
+				:key="subComment.id"
+				class="comment-item__comment">
+				{{ subComment.comment }}
+			</p>
 		</div>
 		<ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner"
+			icon-mode
 			:title="t('polls', 'Delete comment')"
 			@delete="deleteComment()" />
 	</div>
@@ -97,6 +100,10 @@ export default {
 		}
 	}
 
+	.comment-item__comment {
+		hyphens: auto;
+	}
+
 	.comment-item__content {
 		margin-left: 8px;
 		flex: 1 1;