Browse Source

fix: Improved comment creation UI

pull/6490/head
Muhammed Mustafa 1 year ago
parent
commit
1af436d923
  1. 32
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

32
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@ -75,6 +75,8 @@ onKeyStroke('Enter', (event) => {
const comments = computed(() => commentsAndLogs.value.filter((log) => log.op_type === 'COMMENT')) const comments = computed(() => commentsAndLogs.value.filter((log) => log.op_type === 'COMMENT'))
const audits = computed(() => commentsAndLogs.value.filter((log) => log.op_type !== 'COMMENT')) const audits = computed(() => commentsAndLogs.value.filter((log) => log.op_type !== 'COMMENT'))
const isSearchBoxFocused = ref(false)
function editComment(log: AuditType) { function editComment(log: AuditType) {
editLog.value = log editLog.value = log
isEditing.value = true isEditing.value = true
@ -151,7 +153,7 @@ const processedAudit = (log: string) => {
<div class="text-center text-3xl text-gray-700"> <div class="text-center text-3xl text-gray-700">
<GeneralIcon icon="commentHere" /> <GeneralIcon icon="commentHere" />
</div> </div>
<div class="font-bold text-center my-6 text-gray-500">{{ $t('activity.startCommenting') }}</div> <div class="font-medium text-center my-6 text-gray-500">{{ $t('activity.startCommenting') }}</div>
</div> </div>
<div v-else class="flex flex-col h-full p-2 space-y-2 nc-scrollbar-md"> <div v-else class="flex flex-col h-full p-2 space-y-2 nc-scrollbar-md">
<div v-for="log of comments" :key="log.id"> <div v-for="log of comments" :key="log.id">
@ -198,17 +200,23 @@ const processedAudit = (log: string) => {
</div> </div>
</div> </div>
</div> </div>
<div v-if="hasEditPermission" class="h-14 p-2 rounded-b-xl border-t-1 bg-white gap-2 flex"> <div v-if="hasEditPermission" class="h-16.5 p-2 rounded-b-xl bg-gray-50 gap-2 flex">
<a-input <div class="flex flex-row items-end">
v-model:value="comment" <GeneralUserIcon size="base" />
class="!rounded-lg border-1 bg-white !px-4 !py-2 !border-gray-200 nc-comment-box" </div>
placeholder="Start typing..." <div class="flex flex-row bg-white py-2.75 px-1.5 items-center rounded-lg border-1 border-gray-200">
@keyup.enter.prevent="saveComment" <a-input
> v-model:value="comment"
</a-input> class="!rounded-lg border-1 bg-white !px-2 !py-2 !border-gray-200 nc-comment-box !outline-none"
<NcButton type="secondary" size="medium" class="!w-8" :disabled="!comment.length" @click="saveComment"> placeholder="Start typing..."
<GeneralIcon icon="send" /> :bordered="false"
</NcButton> @keyup.enter.prevent="saveComment"
>
</a-input>
<NcButton size="medium" class="!w-8" :disabled="!comment.length" @click="saveComment">
<GeneralIcon icon="send" />
</NcButton>
</div>
</div> </div>
</div> </div>
<div v-else ref="commentsWrapperEl" class="flex flex-col h-full pl-1.5 pr-1 pt-1 nc-scrollbar-md space-y-2"> <div v-else ref="commentsWrapperEl" class="flex flex-col h-full pl-1.5 pr-1 pt-1 nc-scrollbar-md space-y-2">

Loading…
Cancel
Save