feat(apps): refine login consent and calendar day/month UX
This commit is contained in:
@@ -41,6 +41,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
final DayEventLayoutEngine _layoutEngine = const DayEventLayoutEngine();
|
||||
final Map<int, Offset> _activePointers = {};
|
||||
final ScrollController _dayStripController = ScrollController();
|
||||
final ScrollController _timelineController = ScrollController();
|
||||
|
||||
DayViewScale _scale = DayViewScale.defaultScale();
|
||||
DayViewScale _pinchStartScale = DayViewScale.defaultScale();
|
||||
@@ -67,6 +68,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_scrollToSelectedDate();
|
||||
_scrollTimelineToNow();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -91,6 +93,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
void dispose() {
|
||||
WidgetsBinding.instance.removeObserver(this);
|
||||
_dayStripController.dispose();
|
||||
_timelineController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@@ -125,6 +128,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
onPointerCancel: _handlePointerCancel,
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: SingleChildScrollView(
|
||||
controller: _timelineController,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: AppSpacing.lg,
|
||||
@@ -160,6 +164,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
_calendarManager.setSelectedDate(today);
|
||||
_updateMonthDates();
|
||||
_scrollToSelectedDate(animate: true);
|
||||
_scrollTimelineToNow(animate: true);
|
||||
_loadEvents();
|
||||
}
|
||||
|
||||
@@ -194,6 +199,10 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
if ((nextScale.hourHeight - _scale.hourHeight).abs() < 0.1) {
|
||||
return;
|
||||
}
|
||||
if (nextScale.hourHeight < _scale.hourHeight &&
|
||||
_scale.hourHeight <= DayViewScale.minHourHeight) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_scale = nextScale;
|
||||
});
|
||||
@@ -410,6 +419,29 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
_dayStripController.jumpTo(offset);
|
||||
}
|
||||
|
||||
void _scrollTimelineToNow({bool animate = false}) {
|
||||
if (!_timelineController.hasClients) {
|
||||
return;
|
||||
}
|
||||
final now = DateTime.now();
|
||||
final minuteOfDay = now.hour * 60 + now.minute;
|
||||
final targetY = _scale.pixelsForMinutes(minuteOfDay);
|
||||
final viewportHeight = _timelineController.position.viewportDimension;
|
||||
final offset = targetY - (viewportHeight / 3);
|
||||
final max = _timelineController.position.maxScrollExtent;
|
||||
final clampedOffset = offset.clamp(0.0, max);
|
||||
|
||||
if (animate) {
|
||||
_timelineController.animateTo(
|
||||
clampedOffset,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeOut,
|
||||
);
|
||||
return;
|
||||
}
|
||||
_timelineController.jumpTo(clampedOffset);
|
||||
}
|
||||
|
||||
Widget _buildDayItem(DateTime date, bool isSelected, bool isWeekend) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
@@ -465,6 +497,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
scale: _scale,
|
||||
eventAreaLeft: eventAreaLeft,
|
||||
eventAreaWidth: eventAreaWidth,
|
||||
viewDate: _selectedDate,
|
||||
);
|
||||
|
||||
return SizedBox(
|
||||
@@ -521,19 +554,17 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
}) {
|
||||
final minute = hour * DayTimelineMetrics.minutesInHour;
|
||||
final y = _scale.pixelsForMinutes(minute);
|
||||
final isDisabled = hour == DayTimelineMetrics.hoursInDay;
|
||||
final labelTop = (y - 7).clamp(0.0, boardHeight - 14);
|
||||
final isLastHour = hour == DayTimelineMetrics.hoursInDay;
|
||||
final adjustedY = isLastHour ? boardHeight - 1 : y;
|
||||
final labelTop = (adjustedY - 7).clamp(0.0, boardHeight - 14);
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: y,
|
||||
top: adjustedY,
|
||||
left: eventAreaLeft,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 1,
|
||||
color: isDisabled ? AppColors.blue50 : AppColors.border,
|
||||
),
|
||||
child: Container(height: 1, color: AppColors.border),
|
||||
),
|
||||
Positioned(
|
||||
top: labelTop,
|
||||
@@ -545,7 +576,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isDisabled ? AppColors.slate300 : AppColors.slate400,
|
||||
color: AppColors.slate400,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -609,10 +640,16 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
|
||||
required DayEventLayout layout,
|
||||
required double boardHeight,
|
||||
}) {
|
||||
final eventColor = resolveEventColor(
|
||||
status: layout.event.status,
|
||||
colorHex: layout.event.metadata?.color,
|
||||
);
|
||||
final isArchived = layout.event.status == ScheduleStatus.archived;
|
||||
Color eventColor;
|
||||
if (isArchived) {
|
||||
eventColor = AppColors.slate400;
|
||||
} else {
|
||||
eventColor = resolveEventColor(
|
||||
status: layout.event.status,
|
||||
colorHex: layout.event.metadata?.color,
|
||||
);
|
||||
}
|
||||
final isCompact = layout.visualHeight < 20;
|
||||
final tapHeight = layout.visualHeight < _minEventTapHeight
|
||||
? _minEventTapHeight
|
||||
|
||||
@@ -320,6 +320,7 @@ class _CalendarEventDetailScreenState extends State<CalendarEventDetailScreen> {
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
Text(
|
||||
timeRange,
|
||||
maxLines: 2,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
@@ -507,12 +508,21 @@ class _CalendarEventDetailScreenState extends State<CalendarEventDetailScreen> {
|
||||
}
|
||||
|
||||
String _formatRangeLabel(DateTime startAt, DateTime? endAt) {
|
||||
final dateLabel =
|
||||
'${startAt.month}月${startAt.day}日 ${_getWeekday(startAt.weekday)}';
|
||||
final startLabel =
|
||||
'${startAt.month}月${startAt.day}日 ${_getWeekday(startAt.weekday)} ${_formatTime(startAt)}';
|
||||
if (endAt == null) {
|
||||
return '$dateLabel ${_formatTime(startAt)}';
|
||||
return startLabel;
|
||||
}
|
||||
return '$dateLabel ${_formatTime(startAt)} - ${_formatTime(endAt)}';
|
||||
final isSameDay =
|
||||
startAt.year == endAt.year &&
|
||||
startAt.month == endAt.month &&
|
||||
startAt.day == endAt.day;
|
||||
if (isSameDay) {
|
||||
return '$startLabel - ${_formatTime(endAt)}';
|
||||
}
|
||||
final endLabel =
|
||||
'${endAt.month}月${endAt.day}日 ${_getWeekday(endAt.weekday)} ${_formatTime(endAt)}';
|
||||
return '开始: $startLabel\n结束: $endLabel';
|
||||
}
|
||||
|
||||
Widget _buildStatusBadge(ScheduleStatus status) {
|
||||
|
||||
@@ -107,6 +107,9 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
}
|
||||
|
||||
Widget _buildHeader() {
|
||||
final today = DateTime.now();
|
||||
final isNotToday = !isSameDay(_selectedDate, today);
|
||||
|
||||
return SizedBox(
|
||||
height: 76,
|
||||
child: Padding(
|
||||
@@ -148,6 +151,31 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
if (isNotToday)
|
||||
AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
onTap: _goToToday,
|
||||
child: Container(
|
||||
height: 36,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.messageBtnWrap,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
border: Border.all(color: AppColors.messageBtnBorder),
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'今天',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.slate700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (isNotToday) const SizedBox(width: 8),
|
||||
AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
onTap: () async {
|
||||
@@ -181,6 +209,20 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
);
|
||||
}
|
||||
|
||||
void _goToToday() {
|
||||
final today = DateTime.now();
|
||||
final targetMonth = DateTime(today.year, today.month, 1);
|
||||
setState(() {
|
||||
_selectedDate = today;
|
||||
if (_currentMonth.year != targetMonth.year ||
|
||||
_currentMonth.month != targetMonth.month) {
|
||||
_currentMonth = targetMonth;
|
||||
}
|
||||
});
|
||||
_calendarManager.setSelectedDate(today);
|
||||
_loadMonthEvents(forceRefresh: true);
|
||||
}
|
||||
|
||||
Widget _buildMonthContent() {
|
||||
return Column(
|
||||
children: [
|
||||
@@ -280,9 +322,7 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
'${AppRoutes.calendarDayWeek}?date=${formatYmd(date)}',
|
||||
);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 140),
|
||||
curve: Curves.easeOut,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
|
||||
Reference in New Issue
Block a user