Browse Source

Merge pull request #6575 from nocodb/nc-fix/expand

Fix: expanded Record
pull/6578/head
Anbarasu 11 months ago committed by GitHub
parent
commit
b9b9777a8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      packages/nc-gui/assets/nc-icons/lookup.svg
  2. 2
      packages/nc-gui/components/cell/attachment/Image.vue
  3. 2
      packages/nc-gui/components/cell/attachment/Modal.vue
  4. 4
      packages/nc-gui/components/cell/attachment/index.vue
  5. 27
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  6. 27
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  7. 3
      packages/nc-gui/utils/iconUtils.ts

15
packages/nc-gui/assets/nc-icons/lookup.svg

@ -0,0 +1,15 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Field Icons">
<mask id="mask0_3_121" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#6a7184"/>
</mask>
<g mask="url(#mask0_3_121)">
<g id="Group 58">
<path id="Vector" d="M15.4615 15.0769L21 15.0769" stroke="#6a7184" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
<path id="Vector_2" d="M15.4615 9.53845L21 9.53845" stroke="#6a7184" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
<rect id="Rectangle 1" width="5.53846" height="16.6154" rx="1" transform="matrix(-1 0 0 1 21 4)" stroke="#6a7184" stroke-width="1.33"/>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0256 12.3077C12.0256 10.3817 10.4644 8.82049 8.53846 8.82049C6.61254 8.82049 5.05128 10.3817 5.05128 12.3077C5.05128 14.2336 6.61254 15.7948 8.53846 15.7948C10.4644 15.7948 12.0256 14.2336 12.0256 12.3077ZM8.53846 7.48715C11.2008 7.48715 13.359 9.64537 13.359 12.3077C13.359 14.97 11.2008 17.1282 8.53846 17.1282C7.4872 17.1282 6.51454 16.7917 5.72231 16.2205L5.47138 16.4714L3.47138 18.4714C3.21103 18.7318 2.78892 18.7318 2.52858 18.4714C2.26823 18.2111 2.26823 17.789 2.52858 17.5286L4.52858 15.5286L4.75813 15.299C4.10685 14.4771 3.71794 13.4378 3.71794 12.3077C3.71794 9.64537 5.87616 7.48715 8.53846 7.48715Z" fill="#6a7184"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

2
packages/nc-gui/components/cell/attachment/Image.vue

@ -16,7 +16,7 @@ const onError = () => index.value++
<template>
<LazyNuxtImg
v-if="index < props.srcs.length"
class="m-auto"
class="m-auto object-cover"
:src="props.srcs[index]"
:alt="props?.alt || ''"
placeholder

2
packages/nc-gui/components/cell/attachment/Modal.vue

