Improve web calendar layout and shared sync state
This commit is contained in:
+101
-69
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user