Browse Source

refactor(gui): avoid next and prev intersection with expanded form content

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5116/head
Pranav C 2 years ago
parent
commit
e336422f09
  1. 6
      packages/nc-gui/assets/style.scss
  2. 35
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

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

@ -318,3 +318,9 @@ a {
white-space: pre; white-space: pre;
user-select: auto; user-select: auto;
} }
.nc-drawer-expanded-form .ant-drawer-content-wrapper {
transition: width 0.3s !important;
}

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

@ -163,7 +163,7 @@ export default {
<a-drawer <a-drawer
v-model:visible="isExpanded" v-model:visible="isExpanded"
:footer="null" :footer="null"
width="min(90vw,800px)" :width="commentsDrawer ? 'min(90vw,900px)' : 'min(90vw,700px)'"
:body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }" :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
:closable="false" :closable="false"
class="nc-drawer-expanded-form" class="nc-drawer-expanded-form"
@ -171,24 +171,23 @@ export default {
> >
<SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" /> <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" @duplicate-row="onDuplicateRow" />
<div class="!bg-gray-100 rounded flex-1 relative"> <div class="!bg-gray-100 rounded flex-1">
<template v-if="props.showNextPrevIcons">
<a-tooltip placement="bottom">
<template #title>
{{ $t('labels.nextRow') }}
</template>
<MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
{{ $t('labels.prevRow') }}
</template>
<MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
</a-tooltip>
</template>
<div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]"> <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
<div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container"> <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container relative">
<template v-if="props.showNextPrevIcons">
<a-tooltip placement="bottom">
<template #title>
{{ $t('labels.nextRow') }}
</template>
<MdiChevronRight class="cursor-pointer nc-next-arrow" @click="$emit('next')" />
</a-tooltip>
<a-tooltip placement="bottom">
<template #title>
{{ $t('labels.prevRow') }}
</template>
<MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
</a-tooltip>
</template>
<div class="w-[500px] mx-auto"> <div class="w-[500px] mx-auto">
<div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]"> <div v-if="duplicatingRowInProgress" class="flex items-center justify-center h-[100px]">
<a-spin size="large" /> <a-spin size="large" />

Loading…
Cancel
Save