From 07f525b9003c5e5dd433cfdf88cc870c449d50f1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 29 Sep 2022 18:29:21 +0800
Subject: [PATCH] fix(nc-gui): cell styles

---
 packages/nc-gui/components/cell/Checkbox.vue       |  4 ++--
 packages/nc-gui/components/cell/Currency.vue       |  2 +-
 packages/nc-gui/components/cell/DatePicker.vue     |  2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue |  2 +-
 packages/nc-gui/components/cell/Decimal.vue        |  2 +-
 packages/nc-gui/components/cell/Duration.vue       | 10 +++-------
 packages/nc-gui/components/cell/Email.vue          |  2 +-
 packages/nc-gui/components/cell/MultiSelect.vue    |  1 +
 packages/nc-gui/components/cell/Percent.vue        |  9 +++++++--
 packages/nc-gui/components/cell/Rating.vue         |  8 +++++++-
 packages/nc-gui/components/cell/SingleSelect.vue   |  3 ++-
 packages/nc-gui/components/cell/Text.vue           |  1 +
 packages/nc-gui/components/cell/TextArea.vue       |  3 ++-
 packages/nc-gui/components/cell/TimePicker.vue     |  2 +-
 packages/nc-gui/components/cell/Url.vue            |  8 +++++++-
 packages/nc-gui/components/cell/YearPicker.vue     |  2 +-
 packages/nc-gui/components/smartsheet/Kanban.vue   |  5 ++---
 17 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index d0240a1a7a..2496368a70 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -48,14 +48,14 @@ function onClick() {
   <div
     class="flex"
     :class="{
-      'justify-center': !isForm,
+      'justify-center': !isForm && !readOnly,
       'w-full': isForm,
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"
     @click="onClick"
   >
-    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
       <component
         :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index c81740e7a2..ee2966c27f 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -45,7 +45,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="w-full h-full border-none outline-none"
+    class="w-full h-full border-none outline-none px-2"
     @blur="editEnabled = false"
   />
 
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 16ac154736..644dab08c0 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -62,7 +62,7 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
   <a-date-picker
     v-model:value="localState"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly"
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 65aa943174..fb192cfc8c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -62,7 +62,7 @@ watch(
     v-model:value="localState"
     :show-time="true"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     format="YYYY-MM-DD HH:mm"
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly"
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index c529599b72..9ba13183c1 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -26,7 +26,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none p-0 border-none w-full h-full text-sm"
+    class="outline-none px-2 border-none w-full h-full text-sm"
     type="number"
     step="0.1"
     @blur="editEnabled = false"
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 4d5846cc9d..50f8665a0d 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -75,6 +75,8 @@ const submitDuration = () => {
       v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
+      class="w-full !border-none p-0"
+      :class="{ '!p-2': editEnabled }"
       :placeholder="durationPlaceholder"
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
@@ -91,14 +93,8 @@ const submitDuration = () => {
 </template>
 
 <style scoped>
-.duration-cell-wrapper {
-  padding: 10px;
-}
-
 .duration-warning {
-  text-align: left;
-  margin-top: 10px;
-  color: #e65100;
+  @apply text-left mt-[10px] text-[#e65100];
 }
 </style>
 
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index cd4a2ad50a..2ab60c42f6 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -24,7 +24,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false" />
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 8b5eaef650..09f3efd4d2 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -137,6 +137,7 @@ watch(isOpen, (n, _o) => {
     :show-search="false"
     :open="isOpen"
     :disabled="readOnly"
+    :class="{ '!ml-[-8px]': readOnly }"
     dropdown-class-name="nc-dropdown-multi-select-cell"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index e02ea8dc85..d9fe77c127 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -15,7 +15,12 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <input v-if="editEnabled" v-model="vModel" type="number" />
-
+  <input
+    v-if="editEnabled"
+    v-model="vModel"
+    class="w-full !border-none text-base"
+    :class="{ '!p-2': editEnabled }"
+    type="number"
+  />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 81d5d6f5d9..bd9c923d38 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -32,7 +32,13 @@ const vModel = computed({
 </script>
 
 <template>
-  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}`" :disabled="!editEnabled">
+  <a-rate
+    v-model:value="vModel"
+    :count="ratingMeta.max"
+    :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
+    :class="{ '!ml-[-8px]': !editEnabled }"
+    :disabled="!editEnabled"
+  >
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4cd20ec087..5d492bd3b1 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -69,12 +69,13 @@ watch(isOpen, (n, _o) => {
   <a-select
     ref="aselect"
     v-model:value="vModel"
-    class="w-full"
+    class="w-full 2"
     :allow-clear="!column.rqd && active"
     :bordered="false"
     :open="isOpen"
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || vModel === null)"
+    :class="{ '!ml-[-12px]': readOnly }"
     dropdown-class-name="nc-dropdown-single-select-cell"
     @select="isOpen = false"
     @keydown="handleKeys"
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 2939042a11..d950e04d59 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -23,6 +23,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     :ref="focus"
     v-model="vModel"
     class="h-full w-full outline-none bg-transparent"
+    :class="{ '!p-2': editEnabled }"
     @blur="editEnabled = false"
   />
 
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 1dd4b864b8..db3b054bcf 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -21,7 +21,8 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     :ref="focus"
     v-model="vModel"
     rows="4"
-    class="h-full w-full min-h-[60px] outline-none"
+    class="h-full w-full min-h-[60px] outline-none border-none"
+    :class="{ 'p-2': editEnabled }"
     @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index e2fef85742..ea39b148f8 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -74,7 +74,7 @@ watch(
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index f3fa740b17..36325832d9 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -73,7 +73,13 @@ watch(
 
 <template>
   <div class="flex flex-row items-center justify-between">
-    <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
+    <input
+      v-if="editEnabled"
+      :ref="focus"
+      v-model="vModel"
+      class="outline-none text-sm w-full px-2"
+      @blur="editEnabled = false"
+    />
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index b7b435d651..284abb6be7 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -61,7 +61,7 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
     v-model:value="localState"
     picker="year"
     :bordered="false"
-    class="!w-full px-1"
+    class="!w-full !px-0 !border-none"
     :placeholder="placeholder"
     :allow-clear="!readOnly"
     :input-read-only="true"
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index aaf7ad91c8..12132471d2 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Draggable from 'vuedraggable'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -380,8 +380,7 @@ watch(
                                 <!--  Smartsheet (Virtual) Cell -->
                                 <div
                                   v-if="!isRowEmpty(record, col)"
-                                  class="flex flex-row w-full items-center justify-start"
-                                  :class="{ 'pt- pl-2': col.uidt !== UITypes.SingleSelect }"
+                                  class="flex flex-row w-full items-center justify-start pl-[6px]"
                                 >
                                   <LazySmartsheetVirtualCell
                                     v-if="isVirtualCol(col)"