102 lines
3.4 KiB
JavaScript
102 lines
3.4 KiB
JavaScript
import calendarUtil from "../calendarUtil.js";
|
|
|
|
class DayHeaderRow extends Shadow {
|
|
constructor(groupedDay, calendars) {
|
|
super()
|
|
this.groupedDay = groupedDay;
|
|
this.calendars = calendars;
|
|
}
|
|
|
|
render() {
|
|
const day = this.groupedDay.day;
|
|
const today = calendarUtil.isToday(day);
|
|
const allDayEvents = this.groupedDay.allDay;
|
|
const maxEvents = allDayEvents.length;
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
VStack(() => {
|
|
p(day.toLocaleDateString("en-US", { weekday: "long" }).toUpperCase())
|
|
.margin(0)
|
|
.fontSize(0.72, em)
|
|
.fontWeight("600")
|
|
.letterSpacing(0.04, em)
|
|
.opacity(today ? 1 : 0.5)
|
|
.textAlign("left")
|
|
|
|
h3(day.toLocaleDateString("en-US", { month: "long", day: "numeric" }))
|
|
.margin(0)
|
|
.fontSize(1.35, em)
|
|
.fontWeight("700")
|
|
.lineHeight("1")
|
|
})
|
|
.color(today ? "var(--quillred)" : "var(--headertext)")
|
|
.flex(1)
|
|
.alignItems("flex-start")
|
|
.justifyContent("center")
|
|
.gap(0.3, em)
|
|
.paddingTop(0.85, em)
|
|
.paddingBottom(maxEvents > 0 ? (maxEvents * 2.0) + 0.7 : 0.35, em)
|
|
.paddingHorizontal(0.75, em)
|
|
.boxSizing("border-box")
|
|
})
|
|
.width(100, pct)
|
|
.alignItems("stretch")
|
|
|
|
if (allDayEvents.length > 0) {
|
|
this.allDaySection(allDayEvents);
|
|
}
|
|
})
|
|
.width(100, pct)
|
|
.position("relative")
|
|
.background("var(--sidebottombars)")
|
|
.borderBottom("1px solid var(--divider)")
|
|
}
|
|
|
|
allDaySection(events) {
|
|
const rowHeight = 1.75;
|
|
const gap = 0.25;
|
|
const totalHeight = events.length * rowHeight + (events.length - 1) * gap;
|
|
|
|
ZStack(() => {
|
|
events.forEach((event, slot) => {
|
|
const color = calendarUtil.getCalendarColor(this.calendars, event.calendars.find(id => this.calendars.some(c => c.id === id)) ?? event.calendars[0]);
|
|
const topEm = slot * (rowHeight + gap);
|
|
|
|
HStack(() => {
|
|
p(event.title)
|
|
.margin(0)
|
|
.fontSize(0.72, em)
|
|
.fontWeight("600")
|
|
.color("white")
|
|
.whiteSpace("nowrap")
|
|
.overflow("hidden")
|
|
})
|
|
.position("absolute")
|
|
.top(topEm, em)
|
|
.left(0.25, em)
|
|
.right(0.25, em)
|
|
.height(rowHeight, em)
|
|
.padding(0.35, em)
|
|
.background(color)
|
|
.borderRadius(0.25, em)
|
|
.alignItems("center")
|
|
.boxSizing("border-box")
|
|
.overflow("hidden")
|
|
.pointerEvents("auto")
|
|
.cursor("pointer")
|
|
.onTap(() => $("bottomsheet-").showEvent(event))
|
|
})
|
|
})
|
|
.position("absolute")
|
|
.bottom(0.25, em)
|
|
.left(0)
|
|
.right(0)
|
|
.height(totalHeight, em)
|
|
.boxSizing("border-box")
|
|
.pointerEvents("none")
|
|
}
|
|
}
|
|
|
|
register(DayHeaderRow)
|