97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import { bind, Variable } from 'astal';
|
|
import { Astal, Gtk } from 'astal/gtk3';
|
|
|
|
import GLib from 'gi://GLib';
|
|
|
|
import PopupWindow from '../misc/popup-window';
|
|
|
|
|
|
const Divider = () => (
|
|
<box
|
|
className="divider"
|
|
vertical
|
|
/>
|
|
);
|
|
|
|
const Time = () => {
|
|
const hour = Variable<string>('').poll(1000, () => GLib.DateTime.new_now_local().format('%H') || '');
|
|
const min = Variable<string>('').poll(1000, () => GLib.DateTime.new_now_local().format('%M') || '');
|
|
|
|
const fullDate = Variable<string>('').poll(1000, () => {
|
|
const time = GLib.DateTime.new_now_local();
|
|
|
|
const dayNameMonth = time.format('%A, %B ');
|
|
const dayNum = time.get_day_of_month();
|
|
const date = time.format(', %Y');
|
|
|
|
return dayNum && dayNameMonth && date ?
|
|
dayNameMonth + dayNum + date :
|
|
'';
|
|
});
|
|
|
|
return (
|
|
<box
|
|
className="timebox"
|
|
vertical
|
|
>
|
|
<box
|
|
className="time-container"
|
|
halign={Gtk.Align.CENTER}
|
|
valign={Gtk.Align.CENTER}
|
|
>
|
|
<label
|
|
className="content"
|
|
label={bind(hour)}
|
|
/>
|
|
|
|
<Divider />
|
|
|
|
<label
|
|
className="content"
|
|
label={bind(min)}
|
|
/>
|
|
</box>
|
|
|
|
<box
|
|
className="date-container"
|
|
halign={Gtk.Align.CENTER}
|
|
>
|
|
<label
|
|
css="font-size: 20px;"
|
|
label={bind(fullDate)}
|
|
/>
|
|
</box>
|
|
</box>
|
|
);
|
|
};
|
|
|
|
const DateWidget = () => {
|
|
const cal = new Gtk.Calendar({
|
|
show_day_names: true,
|
|
show_heading: true,
|
|
});
|
|
|
|
cal.show_all();
|
|
|
|
return (
|
|
<box
|
|
className="date widget"
|
|
vertical
|
|
>
|
|
<Time />
|
|
|
|
<box className="cal-box">
|
|
{cal}
|
|
</box>
|
|
</box>
|
|
);
|
|
};
|
|
|
|
export default () => (
|
|
<PopupWindow
|
|
name="calendar"
|
|
anchor={Astal.WindowAnchor.TOP}
|
|
>
|
|
<DateWidget />
|
|
</PopupWindow>
|
|
);
|