Improve web calendar layout and shared sync state

This commit is contained in:
zsolt
2026-08-13 15:25:50 +02:00
parent 5e75c01b3f
commit 332657fc99
9 changed files with 40551 additions and 40265 deletions
+101 -69
View File
@@ -741,34 +741,56 @@ class WeekBoard extends StatelessWidget {
],
),
const SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(7, (index) {
final date = weekStart.add(Duration(days: index));
final dayEvents =
events
.where((event) => isSameDate(event.date, date))
.toList()
..sort((a, b) => a.start.compareTo(b.start));
final daySecondaryEvents = secondaryEvents
.where((event) => isSameDate(event.date, date))
.toList();
return Expanded(
child: Padding(
padding: EdgeInsets.only(right: index == 6 ? 0 : 6),
child: WeekDayColumn(
title: days[index],
dateLabel: formatShortDate(date),
active: selectedDay == index,
events: dayEvents,
secondaryEvents: daySecondaryEvents,
appCalendars: appCalendars,
people: people,
onTap: () => onSelectDay(index),
),
),
LayoutBuilder(
builder: (context, constraints) {
final vertical = constraints.maxWidth < 760;
final columns = List.generate(7, (index) {
final date = weekStart.add(Duration(days: index));
final dayEvents =
events
.where((event) => isSameDate(event.date, date))
.toList()
..sort((a, b) => a.start.compareTo(b.start));
final daySecondaryEvents = secondaryEvents
.where((event) => isSameDate(event.date, date))
.toList();
return WeekDayColumn(
title: days[index],
dateLabel: formatShortDate(date),
active: selectedDay == index,
events: dayEvents,
secondaryEvents: daySecondaryEvents,
appCalendars: appCalendars,
people: people,
compact: vertical,
onTap: () => onSelectDay(index),
);
});
if (vertical) {
return Column(
children: [
for (var i = 0; i < columns.length; i++) ...[
columns[i],
if (i != columns.length - 1) const SizedBox(height: 8),
],
],
);
}
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (var i = 0; i < columns.length; i++)
Expanded(
child: Padding(
padding: EdgeInsets.only(right: i == 6 ? 0 : 6),
child: columns[i],
),
),
],
);
}),
},
),
],
),
@@ -787,6 +809,7 @@ class WeekDayColumn extends StatelessWidget {
required this.secondaryEvents,
required this.appCalendars,
required this.people,
this.compact = false,
required this.onTap,
});
@@ -797,6 +820,7 @@ class WeekDayColumn extends StatelessWidget {
final List<CalendarEvent> secondaryEvents;
final List<AppCalendar> appCalendars;
final List<Person> people;
final bool compact;
final VoidCallback onTap;
@override
@@ -807,7 +831,7 @@ class WeekDayColumn extends StatelessWidget {
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
width: double.infinity,
constraints: const BoxConstraints(minHeight: 190),
constraints: BoxConstraints(minHeight: compact ? 92 : 190),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: active ? mint : const Color(0xFFF8F8F5),
@@ -820,46 +844,54 @@ class WeekDayColumn extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: ink,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
const SizedBox(height: 7),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 7),
alignment: Alignment.center,
decoration: BoxDecoration(
color: active ? sage : Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: active
? [
BoxShadow(
color: sage.withValues(alpha: .18),
blurRadius: 12,
offset: const Offset(0, 5),
),
]
: null,
),
child: Text(
dateLabel,
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
color: active ? Colors.white : sage,
fontSize: 17,
letterSpacing: .5,
fontWeight: FontWeight.w900,
Row(
children: [
Expanded(
child: Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: ink,
fontSize: 14,
fontWeight: FontWeight.w900,
),
),
),
),
const SizedBox(width: 8),
Container(
padding: EdgeInsets.symmetric(
horizontal: compact ? 10 : 8,
vertical: compact ? 5 : 7,
),
alignment: Alignment.center,
decoration: BoxDecoration(
color: active ? sage : Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: active
? [
BoxShadow(
color: sage.withValues(alpha: .18),
blurRadius: 12,
offset: const Offset(0, 5),
),
]
: null,
),
child: Text(
dateLabel,
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
color: active ? Colors.white : sage,
fontSize: compact ? 15 : 17,
letterSpacing: .5,
fontWeight: FontWeight.w900,
),
),
),
],
),
const SizedBox(height: 10),
if (secondaryEvents.isNotEmpty) ...[
@@ -870,8 +902,8 @@ class WeekDayColumn extends StatelessWidget {
const SizedBox(height: 8),
],
if (events.isEmpty)
const SizedBox(
height: 92,
SizedBox(
height: compact ? 32 : 92,
child: Center(
child: Text(
'nincs program',