sidebar: show events for each day
This commit is contained in:
2 * r + 2 * t
parent
0216fd3dd2
commit
205712b422
3 changed files with 139 additions and 8 deletions
|
|
@ -52,7 +52,7 @@
|
|||
@include lib.element-decel;
|
||||
|
||||
&:disabled {
|
||||
color: scheme.$overlay2;
|
||||
color: color.change(scheme.$overlay2, $alpha: 1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
padding: lib.s(3) lib.s(8);
|
||||
|
||||
&:disabled {
|
||||
color: scheme.$overlay0;
|
||||
color: color.change(scheme.$overlay0, $alpha: 1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
&:active {
|
||||
color: scheme.$overlay2;
|
||||
color: color.change(scheme.$overlay2, $alpha: 1);
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
|
|
@ -952,5 +952,70 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.events {
|
||||
@include lib.spacing(10, true);
|
||||
|
||||
.header {
|
||||
font-weight: bold;
|
||||
|
||||
@include lib.spacing(10);
|
||||
|
||||
& > button {
|
||||
@include lib.rounded(1000);
|
||||
@include lib.element-decel;
|
||||
|
||||
min-width: lib.s(24);
|
||||
min-height: lib.s(24);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: scheme.$subtext0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: color.change(scheme.$overlay2, $alpha: 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scrollable {
|
||||
min-height: lib.s(315);
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: lib.s(10);
|
||||
}
|
||||
|
||||
.sublabel {
|
||||
font-size: lib.s(14);
|
||||
color: scheme.$subtext0;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: lib.s(5);
|
||||
|
||||
@include lib.spacing(10, true);
|
||||
}
|
||||
|
||||
.event {
|
||||
@include lib.spacing(8);
|
||||
}
|
||||
|
||||
.calendar-indicator {
|
||||
@include lib.rounded(5);
|
||||
|
||||
min-width: lib.s(1);
|
||||
|
||||
$-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky,
|
||||
scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal,
|
||||
scheme.$blue;
|
||||
@for $i from 1 through list.length($-colours) {
|
||||
&.calendar-#{$i} {
|
||||
background-color: list.nth($-colours, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Calendar from "@/services/calendar";
|
||||
import Calendar, { type IEvent } from "@/services/calendar";
|
||||
import { setupCustomTooltip } from "@/utils/widgets";
|
||||
import { bind, GLib, Variable } from "astal";
|
||||
import { Gtk } from "astal/gtk3";
|
||||
|
|
@ -110,6 +110,32 @@ const getDayTooltip = (day: ical.Time) => {
|
|||
return `${events.length} event${events.length === 1 ? "" : "s"}\n${eventsStr}`;
|
||||
};
|
||||
|
||||
const getEventsHeader = (current: ical.Time) => {
|
||||
const events = Calendar.get_default().getEventsForDay(current);
|
||||
const isToday = current.toJSDate().toDateString() === new Date().toDateString();
|
||||
return (
|
||||
(isToday ? "Today • " : "") +
|
||||
GLib.DateTime.new_from_unix_local(current.toUnixTime()).format("%B %-d • %A") +
|
||||
` • ${events.length} event${events.length === 1 ? "" : "s"}`
|
||||
);
|
||||
};
|
||||
|
||||
const getEventHeader = (e: IEvent) => {
|
||||
const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
|
||||
const time = `${start.format("%-I")}${start.get_minute() > 0 ? `:${start.get_minute()}` : ""}${start.format("%P")}`;
|
||||
return `${time} <b>${e.event.summary.replaceAll("&", "&")}</b>`;
|
||||
};
|
||||
|
||||
const getEventTooltip = (e: IEvent) => {
|
||||
const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
|
||||
const end = GLib.DateTime.new_from_unix_local(e.event.endDate.toUnixTime());
|
||||
const sameAmPm = start.format("%P") === end.format("%P");
|
||||
const time = `${start.format(`%A, %-d %B • %-I:%M${sameAmPm ? "" : "%P"}`)} — ${end.format("%-I:%M%P")}`;
|
||||
const locIfExists = e.event.location ? ` ${e.event.location}\n` : "";
|
||||
const descIfExists = e.event.description ? ` ${e.event.description}\n` : "";
|
||||
return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists} ${e.calendar}`.replaceAll("&", "&");
|
||||
};
|
||||
|
||||
const Day = ({ day, shown, current }: { day: ical.Time; shown: Variable<string>; current: Variable<ical.Time> }) => (
|
||||
<button
|
||||
className={bind(Calendar.get_default(), "calendars").as(() => getDayClassName(day, current))}
|
||||
|
|
@ -163,12 +189,52 @@ const CalendarView = ({ shown, current }: { shown: Variable<string>; current: Va
|
|||
</box>
|
||||
</box>
|
||||
);
|
||||
|
||||
const Event = (event: IEvent) => (
|
||||
<box className="event" setup={self => setupCustomTooltip(self, getEventTooltip(event), { useMarkup: true })}>
|
||||
<box className={`calendar-indicator calendar-${Calendar.get_default().getCalendarIndex(event.calendar)}`} />
|
||||
<box vertical>
|
||||
<label truncate useMarkup xalign={0} label={getEventHeader(event)} />
|
||||
{event.event.location && <label truncate xalign={0} label={event.event.location} className="sublabel" />}
|
||||
{event.event.description && (
|
||||
<label truncate useMarkup xalign={0} label={event.event.description} className="sublabel" />
|
||||
)}
|
||||
</box>
|
||||
</box>
|
||||
);
|
||||
|
||||
const List = ({ current }: { current: Variable<ical.Time> }) => (
|
||||
<box vertical valign={Gtk.Align.START} className="list">
|
||||
{bind(current).as(c => Calendar.get_default().getEventsForDay(c).map(Event))}
|
||||
</box>
|
||||
);
|
||||
|
||||
const NoEvents = () => (
|
||||
<box homogeneous name="empty">
|
||||
<box vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} className="empty">
|
||||
<label className="icon" label="calendar_month" />
|
||||
<label label="Day all clear!" />
|
||||
</box>
|
||||
</box>
|
||||
);
|
||||
|
||||
const Events = ({ shown, current }: { shown: Variable<string>; current: Variable<ical.Time> }) => (
|
||||
<box className="events" name="events"></box>
|
||||
<box vertical className="events" name="events">
|
||||
<box className="header">
|
||||
<button cursor="pointer" onClicked={() => shown.set("calendar")} label="" />
|
||||
<label hexpand truncate xalign={0} label={bind(current).as(getEventsHeader)} />
|
||||
</box>
|
||||
<stack shown={bind(current).as(c => (Calendar.get_default().getEventsForDay(c).length > 0 ? "list" : "empty"))}>
|
||||
<NoEvents />
|
||||
<scrollable hscroll={Gtk.PolicyType.NEVER} name="list">
|
||||
<List current={current} />
|
||||
</scrollable>
|
||||
</stack>
|
||||
</box>
|
||||
);
|
||||
|
||||
export default () => {
|
||||
const shown = Variable("calendar");
|
||||
const shown = Variable<"calendar" | "events">("calendar");
|
||||
const current = Variable(ical.Time.now());
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const getDateHeader = (events: IEvent[]) => {
|
|||
const getEventHeader = (e: IEvent) => {
|
||||
const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
|
||||
const time = `${start.format("%-I")}${start.get_minute() > 0 ? `:${start.get_minute()}` : ""}${start.format("%P")}`;
|
||||
return `${time} <b>${e.event.summary}</b>`;
|
||||
return `${time} <b>${e.event.summary.replaceAll("&", "&")}</b>`;
|
||||
};
|
||||
|
||||
const getEventTooltip = (e: IEvent) => {
|
||||
|
|
@ -26,7 +26,7 @@ const getEventTooltip = (e: IEvent) => {
|
|||
const time = `${start.format(`%A, %-d %B • %-I:%M${sameAmPm ? "" : "%P"}`)} — ${end.format("%-I:%M%P")}`;
|
||||
const locIfExists = e.event.location ? ` ${e.event.location}\n` : "";
|
||||
const descIfExists = e.event.description ? ` ${e.event.description}\n` : "";
|
||||
return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists} ${e.calendar}`;
|
||||
return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists} ${e.calendar}`.replaceAll("&", "&");
|
||||
};
|
||||
|
||||
const Event = (event: IEvent) => (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue