fix: minor interaction correction

packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@@ -391,10 +391,7 @@ const calculateNewRow = (event: MouseEvent) => {
   if (dragElement.value) {
     formattedData.value = formattedData.value.map((r) => {
       const pk = extractPkFromRow(r.row, meta.value!.columns!)
-      if (pk === newPk) {
-        return newRow
-      }
-      return r
+      return pk === newPk ? newRow : r
     })
   } else {
     // If the old row is not found, we add the new row to the formattedData array and remove the old row from the formattedSideBarData array
@@ -564,7 +561,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
     dragRecord.value = record
 
     dragElement.value = target
-    dragRecord.value = record
 
     document.addEventListener('mousemove', onDrag)
     document.addEventListener('mouseup', stopDrag)
@@ -749,7 +745,8 @@ const viewMore = (hour: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
-              :hover="hoverRecord === record.rowMeta.id"
+              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+              :selected="record.rowMeta.id === dragRecord?.rowMeta?.id"
               :position="record.rowMeta!.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"

packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@@ -112,7 +112,7 @@ const recordsToDisplay = computed<{
   const perHeight = gridContainerHeight.value / dates.value.length
   const perRecordHeight = 40
 
-  const spaceBetweenRecords = 35
+  const spaceBetweenRecords = 30
 
   // This object is used to keep track of the number of records in a day
   // The key is the date in the format YYYY-MM-DD
@@ -528,6 +528,7 @@ const stopDrag = (event: MouseEvent) => {
     dragElement.value = null
   }
 
+  dragRecord.value = undefined
   updateRowProperty(newRow, updateProperty, false)
   focusedDate.value = null
 
@@ -550,12 +551,10 @@ const dragStart = (event: MouseEvent, record: Row) => {
     const allRecords = document.querySelectorAll('.draggable-record')
     allRecords.forEach((el) => {
       if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) {
-        // el.style.visibility = 'hidden'
         el.style.opacity = '30%'
       }
     })
 
-    dragRecord.value = record
     // selectedDate.value = null
 
     isDragging.value = true
@@ -672,7 +671,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
                   '!block': isDateSelected(day),
                   '!hidden': !isDateSelected(day),
                 }"
-                class="!group-hover:block"
+                class="!group-hover:block rounded"
                 size="small"
                 type="secondary"
               >
@@ -709,8 +708,8 @@ const isDateSelected = (date: dayjs.Dayjs) => {
                 '!block': isDateSelected(day),
                 '!hidden': !isDateSelected(day),
               }"
-              class="!group-hover:block"
-              size="small"
+              class="!group-hover:block !w-6 !h-6 !rounded"
+              size="xsmall"
               type="secondary"
               @click="
                 () => {
@@ -723,13 +722,13 @@ const isDateSelected = (date: dayjs.Dayjs) => {
                 }
               "
             >
-              <component :is="iconMap.plus" class="h-4 w-4" />
+              <component :is="iconMap.plus" />
             </NcButton>
             <span
               :class="{
                 'bg-brand-50 text-brand-500': day.isSame(dayjs(), 'date'),
               }"
-              class="px-1.5 rounded-lg py-1 my-1"
+              class="px-1.3 py-1 text-xs rounded-lg"
             >
               {{ day.format('DD') }}
             </span>
@@ -761,10 +760,6 @@ const isDateSelected = (date: dayjs.Dayjs) => {
         :style="{
           ...record.rowMeta.style,
           zIndex: record.rowMeta.id === draggingId ? 100 : 0,
-          boxShadow:
-            record.rowMeta.id === draggingId
-              ? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
-              : 'none',
         }"
         class="absolute group draggable-record cursor-pointer pointer-events-auto"
         @mouseleave="hoverRecord = null"
@@ -773,17 +768,11 @@ const isDateSelected = (date: dayjs.Dayjs) => {
       >
         <LazySmartsheetRow :row="record">
           <LazySmartsheetCalendarRecordCard
-            :hover="hoverRecord === record.rowMeta.id"
+            :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === draggingId"
             :position="record.rowMeta.position"
             :record="record"
             :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-            :selected="
-              dragRecord
-                ? dragRecord.rowMeta.id === record.rowMeta.id
-                : resizeRecord
-                ? resizeRecord.rowMeta.id === record.rowMeta.id
-                : false
-            "
+            :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
             @resize-start="onResizeStart"
             @dblclick.stop="emit('expandRecord', record)"
           >

packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@@ -28,9 +28,9 @@ const emit = defineEmits(['resize-start'])
     :class="{
       'min-h-9': size === 'small',
       'h-full': size === 'auto',
-      'rounded-l-lg': position === 'leftRounded',
-      'rounded-r-lg': position === 'rightRounded',
-      'rounded-lg mx-1': position === 'rounded',
+      'rounded-l-md': position === 'leftRounded',
+      'rounded-r-md': position === 'rightRounded',
+      'rounded-md mx-1': position === 'rounded',
       'rounded-none': position === 'none',
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
@@ -39,7 +39,8 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'group-hover:(border-brand-500 border-1)': resize,
-      '!border-brand-500 border-1': selected || hover,
+      '!border-brand-500 border-1': selected,
+      'shadow-md': hover,
     }"
     class="relative transition-all flex items-center px-1 group border-1 border-transparent"
   >

packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@@ -26,7 +26,7 @@ const emit = defineEmits(['resize-start'])
   >
     <NcButton
       :class="{
-        '!flex rounded-lg border-brand-500': selected || hover,
+        '!flex rounded-md border-brand-500': selected || hover,
       }"
       class="!group-hover:(border-brand-500) !border-1 text-gray-400 cursor-ns-resize"
       size="xsmall"
@@ -38,9 +38,9 @@ const emit = defineEmits(['resize-start'])
   </div>
   <div
     :class="{
-      'rounded-t-lg': position === 'topRounded',
-      'rounded-b-lg': position === 'bottomRounded',
-      'rounded-lg': position === 'rounded',
+      'rounded-t-md': position === 'topRounded',
+      'rounded-b-md': position === 'bottomRounded',
+      'rounded-md': position === 'rounded',
       'rounded-none': position === 'none',
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
@@ -49,7 +49,8 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'group-hover:(border-brand-500)': resize,
-      '!border-brand-500 border-1': selected || hover,
+      '!border-brand-500 border-1': selected,
+      'shadow-md': hover,
     }"
     class="relative flex items-center h-full ml-0.25 border-1 border-transparent"
   >

packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@@ -418,7 +418,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
 const onDrag = (event: MouseEvent) => {
   if (!isUIAllowed('dataEdit')) return
   if (!container.value || !dragRecord.value) return
-  calculateNewRow(event)
+  calculateNewRow(event, false)
 }
 
 const stopDrag = (event: MouseEvent) => {
@@ -443,6 +443,7 @@ const stopDrag = (event: MouseEvent) => {
     dragElement.value.style.boxShadow = 'none'
     dragElement.value = null
   }
+  dragRecord.value = undefined
 
   updateRowProperty(newRow, updateProperty, false)
 
@@ -470,8 +471,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
       }
     })
 
