From 2fbdaef2ee332a53ccc917b491db3b4da5a743ef Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Fri, 29 Mar 2024 05:23:03 +0000 Subject: [PATCH 1/3] fix(nc-gui): reduce the height of hour blocks --- .../calendar/DayView/DateTimeField.vue | 23 +++++++--------- .../calendar/WeekView/DateTimeField.vue | 26 ++++--------------- 2 files changed, 14 insertions(+), 35 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue index 136cb9c60e..2a89b42318 100644 --- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue @@ -218,7 +218,7 @@ const recordsAcrossAllRange = computed<{ } } = {} - const perRecordHeight = 80 + const perRecordHeight = 60 /* const columnArray: Array> = [[]] const gridTimeMap = new Map() */ @@ -262,18 +262,18 @@ const recordsAcrossAllRange = computed<{ scheduleEnd, }) // The top of the record is calculated based on the start hour and minute - const topInPixels = (startDate.hour() + startDate.minute() / 60) * 80 + const topInPixels = startDate.hour() + startDate.minute() // A minimum height of 80px is set for each record // The height of the record is calculated based on the difference between the start and end date - const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight) + const heightInPixels = Math.max(endDate.diff(startDate, 'minute'), perRecordHeight) const startHour = startDate.hour() let _startDate = startDate.clone() const style: Partial = { height: `${heightInPixels}px`, - top: `${topInPixels + 5 + startHour * 2}px`, + top: `${topInPixels}px`, } // We loop through every 1 minutes between the start and end date and keep track of the number of records that overlap at a given time @@ -369,18 +369,13 @@ const recordsAcrossAllRange = computed<{ // The top of the record is calculated based on the start hour // Update such that it is also based on Minutes - const minutes = startDate.minute() + startDate.hour() * 60 - - const updatedTopInPixels = (minutes * 80) / 60 + const topInPixels = startDate.minute() + startDate.hour() * 60 // A minimum height of 80px is set for each record - const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight) - - const finalTopInPixels = updatedTopInPixels + startHour * 2 - + const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 60, perRecordHeight) style = { ...style, - top: `${finalTopInPixels + 2}px`, + top: `${topInPixels + 1}px`, height: `${heightInPixels - 2}px`, } @@ -861,12 +856,12 @@ const newRecord = (hour: dayjs.Dayjs) => { :class="{ '!border-brand-500': hour.isSame(selectedTime), }" - class="flex w-full min-h-20 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100" + class="flex w-full h-15 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100" data-testid="nc-calendar-day-hour" @click="selectHour(hour)" @dblclick="newRecord(hour)" > -
+
{{ dayjs(hour).format('H A') }}
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue index 94d9ce86a7..5b6eded261 100644 --- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue @@ -88,11 +88,8 @@ const recordsAcrossAllRange = computed<{ records: [], count: {}, } - - const { scrollHeight } = scrollContainer.value - const perWidth = containerWidth.value / 7 - const perHeight = scrollHeight / 24 + const perHeight = 60 const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') @@ -193,25 +190,12 @@ const recordsAcrossAllRange = computed<{ dayIndex = 6 } - const hourKey = ogStartDate.format('HH:mm') - - // We calculate the index of the hour in the day and set the top and height of the record - const hourIndex = Math.min( - Math.max( - datesHours.value[dayIndex]?.findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey), - 0, - ), - 23, - ) - const minutes = ogStartDate.minute() + ogStartDate.hour() * 60 - const topPx = (minutes * perHeight) / 60 - style = { ...style, - top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`, - height: `${perHeight - 4}px`, + top: `${minutes + 1}px`, + height: `${perHeight - 2}px`, } recordsToDisplay.push({ @@ -758,7 +742,7 @@ const addRecord = (date: dayjs.Dayjs) => {
{{ hour.format('h A') }}
@@ -772,7 +756,7 @@ const addRecord = (date: dayjs.Dayjs) => { 'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'), '!bg-gray-50': hour.get('day') === 0 || hour.get('day') === 6, }" - class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100" + class="text-center relative h-15 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100" data-testid="nc-calendar-week-hour" @dblclick="addRecord(hour)" @click=" From 533e775e69ddd3054a1c367c3fe3c53a6ac6fc56 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Fri, 29 Mar 2024 05:23:04 +0000 Subject: [PATCH 2/3] fix(nc-gui): auto scroll down to record in week and day view --- .../smartsheet/calendar/DayView/DateTimeField.vue | 11 +++++++++++ .../smartsheet/calendar/WeekView/DateTimeField.vue | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue index 2a89b42318..2c4c025d6c 100644 --- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue @@ -842,6 +842,17 @@ const newRecord = (hour: dayjs.Dayjs) => { } emit('newRecord', record) } + +watch( + () => recordsAcrossAllRange.value, + () => { + setTimeout(() => { + if (isDragging.value) return + document.querySelectorAll('.draggable-record').item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' }) + }, 100) + }, + { immediate: true }, +)