@ -172,7 +172,7 @@ const handleFileDelete = (i: number) => {
<LazyCellAttachmentImage
v-if="isImage(item.title, item.mimetype)"
:srcs="getPossibleAttachmentSrc(item)"
class="max-w-full max-h-full m-auto justify-center"
class="object-cover h-64 m-auto justify-center"
@click.stop="onClick(item)"
/>

4
packages/nc-gui/components/cell/attachment/index.vue

@ -173,7 +173,7 @@ const onExpand = () => {
ref="attachmentCellRef"
tabindex="0"
:style="{
height: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
height: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
class="nc-attachment-cell relative flex color-transition flex items-center w-full"
:class="{ 'justify-center': !active, 'justify-between': active }"
@ -226,7 +226,7 @@ const onExpand = () => {
:class="{ 'justify-center': !isExpandedForm && !isGallery }"
class="flex cursor-pointer w-full items-center flex-wrap gap-2 py-1.5 scrollbar-thin-dull overflow-hidden mt-0 items-start"
:style="{
maxHeight: isForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
maxHeight: isForm || isExpandedForm ? undefined : `max(${(rowHeight || 1) * 1.8}rem, 41px)`,
}"
>
<template v-for="(item, i) of visibleItems" :key="item.url || item.title">

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

@ -102,15 +102,6 @@ const saveComment = async () => {
watch(commentsWrapperEl, () => {
scrollComments()
})
// Ignore first line if its the only one
const processedAudit = (log: string) => {
const dotSplit = log.split('.')
if (dotSplit.length === 1) return log
return log.substring(log.indexOf('.') + 1)
}
</script>
<template>
@ -238,7 +229,7 @@ const processedAudit = (log: string) => {
</div>
</template>
<div v-for="log of audits" :key="log.id">
<div class="bg-white rounded-xl border-1 gap-3 border-gray-200">
<div v-if="log.details" class="bg-white rounded-xl border-1 gap-3 border-gray-200">
<div class="flex flex-col p-4 gap-3">
<div class="flex justify-between">
<div class="flex items-center gap-2">
@ -253,9 +244,7 @@ const processedAudit = (log: string) => {
</div>
</div>
</div>
<div class="text-sm font-medium text-gray-700">
{{ processedAudit(log.description) }}
</div>
<div v-dompurify-html="log.details" class="text-sm font-medium"></div>
</div>
</div>
</div>
@ -271,4 +260,16 @@ const processedAudit = (log: string) => {
white-space: 'nowrap';
display: 'inline';
}
.text-decoration-line-through {
text-decoration: line-through;
}
:deep(.red.lighten-4) {
@apply bg-red-100 rounded-md line-through;
}
:deep(.green.lighten-4) {
@apply bg-green-100 rounded-md !mr-3 !leading-6;
}
</style>

27
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -51,6 +51,10 @@ const key = ref(0)
const wrapper = ref()
const { dashboardUrl } = useDashboard()
const { copy } = useClipboard()
const { isMobileMode } = useGlobal()
const { t } = useI18n()
@ -63,6 +67,8 @@ const state = toRef(props, 'state')
const meta = toRef(props, 'meta')
const route = useRoute()
const router = useRouter()
const isPublic = inject(IsPublicInj, ref(false))
@ -188,6 +194,17 @@ const onNext = async () => {
}
}
const copyRecordUrl = () => {
copy(
encodeURI(
`${dashboardUrl?.value}#/${route.params.typeOrId}/${route.params.projectId}/${meta.value?.id}${
props.view ? `/${props.view.title}` : ''
}?rowId=${primaryKey.value}`,
),
)
message.success('Copied to clipboard')
}
const saveChanges = async () => {
isUnsavedFormExist.value = false
await save()
@ -418,6 +435,12 @@ export default {
{{ $t('general.reload') }}
</div>
</NcMenuItem>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="!isNew ? copyRecordUrl() : () => {}">
<div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center">
<component :is="iconMap.link" class="cursor-pointer nc-duplicate-row" />
Copy record URL
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
class="text-gray-700"
@ -683,9 +706,9 @@ export default {
<template #entity-preview>
<span>
<div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
<component :is="iconMap.table" class="nc-view-icon" />
<component :is="iconMap.record" class="nc-view-icon" />
<div class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75 break-keep whitespace-nowrap">
{{ meta.title }}
{{ displayValue }}
</div>
</div>
</span>

3
packages/nc-gui/utils/iconUtils.ts

@ -89,6 +89,7 @@ import ManytoManySolidIcon from '~icons/nc-icons/mm-solid'
import BelongsToSolidIcon from '~icons/nc-icons/bt-solid'
import Record from '~icons/nc-icons/record'
import Project from '~icons/nc-icons/project'
import LookupIcon from '~icons/nc-icons/lookup'
// Roles
import Owner from '~icons/nc-icons/owner'
@ -347,7 +348,7 @@ export const iconMap = {
deleteListItem: h('span', { class: 'material-symbols' }, 'delete'),
import: h('span', { class: 'material-symbols' }, 'system_update_alt'),
edit: MaterialSymbolsEdit,
lookup: h('span', { class: 'material-symbols' }, 'search'),
lookup: LookupIcon,
text: h('span', { class: 'material-symbols' }, 'text_fields'),
longText: h('span', { class: 'material-symbols' }, 'view_headline'),
clock: h('span', { class: 'material-symbols' }, 'access_time'),

Loading…
Cancel
Save