feat(KtComment): implement CommentActions and CommentActionsReply

Common helper components for KtComment.vue and CommentReply.vue ..that wrap and unify the reply button / more actions button Product-approved Design and Request
3YOURMIND · May 25, 2022 · 2f96173 · 2f96173
1 parent fe9874a
commit 2f96173
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 22 deletions.
diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -23,15 +23,13 @@
 					<KtButton icon="check" @click="handleEditConfirm" />
 				</KtButtonGroup>
 			</div>
-			<div class="comment__action">
-				<div
-					class="action__reply"
-					@click="handleInlineReplyClick({ userName, userId })"
-				>
-					<i class="yoco" v-text="'comment'" /> {{ replyButton }}
-				</div>
-				<CommentOptions :options="actionOptions" />
-			</div>
+
+			<CommentActions
+				:options="actionOptions"
+				:userData="{ userId, userName }"
+				@replyClick="handleReplyClick"
+			/>
+
 			<div v-for="reply in replies" :key="reply.id">
 				<CommentReply
 					:id="reply.id"
@@ -69,25 +67,23 @@ import { useTranslationNamespace } from '../kotti-i18n/hooks'
 import { makeProps } from '../make-props'
 import { Kotti } from '../types'
 
-import CommentActionsOptions from './components/CommentActionsOptions.vue'
+import CommentActions from './components/CommentActions.vue'
 import CommentReply from './components/CommentReply.vue'
 import KtCommentInput from './KtCommentInput.vue'
 import { KottiComment } from './types'
 
-type UserData = Pick<KottiComment.PropsInternal, 'userName' | 'userId'>
-
 export default defineComponent<KottiComment.PropsInternal>({
 	name: 'KtComment',
 	components: {
+		CommentActions,
 		CommentReply,
-		CommentActionsOptions,
 		KtCommentInput,
 	},
 	props: makeProps(KottiComment.propsSchema),
 	setup(props, { emit }) {
 		const isInlineEdit = ref(false)
 		const inlineMessageValue = ref<string | null>(null)
-		const userBeingRepliedTo = ref<UserData | null>(null)
+		const userBeingRepliedTo = ref<Kotti.Comment.UserData | null>(null)
 		const translations = useTranslationNamespace('KtComment')
 
 		const handleDelete = (commentId: number | string, isInline?: boolean) => {
@@ -130,7 +126,7 @@ export default defineComponent<KottiComment.PropsInternal>({
 				}
 				emit('edit', payload)
 			},
-			handleInlineReplyClick: (replyUserData: UserData) => {
+			handleReplyClick: (replyUserData: Kotti.Comment.UserData) => {
 				userBeingRepliedTo.value = replyUserData
 			},
 			handleInlineSubmit: (commentData: KottiComment.Events.Submit) => {
@@ -149,7 +145,6 @@ export default defineComponent<KottiComment.PropsInternal>({
 							userBeingRepliedTo.value.userName,
 					  ].join(' '),
 			),
-			replyButton: computed(() => translations.value.replyButton),
 			userBeingRepliedTo,
 		}
 	},

diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentActions.vue b/packages/kotti-ui/source/kotti-comment/components/CommentActions.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="kt-comment__content__actions">
+		<CommentActionsReply @click="handleReplyClick" />
+		<CommentActionsOptions :options="options" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+import { Kotti } from '../../types'
+
+import CommentActionsOptions from './CommentActionsOptions.vue'
+import CommentActionsReply from './CommentActionsReply.vue'
+
+export default defineComponent<{
+	options: Kotti.Popover.Props['options']
+	userData: Kotti.Comment.UserData
+}>({
+	name: 'CommentActions',
+	props: {
+		options: { type: Array, required: true },
+		userData: { type: Object, required: true },
+	},
+	components: {
+		CommentActionsOptions,
+		CommentActionsReply,
+	},
+	setup(props, { emit }) {
+		return {
+			handleReplyClick: () => emit('replyClick', props.userData),
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-comment__content__actions {
+	display: flex;
+	justify-content: space-between;
+	margin: 0.2rem 0;
+	font-size: 0.7rem;
+	font-weight: 600;
+	line-height: 1.2rem;
+	color: var(--link-02);
+
+	> * {
+		&:hover {
+			cursor: pointer;
+			color: var(--link-03);
+		}
+	}
+
+	.yoco {
+		font-size: 0.9rem;
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentActionsReply.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="kt-comment__actions__reply" @click="$emit('click')">
+		<i class="yoco" v-text="'comment'" />
+		<span v-text="replyButtonText" />
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api'
+
+import { useTranslationNamespace } from '../../kotti-i18n/hooks'
+
+export default defineComponent({
+	name: 'CommentAcionsReply',
+	props: {},
+	setup() {
+		const translations = useTranslationNamespace('KtComment')
+
+		return {
+			replyButtonText: computed(() => translations.value.replyButton),
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-comment__actions__reply {
+	display: flex;
+	align-items: center;
+	flex: 0 0 auto;
+	padding: 0 var(--unit-01);
+
+	> *:not(:last-child) {
+		margin-right: var(--unit-01);
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue b/packages/kotti-ui/source/kotti-comment/components/CommentReply.vue
@@ -17,7 +17,6 @@
 						v-html="postEscapeParser(dangerouslyOverrideParser(inlineMessage))"
 					/>
 					<!-- eslint-enable vue/no-v-html -->
-					<i class="yoco" v-text="'comment'" />
 				</div>
 				<div v-else class="comment-inline-edit form-group">
 					<textarea
@@ -29,8 +28,12 @@
 						<KtButton icon="check" @click="handleConfirm" />
 					</KtButtonGroup>
 				</div>
-				<CommentOptions v-if="!isInlineEdit" :options="actionOptions" />
-			</div>
+
+			<CommentActions
+				:options="actionOptions"
+				:userData="{ userId, userName }"
+				@replyClick="($event) => $emit('replyClick', $event)"
+			/>
 		</div>
 	</div>
 </template>
@@ -39,13 +42,11 @@
 import escape from 'lodash/escape'
 
 import CommentActions from './CommentActions.vue'
-import CommentOptions from './CommentActionsOptions.vue'
-
 
 export default {
 	name: 'CommentReply',
 	components: {
-		CommentOptions,
+		CommentActions,
 	},
 	props: {
 		createdTime: String,

diff --git a/packages/kotti-ui/source/kotti-comment/types.ts b/packages/kotti-ui/source/kotti-comment/types.ts
@@ -51,6 +51,8 @@ export namespace KottiComment {
 		replyButton: string
 		replyPlaceholder: string
 	}
+
+	export type UserData = Pick<PropsInternal, 'userName' | 'userId'>
 }
 
 export namespace KottiCommentInput {