From 3b2587bed39e7684e1d57799d4d13c693c15a921 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Tue, 26 Sep 2023 15:25:06 +0000
Subject: [PATCH] fix: Improved expanded form UI for mobile

---
 packages/nc-gui/assets/style.scss             |   8 +
 packages/nc-gui/components/nc/MenuItem.vue    |   2 +-
 packages/nc-gui/components/nc/Modal.vue       |  10 +
 .../smartsheet/expanded-form/index.vue        | 203 ++++++++++++------
 4 files changed, 156 insertions(+), 67 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 9274841607..c81d850d09 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/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;
diff --git a/packages/nc-gui/components/nc/MenuItem.vue b/packages/nc-gui/components/nc/MenuItem.vue
index c5fd6d888a..a63dd7f703 100644
--- a/packages/nc-gui/components/nc/MenuItem.vue
+++ b/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 {
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index f50143b6d9..7483b3812b 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/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'
   }
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index f472c2a5e4..cce7f0e42f 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/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;