github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: height

pull/6464/head
DarkPhoenix2704 12 months ago
parent
e5ee7c1d8b
commit
c77640742a
4 changed files with 62 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui/assets/style.scss
  2. 3
      packages/nc-gui/components/general/UserIcon.vue
  3. 101
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  4. 13
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

2
packages/nc-gui/assets/style.scss
Unescape View File

@ -434,7 +434,7 @@ a {
}
.ant-modal {
@apply !top-[50px];
@apply !top-[30px];
}
.ant-modal-content {
@apply !p-6;

3
packages/nc-gui/components/general/UserIcon.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
const props = defineProps<{
size?: 'small' | 'medium' | 'large' | 'xlarge'
size?: 'small' | 'medium' | 'base' | 'large' | 'xlarge'
name?: string
}>()
@ -35,6 +35,7 @@ const usernameInitials = computed(() => {
:class="{
'min-w-4 min-h-4': size === 'small',
'min-w-6 min-h-6': size === 'medium',
'w-8 h-8 !text-md': size === 'base',
'min-w-20 min-h-20 !text-3xl': size === 'large',
'min-w-26 min-h-26 !text-4xl': size === 'xlarge',
}"

101
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
Unescape View File

@ -100,7 +100,7 @@ watch(
</script>
<template>
<div class="flex flex-col w-full h-[540px] bg-gray-50 rounded-lg">
<div class="flex flex-col h-full w-full bg-gray-50 rounded-lg">
<div class="bg-white rounded-t-lg border-gray-200 border-b-1">
<div class="flex flex-row gap-2 m-2 p-1 bg-gray-100 rounded-lg">
<div
@ -110,7 +110,7 @@ watch(
}"
@click="tab = 'comments'"
>
<div class="tab-title gap-2 nc-tab">
<div class="tab-title nc-tab">
<MdiMessageOutline class="h-4 w-4" />
Comments
</div>
@ -122,7 +122,7 @@ watch(
}"
@click="tab = 'audits'"
>
<div class="tab-title gap-2 nc-tab">
<div class="tab-title nc-tab">
<MdiFileDocumentOutline class="h-4 w-4" />
Audits
</div>
@ -130,29 +130,28 @@ watch(
</div>
</div>
<div>
<div
v-if="tab === 'comments'"
ref="commentsWrapperEl"
class="flex flex-col m-1 p-1 !h-[407px] overflow-y-scroll nc-scrollbar-md space-y-2"
>
<template v-if="comments.length === 0">
<div class="flex flex-col text-center justify-center h-full">
<div class="text-center text-3xl text-gray-700">
<MdiChatProcessingOutline />
</div>
<div class="font-bold text-center my-1 text-gray-700">Start a conversation</div>
<div v-if="tab === 'comments'" ref="commentsWrapperEl" class="flex flex-col h-[74vh] max-h-[680px]">
<div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full">
<div class="text-center text-3xl text-gray-700">
<MdiChatProcessingOutline />
</div>
</template>
<template v-else>
<div v-for="log of comments" :key="log.id">
<div class="bg-white rounded-xl group border-1 gap-3 border-gray-200">
<div class="font-bold text-center my-1 text-gray-700">Start a conversation</div>
</div>
<div v-else class="flex-grow-1 my-2 px-2 space-y-2 overflow-y-scroll nc-scrollbar-md">
<div v-for="log of comments" :key="log.id" class="!last:mb-11">
<div class="bg-white rounded-xl group border-1 gap-2 border-gray-200">
<div class="flex flex-col p-4 gap-3">
<div class="flex justify-between">
<div class="flex font-bold items-center gap-2">
<GeneralUserIcon :name="log.display_name ?? log.user" />
<span class="truncate max-w-42">
{{ log.display_name ?? log.user ?? 'Shared base' }}
</span>
<div class="flex items-center gap-2">
<GeneralUserIcon size="base" :name="log.display_name ?? log.user" />
<div class="flex flex-col">
<span class="truncate font-bold max-w-42">
{{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared base' }}
</span>
<div v-if="log.id !== editLog?.id" class="text-xs text-gray-500">
{{ log.created_at !== log.updated_at ? `Edited ${timeAgo(log.updated_at)}` : timeAgo(log.created_at) }}
</div>
</div>
</div>
<NcButton
v-if="log.user === user.email && !editLog"
@ -179,15 +178,31 @@ watch(
<NcButton type="secondary" size="sm" @click="onCancel"> Cancel </NcButton>
<NcButton size="sm" @click="onEditComment"> Save </NcButton>
</div>
<div v-if="log.id !== editLog?.id" class="text-xs text-gray-500">
{{ log.created_at !== log.updated_at ? `Edited ${timeAgo(log.updated_at)}` : timeAgo(log.created_at) }}
</div>
</div>
</div>
</div>
</template>
</div>
<div
v-if="hasEditPermission"
class="mt-1 absolute bottom-0 left-0 right-0 w-[285px] 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" @click="saveComment">
<Icon class="iconify text-gray-800" icon="lucide:send" />
</NcButton>
</div>
</div>
<div v-else ref="commentsWrapperEl" class="flex flex-col m-1 p-1 !h-[465px] overflow-y-scroll nc-scrollbar-md space-y-2">
<div
v-else
ref="commentsWrapperEl"
class="flex flex-col m-1 p-1 h-[74vh] max-h-[680px] overflow-y-scroll nc-scrollbar-md space-y-2"
>
<template v-if="audits.length === 0">
<div class="flex flex-col text-center justify-center h-full">
<div class="text-center text-3xl text-gray-600">
@ -201,42 +216,32 @@ watch(
<div class="flex flex-col p-4 gap-3">
<div class="flex justify-between">
<div class="flex font-bold items-center gap-2">
<GeneralUserIcon :name="log.display_name ?? log.user" />
<GeneralUserIcon size="base" :name="log.display_name ?? log.user" />
<span class="truncate max-w-50">
{{ log.user ?? 'Shared base' }}
</span>
<div class="flex flex-col">
<span class="truncate max-w-50">
{{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared base' }}
</span>
<div v-if="log.id !== editLog?.id" class="text-xs text-gray-500">
{{ timeAgo(log.created_at) }}
</div>
</div>
</div>
</div>
<div class="text-sm font-medium text-gray-700">
{{ log.description.split('.')[1] }}
</div>
<div v-if="log.id !== editLog?.id" class="text-xs text-gray-500">
{{ timeAgo(log.created_at) }}
</div>
</div>
</div>
</div>
</div>
<div v-if="hasEditPermission && tab === 'comments'" class="shrink mt-2 p-2 rounded-b-xl border-t-1 bg-white gap-1 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" @click="saveComment">
<Icon class="iconify text-gray-800" icon="lucide:send" />
</NcButton>
</div>
</div>
</div>
</template>
<style scoped>
.tab .tab-title {
@apply min-w-0 flex justify-center gap-1 font-semibold items-center;
@apply min-w-0 flex justify-center gap-2 font-semibold items-center;
word-break: 'keep-all';
white-space: 'nowrap';
display: 'inline';

13
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -343,13 +343,12 @@ export default {
v-model:visible="isExpanded"
:footer="null"
:width="commentsDrawer && isUIAllowed('commentList') ? 'min(90vw,1280px)' : 'min(90vw,1280px)'"
height="min(90vh,856px)"
:body-style="{ padding: 0 }"
:closable="false"
class="nc-drawer-expanded-form"
class="nc-drawer-expanded-form max-h-[856px]"
:class="{ active: isExpanded }"
>
<div class="flex w-full items-center nc-expanded-form-header relative pb-2 justify-between">
<div class="flex flex-shrink-0 w-full items-center nc-expanded-form-header relative pb-2 justify-between">
<div class="flex gap-3">
<div class="flex gap-1">
<NcButton v-if="props.showNextPrevIcons" type="secondary" size="small" class="nc-prev-arrow" @click="$emit('prev')">
@ -409,9 +408,9 @@ export default {
</div>
</div>
<div class="flex flex-row w-full gap-4">
<div class="fle relative w-full flex-col">
<div class="flex w-full flex-col h-[85vh] max-h-[770px] border-1 rounded-xl border-gray-200">
<div
class="flex flex-col !pb-12 nc-scrollbar-md h-[540px] overflow-y-scroll items-center w-full bg-white border-1 border-gray-200 rounded-xl p-4"
class="flex flex-grow-1 h-full flex-col !pb-12 nc-scrollbar-md overflow-y-scroll items-center w-full rounded-xl bg-white p-4"
>
<div
v-for="(col, i) of fields"
@ -495,14 +494,14 @@ export default {
</div>
<div
v-if="isUIAllowed('dataEdit')"
class="w-full absolute bottom-0 z-10 bg-white flex justify-end border-1 border-gray-200 p-2 rounded-b-lg"
class="w-full flex-shrink-1 rounded-xl border-t-1 border-gray-200 bottom-0 z-10 bg-white flex justify-end p-2"
>
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn" @click="save"> Save </NcButton>
</div>
</div>
<div
v-if="!isNew && commentsDrawer && isUIAllowed('commentList')"
class="nc-comments-drawer border-1 border-gray-200 w-[380px] rounded-lg min-w-0"
class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-lg min-w-0"
:class="{ active: commentsDrawer && isUIAllowed('commentList') }"
>
<LazySmartsheetExpandedFormComments />

Write Preview
Loading…
Cancel
Save