Browse Source

fix: Improved expanded form UI for mobile

pull/6490/head
Muhammed Mustafa 1 year ago
parent
commit
3b2587bed3
  1. 8
      packages/nc-gui/assets/style.scss
  2. 2
      packages/nc-gui/components/nc/MenuItem.vue
  3. 10
      packages/nc-gui/components/nc/Modal.vue
  4. 203
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

8
packages/nc-gui/assets/style.scss

@ -53,6 +53,14 @@ main {
@apply !rounded-lg !py-2 !px-3 mb-1;
}
.mobile {
.nc-scrollbar-md, nc-scrollbar-dark-md, nc-scrollbar-dark-md, nc-scrollbar-sm-dark, nc-scrollbar-x-md {
&::-webkit-scrollbar {
width: 0px;
}
}
}
.nc-scrollbar-md {
overflow-y: scroll;
overflow-x: hidden;

2
packages/nc-gui/components/nc/MenuItem.vue

@ -8,7 +8,7 @@
<style lang="scss">
.ant-dropdown-menu-item.nc-menu-item {
@apply py-2 px-2 mx-1.5 font-normal text-dropdown rounded-md overflow-hidden hover:bg-gray-100;
@apply p-2 mx-1.5 font-normal text-sm xs:(text-base py-3 px-3.5 mx-0) rounded-md overflow-hidden hover:bg-gray-100;
}
.nc-menu-item-inner {

10
packages/nc-gui/components/nc/Modal.vue

@ -18,7 +18,13 @@ const emits = defineEmits(['update:visible'])
const { width: propWidth, destroyOnClose, maskClosable } = props
const { isMobileMode } = useGlobal()
const width = computed(() => {
if (isMobileMode.value) {
return '95vw'
}
if (propWidth) {
return propWidth
}
@ -39,6 +45,10 @@ const width = computed(() => {
})
const height = computed(() => {
if (isMobileMode.value) {
return '95vh'
}
if (props.size === 'small') {
return 'auto'
}

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

@ -50,6 +50,8 @@ const emits = defineEmits(['update:modelValue', 'cancel', 'next', 'prev'])
const key = ref(0)
const { isMobileMode } = useGlobal()
const { t } = useI18n()
const row = ref(props.row)
@ -349,81 +351,96 @@ export default {
class="nc-drawer-expanded-form"
:class="{ active: isExpanded }"
>
<div class="h-[80vh] max-h-215 flex flex-col">
<div class="h-[80vh] xs:(h-[95vh] max-h-full) max-h-215 flex flex-col">
<div class="flex h-8 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
<div class="flex gap-3">
<template v-if="!isMobileMode">
<div class="flex gap-3">
<div class="flex gap-2">
<NcButton v-if="props.showNextPrevIcons" type="secondary" class="nc-prev-arrow !w-10" @click="$emit('prev')">
<MdiChevronUp class="text-md text-gray-700" />
</NcButton>
<NcButton v-if="!props.lastRow" type="secondary" class="nc-next-arrow !w-10" @click="onNext">
<MdiChevronDown class="text-md text-gray-700" />
</NcButton>
</div>
<div v-if="displayValue" class="flex items-center truncate max-w-32 font-bold text-gray-800 text-xl">
{{ displayValue }}
</div>
<div class="bg-gray-100 px-2 gap-1 flex my-1 items-center rounded-lg text-gray-800 font-medium">
<TableIcon class="w-6 h-6 text-sm" />
All {{ meta.title }}
</div>
</div>
<div class="flex gap-2">
<NcDropdown v-if="!isNew">
<NcButton type="secondary" class="nc-expand-form-more-actions w-10">
<GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" />
</NcButton>
<template #overlay>
<NcMenu>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center">
<component :is="iconMap.reload" class="cursor-pointer" />
{{ $t('general.reload') }}
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
class="text-gray-700"
@click="!isNew ? onDuplicateRow() : () => {}"
>
<div v-e="['c:row-expand:duplicate']" class="flex gap-2 items-center">
<component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" />
Duplicate record
</div>
</NcMenuItem>
<NcDivider />
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']"
class="!text-red-500"
@click="!isNew && onDeleteRowClick()"
>
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
Delete record
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<NcButton type="secondary" class="nc-expand-form-close-btn w-10" @click="onClose">
<GeneralIcon icon="close" class="text-md text-gray-700" />
</NcButton>
</div>
</template>
<template v-else>
<div class="flex flex-row w-full">
<NcButton v-if="props.showNextPrevIcons" type="secondary" class="nc-prev-arrow !w-10" @click="$emit('prev')">
<MdiChevronUp class="text-md text-gray-700" />
<GeneralIcon icon="arrowLeft" class="text-lg text-gray-700" />
</NcButton>
<div class="flex flex-grow justify-center items-center font-semibold text-lg">
<div>{{ meta.title }}</div>
</div>
<NcButton v-if="!props.lastRow" type="secondary" class="nc-next-arrow !w-10" @click="onNext">
<MdiChevronDown class="text-md text-gray-700" />
<GeneralIcon icon="arrowRight" class="text-lg text-gray-700" />
</NcButton>
</div>
<div v-if="displayValue" class="flex items-center truncate max-w-32 font-bold text-gray-800 text-xl">
{{ displayValue }}
</div>
<div class="bg-gray-100 px-2 gap-1 flex my-1 items-center rounded-lg text-gray-800 font-medium">
<TableIcon class="w-6 h-6 text-sm" />
All {{ meta.title }}
</div>
</div>
<div class="flex gap-2">
<NcDropdown v-if="!isNew">
<NcButton type="secondary" class="nc-expand-form-more-actions w-10">
<GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" />
</NcButton>
<template #overlay>
<NcMenu>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center">
<component :is="iconMap.reload" class="cursor-pointer" />
{{ $t('general.reload') }}
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
class="text-gray-700"
@click="!isNew ? onDuplicateRow() : () => {}"
>
<div v-e="['c:row-expand:duplicate']" class="flex gap-2 items-center">
<component :is="iconMap.copy" class="cursor-pointer nc-duplicate-row" />
Duplicate record
</div>
</NcMenuItem>
<a-menu-divider class="my-1" />
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']"
class="!text-red-500"
@click="!isNew && onDeleteRowClick()"
>
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
Delete record
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<NcButton type="secondary" class="nc-expand-form-close-btn w-10" @click="onClose">
<GeneralIcon icon="close" class="text-md text-gray-700" />
</NcButton>
</div>
</template>
</div>
<div class="flex flex-row h-[calc(100%-6rem)] w-full h-full gap-4">
<div class="flex w-full h-full flex-col border-1 rounded-xl overflow-hidden border-gray-200">
<div class="flex w-full h-full flex-col border-1 rounded-xl overflow-hidden border-gray-200 xs:(border-0 rounded-none)">
<div
class="flex flex-grow-1 mt-2 h-[calc(100%-3.5rem)] nc-scrollbar-md flex-col !pb-12 items-center w-full bg-white p-4"
class="flex flex-grow-1 mt-2 h-[calc(100%-3.5rem)] nc-scrollbar-md flex-col !pb-12 items-center w-full bg-white p-4 xs:p-0"
>
<div
v-for="(col, i) of fields"
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
:key="col.title"
class="mt-2 py-2"
class="mt-2 py-2 xs:w-full"
:class="`nc-expand-col-${col.title}`"
:data-testid="`nc-expand-col-${col.title}`"
>
<div class="flex items-start flex-row">
<div class="w-[12rem] mt-1.5">
<div class="flex items-start flex-row xs:(flex-col w-full) nc-expanded-cell">
<div class="w-[12rem] xs:(w-full) mt-1.5">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" class="nc-expanded-cell-header" :column="col" />
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
@ -432,7 +449,7 @@ export default {
<LazySmartsheetDivDataCell
v-if="col.title"
:ref="i ? null : (el: any) => (cellWrapperEl = el)"
class="!bg-white rounded-lg !w-[20rem] border-1 border-gray-200 px-1 min-h-[35px] flex items-center relative"
class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 px-1 min-h-[35px] flex items-center relative"
>
<LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
@ -496,14 +513,53 @@ export default {
</div>
<div
v-if="isUIAllowed('dataEdit')"
class="w-full h-14 border-t-1 border-gray-200 bottom-0 z-10 bg-white flex items-center justify-end p-2"
class="w-full h-14 border-t-1 border-gray-200 bg-white flex items-center justify-end p-2 xs:(p-0 mt-4 border-t-0 gap-x-4 justify-between)"
>
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn" @click="save"> Save </NcButton>
<NcDropdown v-if="!isNew && isMobileMode">
<NcButton type="secondary" class="nc-expand-form-more-actions w-10">
<GeneralIcon icon="threeDotVertical" class="text-md text-gray-700" />
</NcButton>
<template #overlay>
<NcMenu>
<NcMenuItem v-if="!isNew" class="text-gray-700" @click="_loadRow()">
<div v-e="['c:row-expand:reload']" class="flex gap-2 items-center">
<component :is="iconMap.reload" class="cursor-pointer" />
{{ $t('general.reload') }}
</div>
</NcMenuItem>
<NcDivider />
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']"
class="!text-red-500"
@click="!isNew && onDeleteRowClick()"
>
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
Delete record
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<div class="flex flex-row gap-x-3">
<NcButton
v-if="isMobileMode"
type="secondary"
size="medium"
class="nc-expand-form-save-btn !xs:(text-base)"
@click="onClose"
>
<div class="px-1">Close</div>
</NcButton>
<NcButton type="primary" size="medium" class="nc-expand-form-save-btn !xs:(text-base)" @click="save">
<div class="xs:px-1">Save</div>
</NcButton>
</div>
</div>
</div>
<div
v-if="!isNew && commentsDrawer && isUIAllowed('commentList')"
class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full"
class="nc-comments-drawer border-1 relative border-gray-200 w-[380px] bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden"
:class="{ active: commentsDrawer && isUIAllowed('commentList') }"
>
<LazySmartsheetExpandedFormComments />
@ -512,21 +568,36 @@ export default {
</div>
</NcModal>
<GeneralModal v-model:visible="showDeleteRowModal" class="!w-[25rem]">
<div class="p-4">
<NcModal v-model:visible="showDeleteRowModal" class="!w-[25rem] !xs-">
<div class="">
<div class="prose-xl font-bold self-center">Delete row ?</div>
<div class="mt-4">Are you sure you want to delete this row?</div>
</div>
<div class="flex flex-row gap-x-2 mt-1 pt-1.5 justify-end p-4">
<div class="flex flex-row gap-x-2 mt-4 pt-1.5 justify-end pt-4 gap-x-3">
<NcButton v-if="isMobileMode" type="secondary" @click="showDeleteRowModal = false">{{ $t('general.cancel') }} </NcButton>
<NcButton @click="onConfirmDeleteRowClick">{{ $t('general.confirm') }} </NcButton>
</div>
</GeneralModal>
</NcModal>
</template>
<style lang="scss">
.nc-drawer-expanded-form {
@apply xs:my-0;
}
.nc-expanded-cell {
input {
@apply xs:(h-12 text-base);
}
}
.nc-expanded-cell-header {
@apply w-full text-gray-700 xs:mb-2;
}
.nc-expanded-cell-header > :nth-child(2) {
@apply !text-sm;
@apply !text-sm !xs:text-base;
}
.nc-expanded-cell-header > :first-child {
@apply !text-xl;

Loading…
Cancel
Save