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

fix: Links modal for mobile

pull/6558/head
Muhammed Mustafa 1 year ago
parent
5f7db89c9b
commit
a267580ec1
2 changed files with 56 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 110
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  2. 5
      packages/nc-gui/components/virtual-cell/components/ListItems.vue

110
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
Unescape View File

@ -190,7 +190,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
ref="filterQueryRef" ref="filterQueryRef"
v-model:value="childrenListPagination.query" v-model:value="childrenListPagination.query"
:placeholder="`Search in ${relatedTableMeta?.title}`" :placeholder="`Search in ${relatedTableMeta?.title}`"
class="w-full !rounded-md" class="w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"
size="small" size="small"
:bordered="false" :bordered="false"
@focus="isFocused = true" @focus="isFocused = true"
@ -202,65 +202,63 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
</div> </div>
</div> </div>
<div class="flex flex-col flex-grow"> <div class="flex flex-col flex-grow nc-scrollbar-md">
<template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows"> <template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
<div class="mt-2 mb-2"> <div class="cursor-pointer pr-1">
<div class="nc-scrollbar-md cursor-pointer pr-1"> <template v-if="isChildrenLoading">
<template v-if="isChildrenLoading"> <div
<div v-for="(x, i) in Array.from({ length: 10 })"
v-for="(x, i) in Array.from({ length: 10 })" :key="i"
:key="i" class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50" >
> <a-skeleton-image class="h-24 w-24 !rounded-xl" />
<a-skeleton-image class="h-24 w-24 !rounded-xl" /> <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
<div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center"> <a-skeleton-input class="!w-48 !rounded-xl" active size="small" />
<a-skeleton-input class="!w-48 !rounded-xl" active size="small" /> <div class="flex flex-row gap-6 w-10/12">
<div class="flex flex-row gap-6 w-10/12"> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" /> </div>
</div> <div class="flex flex-col gap-0.5">
<div class="flex flex-col gap-0.5"> <a-skeleton-input class="!h-4 !w-12" active size="small" />
<a-skeleton-input class="!h-4 !w-12" active size="small" /> <a-skeleton-input class="!h-4 !w-24" active size="small" />
<a-skeleton-input class="!h-4 !w-24" active size="small" />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<template v-else> </template>
<LazyVirtualCellComponentsListItem <template v-else>
v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []" <LazyVirtualCellComponentsListItem
:key="id" v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
:row="refRow" :key="id"
:fields="fields" :row="refRow"
data-testid="nc-child-list-item" :fields="fields"
:attachment="attachmentCol" data-testid="nc-child-list-item"
:related-table-display-value-prop="relatedTableDisplayValueProp" :attachment="attachmentCol"
:is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true" :related-table-display-value-prop="relatedTableDisplayValueProp"
:is-loading="isChildrenListLoading[Number.parseInt(id)]" :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
@expand="onClick(refRow)" :is-loading="isChildrenListLoading[Number.parseInt(id)]"
@click=" @expand="onClick(refRow)"
() => { @click="
if (isPublic && !isForm) return () => {
isNew if (isPublic && !isForm) return
? unlinkRow(refRow, Number.parseInt(id)) isNew
: isChildrenListLinked[Number.parseInt(id)] ? unlinkRow(refRow, Number.parseInt(id))
? unlinkRow(refRow, Number.parseInt(id)) : isChildrenListLinked[Number.parseInt(id)]
: linkRow(refRow, Number.parseInt(id)) ? unlinkRow(refRow, Number.parseInt(id))
} : linkRow(refRow, Number.parseInt(id))
" }
/> "
</template> />
</div> </template>
</div> </div>
</template> </template>
<div v-else class="pt-1 flex flex-col gap-3 my-auto items-center justify-center text-gray-500"> <div v-else class="pt-1 flex flex-col gap-3 my-auto items-center justify-center text-gray-500">

5
packages/nc-gui/components/virtual-cell/components/ListItems.vue
Unescape View File

@ -186,7 +186,7 @@ onKeyStroke('Escape', () => {
ref="filterQueryRef" ref="filterQueryRef"
v-model:value="childrenExcludedListPagination.query" v-model:value="childrenExcludedListPagination.query"
:placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`" :placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`"
class="w-full !rounded-md nc-excluded-search" class="w-full !rounded-md nc-excluded-search xs:min-h-8"
size="small" size="small"
:bordered="false" :bordered="false"
@focus="isFocused = true" @focus="isFocused = true"
@ -204,7 +204,6 @@ onKeyStroke('Escape', () => {
v-if="!isPublic" v-if="!isPublic"
v-e="['c:row-expand:open']" v-e="['c:row-expand:open']"
type="secondary" type="secondary"
size="xl"
class="!text-brand-500" class="!text-brand-500"
@click=" @click="
() => { () => {
@ -213,7 +212,7 @@ onKeyStroke('Escape', () => {
} }
" "
> >
<div class="flex items-center gap-1"><MdiPlus /> {{ $t('activity.newRecord') }}</div> <div class="flex items-center gap-1 xs:px-4"><MdiPlus v-if="!isMobileMode" /> {{ $t('activity.newRecord') }}</div>
</NcButton> </NcButton>
</div> </div>

Write Preview
Loading…
Cancel
Save