-    dragRecord.value = record
-
     isDragging.value = true
     dragElement.value = target
     dragRecord.value = record
@@ -512,10 +511,13 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
-
-    dragRecord.value = null
   }
 }
+
+const selectDate = (day: dayjs.Dayjs) => {
+  selectedDate.value = day
+  dragRecord.value = undefined
+}
 </script>
 
 <template>
@@ -541,7 +543,7 @@ const dropEvent = (event: DragEvent) => {
         }"
         class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
         data-testid="nc-calendar-week-day"
-        @click="selectedDate = dayjs(date)"
+        @click="selectDate(date)"
       ></div>
     </div>
     <div
@@ -555,31 +557,21 @@ const dropEvent = (event: DragEvent) => {
         :data-unique-id="record.rowMeta.id"
         :style="{
           ...record.rowMeta.style,
-          boxShadow:
-            record.rowMeta.id === dragElement?.getAttribute('data-unique-id')
-              ? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
-              : 'none',
         }"
         class="absolute group draggable-record pointer-events-auto nc-calendar-week-record-card"
-        @mousedown="dragStart($event, record)"
+        @mousedown.stop="dragStart($event, record)"
         @mouseleave="hoverRecord = null"
         @mouseover="hoverRecord = record.rowMeta.id"
       >
         <LazySmartsheetRow :row="record">
           <LazySmartsheetCalendarRecordCard
