adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

only show calendar toolbar after load complete to avoid layout shift

Browse Source
This commit is contained in:
Gregor Vostrak
2026-03-11 18:09:50 +01:00
parent 19c789b78e
commit ef7569b63b
4 changed files with 216 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
e2e/calendar-settings.spec.ts
View File

@@ -497,10 +497,13 @@ test.describe('Visual Snapping', () => {
await page.getByRole('option', { name: '5 min', exact: true }).click();
await page.keyboard.press('Escape');
// Scroll so both the event (9:00) and target (14:00) are in viewport
await scrollCalendarToTime(page, '08:00:00');
const event = page.locator('.fc-event').first();
await expect(event).toBeVisible();
// Drag event
// Capture target coordinates after scroll is settled
const targetSlot = page.locator('.fc-timegrid-slot-lane[data-time="14:00:00"]').first();
const targetBox = await targetSlot.boundingBox();
expect(targetBox).not.toBeNull();

5
e2e/time.spec.ts
View File

@@ -1427,10 +1427,7 @@ test('test that bare integer in inline duration input with decimal format is int
});
});
test('test that bare integer in create modal is interpreted as minutes', async ({
page,
ctx,
}) => {
test('test that bare integer in create modal is interpreted as minutes', async ({ page, ctx }) => {
await updateOrganizationSettingViaApi(ctx, {
interval_format: 'hours-minutes',
number_format: 'comma-point',

35
resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
View File

@@ -440,6 +440,7 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
:currency="currency"
:can-create-project="canCreateProject" />
<template v-if="!loading">
<CalendarToolbar
:view-title="viewTitle"
:active-view="activeView"
@@ -483,7 +484,9 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
<FullCalendarDayHeader
:date="day"
:is-today="isToday(day)"
:total-seconds="dailyTotals[day.format('YYYY-MM-DD')] || 0" />
:total-seconds="
dailyTotals[day.format('YYYY-MM-DD')] || 0
" />
</div>
</div>
</div>
@@ -501,7 +504,8 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
:key="slot.time"
class="fc-timegrid-slot fc-timegrid-slot-label relative text-right border-t border-border pr-1.5 pt-2 box-border"
:class="{
'fc-timegrid-slot-minor border-t-transparent': !slot.isHour,
'fc-timegrid-slot-minor border-t-transparent':
!slot.isHour,
}"
:data-time="slot.time"
:style="{ height: SLOT_HEIGHT + 'px' }">
@@ -524,7 +528,8 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
:key="'lane-' + slot.time"
class="fc-timegrid-slot fc-timegrid-slot-lane border-t border-border box-border"
:class="{
'fc-timegrid-slot-minor border-dotted': !slot.isHour,
'fc-timegrid-slot-minor border-dotted':
!slot.isHour,
}"
:data-time="slot.time"
:style="{ height: SLOT_HEIGHT + 'px' }"></div>
@@ -532,7 +537,8 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
<div
class="grid absolute inset-0 pointer-events-none min-w-0"
:style="{
gridTemplateColumns: 'repeat(' + viewDays.length + ', 1fr)',
gridTemplateColumns:
'repeat(' + viewDays.length + ', 1fr)',
}">
<CalendarDayColumn
v-for="day in viewDays"
@@ -542,13 +548,17 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
:has-activity-status="
dayHasActivityStatus(day.format('YYYY-MM-DD'))
"
:day-events="eventsByDay[day.format('YYYY-MM-DD')] || []"
:day-events="
eventsByDay[day.format('YYYY-MM-DD')] || []
"
:get-event-style="getEventStyle"
:get-event-opacity-class="getEventOpacityClass"
:get-event-duration-seconds="getEventDurationSeconds"
:is-dragging="isDragging"
:drag-event-id="dragEventId"
:drag-preview="dragPreviewsByDay[day.format('YYYY-MM-DD')]"
:drag-preview="
dragPreviewsByDay[day.format('YYYY-MM-DD')]
"
:resize-event-id="resizeEventId"
:resize-cross-day-preview="
isResizing
@@ -557,7 +567,9 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
]
: undefined
"
:show-now-indicator="isToday(day) && nowIndicatorTop >= 0"
:show-now-indicator="
isToday(day) && nowIndicatorTop >= 0
"
:now-indicator-top="nowIndicatorTop"
:activity-boxes="
activityBoxesForDay(day.format('YYYY-MM-DD'))
@@ -566,12 +578,16 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
:get-activity-box-activities="getActivityBoxActivities"
:get-activity-percentage="getActivityPercentage"
:get-activity-text="getActivityText"
:show-selection="isSelecting || showCreateTimeEntryModal"
:show-selection="
isSelecting || showCreateTimeEntryModal
"
:is-selection-start="
selectionDay === day.format('YYYY-MM-DD')
"
:is-selection-intermediate="
selectionIntermediateDays.has(day.format('YYYY-MM-DD'))
selectionIntermediateDays.has(
day.format('YYYY-MM-DD')
)
"
:is-selection-end="
selectionEndDay === day.format('YYYY-MM-DD')
@@ -650,6 +666,7 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
</template>
</ContextMenuContent>
</ContextMenu>
</template>
</div>
</template>

6
resources/js/packages/ui/src/Input/EstimatedTimeInput.vue
View File

@@ -26,11 +26,7 @@ function updateDuration() {
return;
}
const seconds = parseTimeInput(
input,
organization?.value?.number_format,
'hours'
);
const seconds = parseTimeInput(input, organization?.value?.number_format, 'hours');
if (seconds !== null && seconds > 0) {
model.value = seconds;
}