From 39604a15db5d5e98e793ac1f1434f87bc6d1e2ed Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 27 Feb 2025 06:58:16 +0000
Subject: [PATCH] fix: styling and keyboard usage

---
 packages/nc-gui/components/cell/GeoData.vue   | 37 ++++++++++++++++---
 .../nc-gui/components/smartsheet/Cell.vue     |  2 +-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/GeoData.vue b/packages/nc-gui/components/cell/GeoData.vue
index 6d465a6e8f..436e8c585f 100644
--- a/packages/nc-gui/components/cell/GeoData.vue
+++ b/packages/nc-gui/components/cell/GeoData.vue
@@ -20,6 +20,10 @@ const vModel = useVModel(props, 'modelValue', emits)
 
 const activeCell = inject(ActiveCellInj, ref(false))
 
+const isPublic = inject(IsPublicInj, ref(false))
+
+const readonly = inject(ReadonlyInj, ref(false))
+
 const isExpanded = ref(false)
 
 const isLoading = ref(false)
@@ -167,19 +171,39 @@ watch(
     }
   },
 )
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && isExpanded.value) {
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    isExpanded.value = false
+  }
+
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    isExpanded.value = !isExpanded.value
+  }
+}
 </script>
 
 <template>
-  <div tabindex="0" @paste="handlePaste">
-    <NcDropdown v-model:visible="isExpanded">
+  <div tabindex="0" class="focus-visible:outline-none" @paste="handlePaste" @keydown="handleKeyDown">
+    <NcDropdown v-model:visible="isExpanded" class="w-[27.25rem]">
       <div
         v-if="!isLocationSet"
         :class="{
-          '!justify-start !ml-0': isForm,
+          '!justify-start !ml-0 ': isExpandedForm || isForm,
+          'mt-0.5': isForm && !isPublic,
+          '!-mt-0.25': isForm && isPublic,
         }"
         class="w-full flex justify-center max-w-64 mx-auto"
       >
-        <NcButton v-if="activeCell || isForm" size="xsmall" type="secondary" data-testid="nc-geo-data-set-location-button">
+        <NcButton
+          v-if="(activeCell && !readonly) || isForm"
+          size="xsmall"
+          type="secondary"
+          data-testid="nc-geo-data-set-location-button"
+        >
           <div class="flex items-center px-2 gap-2">
             <GeneralIcon class="text-gray-500 h-3.5 w-3.5" icon="ncMapPin" />
             <span class="text-tiny">
@@ -195,8 +219,9 @@ watch(
         tabindex="1"
         :class="{
           '!py-1': !isForm,
+          'pt-1': isForm && !isPublic,
         }"
-        class="nc-cell-field h-full pt-0.5 w-full flex items-center focus-visible:!outline-none focus:!outline-none"
+        class="nc-cell-field h-full w-full flex items-center focus-visible:!outline-none focus:!outline-none"
       >
         {{ latLongStr }}
       </div>
@@ -213,6 +238,7 @@ watch(
                   step="0.0000000001"
                   class="nc-input-shadow !w-50"
                   :min="-90"
+                  :disabled="readonly"
                   required
                   :max="90"
                   @blur="handleBlur"
@@ -232,6 +258,7 @@ watch(
                   step="0.0000000001"
                   required
                   :min="-180"
+                  :disabled="readonly"
                   :max="180"
                   @blur="handleBlur"
                   @keydown.stop
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index c64007943c..a2720724b2 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -314,7 +314,7 @@ const cellClassName = computed(() => {
       <LazyCellAI v-else-if="cellType === 'ai'" v-model="vModel" @save="emitSave" />
       <LazyCellTextArea v-else-if="cellType === 'textarea'" v-model="vModel" :virtual="props.virtual" />
 
-      <CellGeoData v-else-if="cellType === 'geoData'" v-model="vModel" v-model:local-edit-enabled="localEditEnabled" />
+      <CellGeoData v-else-if="cellType === 'geoData'" v-model="vModel" />
 
       <template v-else-if="cellType === 'checkbox'">
         <LazyCellCheckboxReadonly v-if="showReadonlyField" :model-value="vModel" />