-            :hover="hoverRecord === record.rowMeta.id"
+            :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
             :position="record.rowMeta.position"
             :record="record"
-            :selected="
-              dragRecord
-                ? dragRecord.rowMeta.id === record.rowMeta.id
-                : resizeRecord
-                ? resizeRecord.rowMeta.id === record.rowMeta.id
-                : false
-            "
+            :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta.id === record.rowMeta.id"
             :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
             color="blue"
-            @dblclick="emits('expand-record', record)"
+            @dblclick.stop="emits('expand-record', record)"
             @resize-start="onResizeStart"
           >
             <template v-if="!isRowEmpty(record, displayField)">

packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@@ -394,8 +394,6 @@ const recordsAcrossAllRange = computed<{
   }
 })
 
-const dragElement = ref<HTMLElement | null>(null)
-
 const resizeInProgress = ref(false)
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
@@ -520,7 +518,6 @@ const calculateNewRow = (
   newRow: Row | null
   updatedProperty: string[]
 } => {
-  if (!isUIAllowed('dataEdit') || !container.value || !dragRecord.value) return { newRow: null, updatedProperty: [] }
   const { width, left, top } = container.value.getBoundingClientRect()
 
   const { scrollHeight } = container.value
@@ -620,11 +617,6 @@ const stopDrag = (event: MouseEvent) => {
     el.style.opacity = '100%'
   })
 
-  if (dragElement.value) {
-    dragElement.value.style.boxShadow = 'none'
-    dragElement.value = null
-  }
-
   if (newRow) {
     updateRowProperty(newRow, updatedProperty, false)
   }
@@ -654,10 +646,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       }
     })
 
-    dragRecord.value = record
-
     isDragging.value = true
-    dragElement.value = target
     dragRecord.value = record
 
     document.addEventListener('mousemove', onDrag)
@@ -776,6 +765,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
             () => {
               selectedTime = hour
               selectedDate = hour
+              dragRecord = undefined
             }
           "
         >
@@ -806,18 +796,19 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
           :data-unique-id="record.rowMeta!.id"
           :style="record.rowMeta!.style "
           class="absolute draggable-record w-1/7 group cursor-pointer pointer-events-auto"
-          @mousedown="dragStart($event, record)"
+          @mousedown.stop="dragStart($event, record)"
           @mouseleave="hoverRecord = null"
           @mouseover="hoverRecord = record.rowMeta.id"
           @dragover.prevent
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
-              :hover="hoverRecord === record.rowMeta.id"
+              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
               :position="record.rowMeta!.position"
-              :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
+              :record="record"
               color="blue"
+              :selected="record.rowMeta!.id === dragRecord?.rowMeta?.id"
               @resize-start="onResizeStart"
             >
               <template v-if="!isRowEmpty(record, displayField)">

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -247,7 +247,7 @@ const headerText = computed(() => {
             type="secondary"
             @click="goToToday"
           >
-            <span class="text-gray-700">
+            <span class="text-gray-600 !text-sm">
               {{ $t('activity.goToToday') }}
             </span>
           </NcButton>