fix: tab design changes

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

@@ -464,7 +464,7 @@ const dragElement = ref<HTMLElement | null>(null)
 
 const resizeDirection = ref<'right' | 'left' | null>()
 
-const resizeRecord = ref<Row | null>()
+const resizeRecord = ref<Row | null>(null)
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
@@ -680,19 +680,13 @@ const stopDrag = (event: MouseEvent) => {
   const { newRow, updateProperty } = calculateNewRow(event, true)
   if (!newRow && !updateProperty) return
 
-  const allRecords = document.querySelectorAll('.draggable-record')
-  allRecords.forEach((el) => {
-    el.style.visibility = ''
-    el.style.opacity = '100%'
-  })
-
   if (dragElement.value) {
     dragElement.value.style.boxShadow = 'none'
     dragElement.value = null
   }
 
   if (dragRecord.value) {
-    dragRecord.value = undefined
+    dragRecord.value = null
   }
 
   if (!newRow) return
@@ -719,17 +713,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
-    // When the user starts dragging a record, we reduce opacity of all other records
-    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
-
     dragElement.value = target
 
     document.addEventListener('mousemove', onDrag)
@@ -1050,7 +1034,14 @@ const expandRecord = (record: Row) => {
               v-if="record.rowMeta.style?.display !== 'none'"
               :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
               :data-unique-id="record.rowMeta.id"
-              :style="record.rowMeta.style"
+              :style="{
+                ...record.rowMeta.style,
+                opacity:
+                  (dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
+                  (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
+                    ? 1
+                    : 0.3,
+              }"
               class="absolute draggable-record transition group cursor-pointer pointer-events-auto"
               @mousedown="dragStart($event, record)"
               @mouseleave="hoverRecord = null"

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

@@ -553,11 +553,11 @@ const hoverRecord = ref<string | null>()
 
 const resizeDirection = ref<'right' | 'left' | null>()
 
-const resizeRecord = ref<Row | null>()
+const resizeRecord = ref<Row | null>(null)
 
 const isDragging = ref(false)
 
-const dragRecord = ref<Row>()
+const dragRecord = ref<Row | null>(null)
 
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
@@ -771,16 +771,12 @@ const stopDrag = (event: MouseEvent) => {
 
   const { newRow, updatedProperty } = calculateNewRow(event, false, true)
 
-  // We set the visibility and opacity of the records back to normal
-  const allRecords = document.querySelectorAll('.draggable-record')
-  allRecords.forEach((el) => {
-    el.style.visibility = ''
-    el.style.opacity = '100%'
-  })
-
   if (newRow) {
     updateRowProperty(newRow, updatedProperty, false)
   }
+
+  dragRecord.value = null
+
   $e('c:calendar:week:drag-record')
 
   document.removeEventListener('mousemove', onDrag)
@@ -802,14 +798,6 @@ const dragStart = (event: MouseEvent, record: Row) => {
       target = target.parentElement as HTMLElement
     }
 
-    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%'
-      }
-    })
-
     isDragging.value = true
     dragRecord.value = record
 
@@ -1016,7 +1004,7 @@ watch(
             () => {
               selectedDate = hour
               selectedTime = hour
-              dragRecord = undefined
+              dragRecord = null
             }
           "
         >
@@ -1043,7 +1031,14 @@ watch(
             v-if="record.rowMeta.style?.display !== 'none'"
             :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
             :data-unique-id="record.rowMeta!.id"
-            :style="record.rowMeta!.style "
+            :style="{
+              ...record.rowMeta.style,
+              opacity:
+                (dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) &&
+                (resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id)
+                  ? 1
+                  : 0.3,
+            }"
             :class="{
               'w-1/5': maxVisibleDays === 5,
               'w-1/7': maxVisibleDays === 7,

packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue

@@ -13,6 +13,7 @@ const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: M
   changeCalendarView(mode)
   const tabElement = event.target as HTMLElement
   highlightStyle.value.left = `${tabElement.offsetLeft}px`
+  highlightStyle.value.width = `${tabElement.offsetWidth}px`
 }
 
 const updateHighlightPosition = () => {
@@ -20,6 +21,7 @@ const updateHighlightPosition = () => {
     const activeTab = document.querySelector('.nc-calendar-mode-tab .tab.active') as HTMLElement
     if (activeTab) {
       highlightStyle.value.left = `${activeTab.offsetLeft}px`
+      highlightStyle.value.width = `${activeTab.offsetWidth}px`
     }
   })
 }
@@ -37,19 +39,21 @@ watch(activeCalendarView, () => {
 <template>
   <div
     v-if="isTab"
-    class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
+    class="px-1 pointer-events-auto relative mx-3 mt-1 mb-2.5 rounded-lg gap-x-0.5 relative nc-calendar-mode-tab"
     data-testid="nc-calendar-view-mode"
   >
-    <div :style="highlightStyle" class="highlight"></div>
+    <div class="flex flex-row">
-    <div
+      <div :style="highlightStyle" class="highlight h-0.5 rounded-t-md absolute transition-all -bottom-2.5 bg-brand-500"></div>
-      v-for="mode in ['day', 'week', 'month', 'year']"
+      <div
-      :key="mode"
+        v-for="mode in ['day', 'week', 'month', 'year']"
-      :class="{ active: activeCalendarView === mode }"
+        :key="mode"
-      :data-testid="`nc-calendar-view-mode-${mode}`"
+        :class="{ '!text-brand-500 !font-bold  bg-transparent active': activeCalendarView === mode }"
-      class="tab"
+        :data-testid="`nc-calendar-view-mode-${mode}`"
-      @click="setActiveCalendarMode(mode, $event)"
+        class="tab flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-600 hover:text-black cursor-pointer transition-all duration-300 select-none"
-    >
+        @click="setActiveCalendarMode(mode, $event)"
-      <div class="tab-title !text-xs nc-tab">{{ $t(`objects.${mode}`) }}</div>
+      >
+        <div class="min-w-0 pointer-events-none !text-[13px]]">{{ $t(`objects.${mode}`) }}</div>
+      </div>
     </div>
   </div>
 
@@ -79,11 +83,6 @@ watch(activeCalendarView, () => {
 </template>
 
 <style lang="scss" scoped>
-.highlight {
-  @apply absolute h-6.5 w-14 transition-all border-b-2 border-brand-500 duration-200;
-  z-index: 0;
-}
-
 .nc-calendar-mode-menu {
   :deep(.nc-menu-item-inner) {
     @apply !text-[13px];
@@ -95,26 +94,6 @@ watch(activeCalendarView, () => {
   }
 }
 
-.tab {
-  @apply flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
-}
-
-.tab .tab-title {
-  @apply min-w-0 mb-3  pointer-events-none;
-  word-break: keep-all;
-  white-space: 'nowrap';
-  display: 'inline';
-  line-height: 0.95;
-}
-
-.active {
-  @apply !text-brand-500 !font-bold  bg-transparent;
-}
-
-.nc-calendar-mode-tab {
-  @apply relative;
-}
-
 :deep(.ant-select-selector) {
   @apply !h-7;
 }