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 audits = computed(() => commentsAndLogs.value.filter((log) => log.op_type !== 'COMMENT'))
const isSearchBoxFocused = ref(false)
function editComment(log: AuditType) {
editLog.value = log
isEditing.value = true
@ -151,7 +153,7 @@ const processedAudit = (log: string) => {
<div class="text-center text-3xl text-gray-700">
<GeneralIcon icon="commentHere" />
</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 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">
@ -198,17 +200,23 @@ const processedAudit = (log: string) => {
</div>
</div>
</div>
<div v-if="hasEditPermission" class="h-14 p-2 rounded-b-xl border-t-1 bg-white gap-2 flex">
<a-input
v-model:value="comment"
class="!rounded-lg border-1 bg-white !px-4 !py-2 !border-gray-200 nc-comment-box"
placeholder="Start typing..."
@keyup.enter.prevent="saveComment"
>
</a-input>
<NcButton type="secondary" size="medium" class="!w-8" :disabled="!comment.length" @click="saveComment">
<GeneralIcon icon="send" />
</NcButton>
<div v-if="hasEditPermission" class="h-16.5 p-2 rounded-b-xl bg-gray-50 gap-2 flex">
<div class="flex flex-row items-end">
<GeneralUserIcon size="base" />
</div>
<div class="flex flex-row bg-white py-2.75 px-1.5 items-center rounded-lg border-1 border-gray-200">
<a-input
v-model:value="comment"
class="!rounded-lg border-1 bg-white !px-2 !py-2 !border-gray-200 nc-comment-box !outline-none"
placeholder="Start typing..."
:bordered="false"
@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 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