From b8ae47f7ae16a1039a595361ebe51645f979f6b2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 23:48:00 +0530
Subject: [PATCH] feat(gui-v2): row number cell correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 52 ++++++++++---------
 .../components/smartsheet/Pagination.vue      |  6 ++-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 9391040ecf..57be5f45dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -300,7 +300,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -346,33 +346,30 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
-                  <td key="row-index" class="caption nc-grid-cell">
-                    <div class="align-center flex w-[80px]">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="align-center flex min-w-[80px]">
                       <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
-                        <span class="flex-1" />
-                        <div class="nc-expand">
-                          <span
-                            v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs"
-                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                      </div>
+                      <span class="flex-1" />
+                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                        <span
+                          v-if="row.rowMeta?.commentCount"
+                          class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
+                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                          @click="expandForm(row, state)"
+                        >
+                          {{ row.rowMeta.commentCount }}
+                        </span>
+                        <div v-else class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
                             @click="expandForm(row, state)"
-                          >
-                            {{ row.rowMeta.commentCount }}
-                          </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"
-                          >
-                            <MdiArrowExpand
-                              class="select-none transform hover:(text-pink-500 scale-120)"
-                              @click="expandForm(row, state)"
-                            />
-                          </div>
+                          />
                         </div>
                       </div>
                     </div>
@@ -482,7 +479,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     position: relative;
   }
 
-  td > div {
+  td:not(:first-child) > div {
     overflow: hidden;
     @apply flex align-center h-auto px-1;
   }
@@ -532,10 +529,15 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-row {
   .nc-row-expand-and-checkbox {
-    @apply w-full items-center justify-between p-1;
+    @apply w-full items-center justify-between;
   }
   .nc-expand {
-    @apply hidden;
+    &:not(.nc-comment) {
+      @apply hidden;
+    }
+    &.nc-comment {
+      display: flex;
+    }
   }
 
   &:hover {
@@ -555,7 +557,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-header {
   position: sticky;
-  top:-1px;
+  top: -1px;
 
   @apply z-1;
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 4dc0540034..3c711d0e15 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -19,7 +19,9 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+      {{ count }} record{{ count !== 1 ? 's' : '' }}
+    </span>
 
     <div class="flex-1" />
 
@@ -55,7 +57,7 @@ const page = computed({
   line-height: 21px !important;
   @apply text-sm text-gray-500;
 }
-:deep(.ant-pagination-item-link){
+:deep(.ant-pagination-item-link) {
   @apply text-gray-500;
 }
 </style>