From 3a644ae69e0d4a097bc5387824e8e3f11b35dd11 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:08:44 +0530
Subject: [PATCH] Nc fix/UI bug fixes (#8858)

* fix(nc-gui): add hover effect if user came from comment url

* fix(nc-gui): show rounded precision decimal value
---
 packages/nc-gui/components/cell/Decimal.vue   | 11 ++++--
 .../smartsheet/expanded-form/Comments.vue     | 36 ++++++++++++++++---
 .../smartsheet/expanded-form/RichComment.vue  |  2 +-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 92930c82fb..0263273dbd 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -35,14 +35,21 @@ const meta = computed(() => {
 
 const _vModel = useVModel(props, 'modelValue', emits)
 
+function roundUpToPrecision(value: number, precision = 1) {
+  const factor = Math.pow(10, precision)
+  const roundedValue = Math.round(value * factor) / factor
+
+  return roundedValue.toFixed(precision)
+}
+
 const displayValue = computed(() => {
   if (_vModel.value === null) return null
 
   if (isNaN(Number(_vModel.value))) return null
 
-  if (meta.value.isLocaleString) return (+Number(_vModel.value).toFixed(meta.value.precision ?? 1)).toLocaleString()
+  if (meta.value.isLocaleString) return roundUpToPrecision(Number(_vModel.value), meta.value.precision ?? 1).toLocaleString()
 
-  return Number(_vModel.value).toFixed(meta.value.precision ?? 1)
+  return roundUpToPrecision(Number(_vModel.value), meta.value.precision ?? 1)
 })
 
 const vModel = computed({
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index aca4c7b6f2..9a8570e40d 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -57,6 +57,8 @@ const isEditing = ref<boolean>(false)
 
 const isCommentMode = ref(false)
 
+const hoveredCommentId = ref<null | string>(null)
+
 async function onEditComment() {
   if (!isEditing.value || !editCommentValue.value?.comment) return
 
@@ -196,6 +198,10 @@ watch(commentsWrapperEl, () => {
           },
         })
         scrollToComment(commentId as string)
+
+        hoveredCommentId.value = commentId as string
+
+        onClickOutside(document.querySelector(`.${hoveredCommentId.value}`)! as HTMLDivElement, handleResetHoverEffect)
       } else {
         scrollComments()
       }
@@ -233,6 +239,12 @@ const editedAt = (comment: CommentType) => {
   }
   return ''
 }
+
+function handleResetHoverEffect() {
+  if (!hoveredCommentId.value) return
+
+  hoveredCommentId.value = null
+}
 </script>
 
 <template>
@@ -267,12 +279,19 @@ const editedAt = (comment: CommentType) => {
               https://stackoverflow.com/questions/36130760/use-justify-content-flex-end-and-to-have-vertical-scrollbar
               -->
               <div class="scroll-fix"></div>
-              <div v-for="comment of comments" :key="comment.id" :class="`${comment.id}`" class="nc-comment-item">
+              <div
+                v-for="comment of comments"
+                :key="comment.id"
+                :class="`${comment.id}`"
+                class="nc-comment-item"
+                @mouseover="handleResetHoverEffect"
+              >
                 <div
                   :class="{
-                  'hover:bg-gray-100': editCommentValue?.id !== comment!.id
+                  'hover:bg-gray-100': editCommentValue?.id !== comment!.id,
+                  'nc-hovered-comment bg-gray-100': hoveredCommentId === comment!.id
                 }"
-                  class="group gap-3 overflow-hidden px-3 py-2"
+                  class="group gap-3 overflow-hidden px-3 py-2 transition-colors"
                 >
                   <div class="flex items-start justify-between">
                     <div class="flex items-start gap-3">
@@ -322,7 +341,7 @@ const editedAt = (comment: CommentType) => {
                     <div class="flex items-center">
                       <NcDropdown
                         v-if="!editCommentValue"
-                        class="!hidden !group-hover:block"
+                        class="nc-comment-more-actions !hidden !group-hover:block"
                         overlay-class-name="!min-w-[160px]"
                         placement="bottomRight"
                       >
@@ -375,7 +394,7 @@ const editedAt = (comment: CommentType) => {
                       <div v-if="appInfo.ee">
                         <NcTooltip v-if="!comment.resolved_by">
                           <NcButton
-                            class="!w-7 !h-7 !bg-transparent !hover:bg-gray-200 !hidden !group-hover:block"
+                            class="nc-resolve-comment-btn !w-7 !h-7 !bg-transparent !hover:bg-gray-200 !hidden !group-hover:block"
                             size="xsmall"
                             type="text"
                             @click="resolveComment(comment.id!)"
@@ -595,4 +614,11 @@ const editedAt = (comment: CommentType) => {
 :deep(.expanded-form-comment-edit-input .nc-comment-rich-editor) {
   @apply bg-white;
 }
+
+.nc-hovered-comment {
+  .nc-expand-form-more-actions,
+  .nc-resolve-comment-btn {
+    @apply !block;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
index f5e4389bc8..7a91ea7831 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/RichComment.vue
@@ -97,7 +97,7 @@ const editor = useEditor({
     const targetEl = e?.event.relatedTarget as HTMLElement
 
     if (
-      !targetEl.closest(
+      !targetEl?.closest(
         '.comment-bubble-menu, .nc-rich-text-comment, .tippy-box, .nc-comment-save-btn, .rich-text-bottom-bar, .mention, .nc-mention-list, .tippy-content, .nc-comment-rich-editor',
       )
     ) {