From 8072c40c061a0c298bc9f8789c1da88e19f7a71e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 20 Nov 2022 17:07:07 +0530
Subject: [PATCH] feat(gui): focus first input in expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss                   | 10 +++-------
 packages/nc-gui/components/cell/Text.vue            |  4 +++-
 packages/nc-gui/components/dlg/ViewCreate.vue       |  2 +-
 packages/nc-gui/components/smartsheet/Grid.vue      | 13 +++++++------
 .../components/smartsheet/expanded-form/index.vue   | 10 ++++++++--
 .../components/smartsheet/toolbar/ShareView.vue     |  9 +++------
 packages/nc-gui/pages/index/index/index.vue         |  6 +-----
 7 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7e3d0f5cd5..4e77210c00 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,17 +214,13 @@ a {
   @apply z-1 relative color-transition rounded-md px-4 py-2 text-white;
 
   &::after {
-    @apply ring-opacity-100 ring-[2px] ring-slate-300 rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
+    @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary bg-opacity-100;
     content: '';
     z-index: -1;
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
-  }
-
-  &:active::after {
-    @apply ring ring-accent;
+    @apply transform scale-110 ;
   }
 }
 
@@ -261,7 +257,7 @@ a {
 }
 
 .ant-dropdown-menu-item, .ant-menu-item {
-  @apply !py-0 active:(ring ring-accent ring-opacity-100);
+  @apply !py-0;
 }
 
 .ant-dropdown-menu-title-content,
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 465cfd73f9..05745ead2c 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -16,7 +16,9 @@ const readonly = inject(ReadonlyInj, ref(false))
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+const focus: VNodeRef = (el) => {
+  ;(el as HTMLInputElement)?.focus()
+}
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index eb599963e3..5043c5754c 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -184,7 +184,7 @@ async function onSubmit() {
 <template>
   <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
     <template #title>
-      {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="text-capitalize">{{ typeAlias }}</span>
+      {{ $t(`general.${selectedViewId ? 'duplicate' : 'create'}`) }} <span class="capitalize">{{ typeAlias }}</span>
       {{ $t('objects.view') }}
     </template>
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index fcaa154b32..5dd1569e1c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -850,8 +850,7 @@ watch(
     text-overflow: ellipsis;
   }
 
-  td.active::after,
-  td.active::before {
+  td.active::after {
     content: '';
     position: absolute;
     z-index: 3;
@@ -864,12 +863,14 @@ watch(
 
   // todo: replace with css variable
   td.active::after {
-    @apply border-2 border-solid border-primary;
+    @apply border-2 border-solid text-primary border-current bg-primary bg-opacity-5;
   }
 
-  td.active::before {
-    @apply bg-primary bg-opacity-5;
-  }
+  //td.active::before {
+  //  content: '';
+  //  z-index:4;
+  //  @apply absolute !w-[10px] !h-[10px] !right-[-5px] !bottom-[-5px] bg-primary;
+  //}
 }
 
 :deep {
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index bad7419b47..5a731b2994 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -121,6 +121,12 @@ if (isKanban.value) {
     }
   }
 }
+
+const cellWrapperEl = (wrapperEl: HTMLElement) => {
+  nextTick(() => {
+    ;(wrapperEl?.querySelector('input,select,textarea') as HTMLInputElement)?.focus()
+  })
+}
 </script>
 
 <script lang="ts">
@@ -146,7 +152,7 @@ export default {
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">
             <div
-              v-for="col of fields"
+              v-for="(col, i) of fields"
               v-show="!isVirtualCol(col) || !isNew || col.uidt === UITypes.LinkToAnotherRecord"
               :key="col.title"
               class="mt-2 py-2"
@@ -157,7 +163,7 @@ export default {
 
               <LazySmartsheetHeaderCell v-else :column="col" />
 
-              <div class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
+              <div :ref="i ? null : cellWrapperEl" class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2">
                 <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
 
                 <LazySmartsheetCell
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 0b1ad2103f..23fc12f141 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -5,12 +5,12 @@ import tinycolor from 'tinycolor2'
 import {
   computed,
   extractSdkResponseErrorMsg,
+  isRtlLang,
   message,
   projectThemeColors,
   ref,
   useCopy,
   useDashboard,
-  isRtlLang,
   useI18n,
   useNuxtApp,
   useProject,
@@ -196,7 +196,6 @@ watch(passwordProtected, (value) => {
 const { locale } = useI18n()
 
 const isRtl = computed(() => isRtlLang(locale.value as any))
-
 </script>
 
 <template>
@@ -234,8 +233,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
           <MdiOpenInNew class="text-sm text-gray-500 mt-2" />
         </a>
 
-        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer"
-                        @click="copyLink" />
+        <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <div class="px-1 mt-2 flex flex-col gap-3">
@@ -312,8 +310,7 @@ const isRtl = computed(() => isRtlLang(locale.value as any))
             "
           >
             <!-- Allow Download -->
-            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download"
-                        class="!text-sm">
+            <a-checkbox v-model:checked="allowCSVDownload" data-testid="nc-modal-share-view__with-csv-download" class="!text-sm">
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 005c1bc37e..a93ccf366c 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -316,11 +316,7 @@ const copyProjectMeta = async () => {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
-  }
-
-  &:active::after {
-    @apply ring ring-accent;
+    @apply transform scale-110;
   }
 }