improve idle indicator colors, fix typescript issues

This commit is contained in:
Gregor Vostrak
2025-11-19 13:25:54 +01:00
parent 717fd35d76
commit e66679274d
3 changed files with 6 additions and 27 deletions

View File

@@ -676,11 +676,11 @@ onActivated(() => {
} }
.fullcalendar :deep(.activity-status-box.idle) { .fullcalendar :deep(.activity-status-box.idle) {
background-color: rgba(239, 68, 68, 0.3) !important; background-color: rgba(156, 163, 175, 0.1) !important;
} }
.fullcalendar :deep(.activity-status-box.idle):hover { .fullcalendar :deep(.activity-status-box.idle):hover {
background-color: rgba(239, 68, 68, 1) !important; background-color: rgba(156, 163, 175, 0.5) !important;
} }
.fullcalendar :deep(.activity-status-box.active) { .fullcalendar :deep(.activity-status-box.active) {

View File

@@ -1,4 +1,4 @@
import { createPlugin, PluginDef } from '@fullcalendar/core'; import { createPlugin, type PluginDef } from '@fullcalendar/core';
import { computePosition, flip, shift, offset } from '@floating-ui/dom'; import { computePosition, flip, shift, offset } from '@floating-ui/dom';
export interface ActivityPeriod { export interface ActivityPeriod {
@@ -11,13 +11,6 @@ export interface ActivityStatusPluginOptions {
activityPeriods?: ActivityPeriod[]; activityPeriods?: ActivityPeriod[];
} }
// Extend FullCalendar's options interface
declare module '@fullcalendar/core' {
interface CalendarOptions {
activityPeriods?: ActivityPeriod[];
}
}
/** /**
* Creates and manages a tooltip element for activity status boxes * Creates and manages a tooltip element for activity status boxes
*/ */
@@ -107,9 +100,6 @@ export function renderActivityStatusBoxes(
// Create a single tooltip instance to be reused // Create a single tooltip instance to be reused
const tooltip = createTooltip(); const tooltip = createTooltip();
// Get the calendar's current view to determine dates
const dateHeaders = calendarEl.querySelectorAll('.fc-col-header-cell');
lanes.forEach((lane: Element, dayIndex: number) => { lanes.forEach((lane: Element, dayIndex: number) => {
// Get the date for this lane from the data attribute // Get the date for this lane from the data attribute
const laneEl = lane as HTMLElement; const laneEl = lane as HTMLElement;
@@ -126,8 +116,6 @@ export function renderActivityStatusBoxes(
const laneDateEnd = new Date(laneDate); const laneDateEnd = new Date(laneDate);
laneDateEnd.setHours(23, 59, 59, 999); laneDateEnd.setHours(23, 59, 59, 999);
console.log('Processing lane', dayIndex, 'date:', dateStr);
let hasActivityStatusForThisDay = false; let hasActivityStatusForThisDay = false;
activityPeriods.forEach((period) => { activityPeriods.forEach((period) => {
@@ -139,15 +127,6 @@ export function renderActivityStatusBoxes(
return; return;
} }
console.log(
'Rendering period',
period.isIdle ? 'idle' : 'active',
'from',
periodStart,
'to',
periodEnd
);
// Calculate the position and height of the idle box // Calculate the position and height of the idle box
const { top, height } = calculateBoxPosition( const { top, height } = calculateBoxPosition(
calendarEl, calendarEl,
@@ -252,9 +231,9 @@ const activityStatusPlugin: PluginDef = createPlugin({
name: '@solidtime/activity-status', name: '@solidtime/activity-status',
optionRefiners: { optionRefiners: {
activityPeriods: (rawVal: any) => { activityPeriods: (rawVal: unknown): ActivityPeriod[] => {
if (!Array.isArray(rawVal)) return []; if (!Array.isArray(rawVal)) return [];
return rawVal; return rawVal as ActivityPeriod[];
}, },
}, },
}); });

View File

@@ -175,7 +175,7 @@ onMounted(() => {
<div class="@container"> <div class="@container">
<div v-for="(value, key) in visibleGroupedEntries" :key="key"> <div v-for="(value, key) in visibleGroupedEntries" :key="key">
<TimeEntryRowHeading <TimeEntryRowHeading
:date="key" :date="String(key)"
:duration="sumDuration(value)" :duration="sumDuration(value)"
:checked=" :checked="
value.every((timeEntry: TimeEntry) => selectedTimeEntries.includes(timeEntry)) value.every((timeEntry: TimeEntry) => selectedTimeEntries.includes(timeEntry))