75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
class DesktopToolbar extends Shadow {
|
||
constructor(currentDate, actions) {
|
||
super()
|
||
this.currentDate = currentDate
|
||
this.actions = actions
|
||
}
|
||
|
||
render() {
|
||
const { goToPrevious, goToCurrent, goToNext } = this.actions
|
||
|
||
HStack(() => {
|
||
h2(this.currentDate.toLocaleDateString(undefined, { month: "long", year: "numeric" }))
|
||
.margin(0)
|
||
.fontWeight("700")
|
||
.fontSize(1.25, em)
|
||
.color("var(--headertext)")
|
||
|
||
HStack(() => {
|
||
button("+ New Event")
|
||
.paddingVertical(0.52, em)
|
||
.paddingRight(1, em)
|
||
.paddingLeft(0.8, em)
|
||
.marginHorizontal(0.4, em)
|
||
.background("transparent")
|
||
.color("var(--headertext)")
|
||
.border("1px solid var(--divider)")
|
||
.borderRadius(0.5, em)
|
||
.fontSize(0.83, em)
|
||
.fontWeight("600")
|
||
.cursor("pointer")
|
||
.onHover(function(hovering) {
|
||
this.style.background = hovering ? "var(--divider)" : "transparent";
|
||
})
|
||
.onClick((done) => { if (done) this.actions.onNewEvent() })
|
||
|
||
this.navBtn("‹", goToPrevious)
|
||
this.navBtn("Today", goToCurrent)
|
||
this.navBtn("›", goToNext)
|
||
})
|
||
.gap(0.4, em)
|
||
.alignItems("center")
|
||
})
|
||
.paddingHorizontal(1.5, em)
|
||
.paddingVertical(0.85, em)
|
||
.alignItems("center")
|
||
.justifyContent("space-between")
|
||
.borderBottom("1px solid var(--divider)")
|
||
.width(100, pct)
|
||
.boxSizing("border-box")
|
||
.flexShrink(0)
|
||
}
|
||
|
||
navBtn(label, handler) {
|
||
return button(label)
|
||
.onClick((done) => {
|
||
if(done) {
|
||
handler()
|
||
}
|
||
})
|
||
.paddingVertical(0.38, em)
|
||
.paddingHorizontal(label === "Today" ? 0.9 : 0.72, em)
|
||
.border("1px solid var(--divider)")
|
||
.borderRadius(0.45, em)
|
||
.background("transparent")
|
||
.color("var(--headertext)")
|
||
.cursor("pointer")
|
||
.fontSize(0.83, em)
|
||
.onHover(function(hovering) {
|
||
this.style.background = hovering ? "var(--divider)" : "transparent";
|
||
})
|
||
}
|
||
}
|
||
|
||
register(DesktopToolbar)
|