Calendar month: drag-to-collapse + full-column selection highlight
Some checks failed
CI / build-and-test (push) Has been cancelled
Some checks failed
CI / build-and-test (push) Has been cancelled
Two refinements to get closer to the TickTick reference: - Drag up on the calendar collapses to the selected week; drag down expands to the full month (horizontal swipe still changes month). One direction- aware DragGesture handles both axes. - The selected day now gets a rounded full-column highlight behind its number + bars when collapsed (as in the tapped-day screenshot), instead of only the day circle. (Not build-verified — sim runtime removed to reclaim disk.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -593,7 +593,8 @@ struct CalendarView: View {
|
|||||||
isCurrentMonth: cal.isDate(date, equalTo: displayMonth, toGranularity: .month),
|
isCurrentMonth: cal.isDate(date, equalTo: displayMonth, toGranularity: .month),
|
||||||
isToday: cal.isDateInToday(date),
|
isToday: cal.isDateInToday(date),
|
||||||
isSelected: cal.isDate(date, inSameDayAs: selectedDate),
|
isSelected: cal.isDate(date, inSameDayAs: selectedDate),
|
||||||
bars: eventDots(for: date)
|
bars: eventDots(for: date),
|
||||||
|
highlightColumn: !monthExpanded && cal.isDate(date, inSameDayAs: selectedDate)
|
||||||
)
|
)
|
||||||
.onTapGesture {
|
.onTapGesture {
|
||||||
withAnimation(KisaniSpring.snappy) {
|
withAnimation(KisaniSpring.snappy) {
|
||||||
@@ -606,9 +607,19 @@ struct CalendarView: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.padding(.horizontal, 16)
|
.padding(.horizontal, 16)
|
||||||
.gesture(DragGesture(minimumDistance: 40).onEnded { v in
|
.gesture(DragGesture(minimumDistance: 30).onEnded { v in
|
||||||
if v.translation.width < -40 { navigateMonth(1) }
|
let dx = v.translation.width, dy = v.translation.height
|
||||||
else if v.translation.width > 40 { navigateMonth(-1) }
|
if abs(dx) > abs(dy) {
|
||||||
|
// Horizontal swipe → previous/next month
|
||||||
|
if dx < -40 { navigateMonth(1) }
|
||||||
|
else if dx > 40 { navigateMonth(-1) }
|
||||||
|
} else {
|
||||||
|
// Vertical drag → collapse to week (up) / expand to month (down)
|
||||||
|
withAnimation(KisaniSpring.snappy) {
|
||||||
|
if dy < -30 { monthExpanded = false }
|
||||||
|
else if dy > 30 { monthExpanded = true }
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Grabber — expand back to the full month, or collapse to the week.
|
// Grabber — expand back to the full month, or collapse to the week.
|
||||||
@@ -1656,6 +1667,7 @@ struct AddCalendarHolidaysView: View {
|
|||||||
struct DayCell: View {
|
struct DayCell: View {
|
||||||
@Environment(\.colorScheme) private var cs
|
@Environment(\.colorScheme) private var cs
|
||||||
let date: Date; let isCurrentMonth: Bool; let isToday: Bool; let isSelected: Bool; let bars: [Color]
|
let date: Date; let isCurrentMonth: Bool; let isToday: Bool; let isSelected: Bool; let bars: [Color]
|
||||||
|
var highlightColumn: Bool = false
|
||||||
private let cal = Calendar.current
|
private let cal = Calendar.current
|
||||||
var dayNum: String { "\(cal.component(.day, from: date))" }
|
var dayNum: String { "\(cal.component(.day, from: date))" }
|
||||||
/// Locale week-of-year (NOT ISO), intentionally matching the locale-driven grid
|
/// Locale week-of-year (NOT ISO), intentionally matching the locale-driven grid
|
||||||
@@ -1692,7 +1704,12 @@ struct DayCell: View {
|
|||||||
.padding(.horizontal, 3)
|
.padding(.horizontal, 3)
|
||||||
Spacer(minLength: 0)
|
Spacer(minLength: 0)
|
||||||
}
|
}
|
||||||
|
.padding(.top, 4)
|
||||||
.frame(maxWidth: .infinity).frame(height: 54).contentShape(Rectangle())
|
.frame(maxWidth: .infinity).frame(height: 54).contentShape(Rectangle())
|
||||||
|
.background(
|
||||||
|
RoundedRectangle(cornerRadius: 10)
|
||||||
|
.fill(highlightColumn ? AppColors.text3(cs).opacity(0.12) : .clear)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user