parent
1ce40f2c1a
commit
6ca0d7248b
329 changed files with 178 additions and 139 deletions
modules/ags/config/widgets/date
86
modules/ags/config/widgets/date/main.tsx
Normal file
86
modules/ags/config/widgets/date/main.tsx
Normal file
|
@ -0,0 +1,86 @@
|
|||
import { bind, Variable } from 'astal';
|
||||
import { Gtk } from 'astal/gtk3';
|
||||
|
||||
import GLib from 'gi://GLib';
|
||||
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
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>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue