feat(agsV2): add calendar widget

nixosModules/ags/v2/app.ts

@@ -5,6 +5,7 @@ import style from './style.scss';
 import AppLauncher from './widgets/applauncher/main';
 import Bar from './widgets/bar/wim';
 import BgFade from './widgets/bg-fade/main';
+import Calendar from './widgets/date/main';
 import Corners from './widgets/corners/main';
 import IconBrowser from './widgets/icon-browser/main';
 import { NotifPopups, NotifCenter } from './widgets/notifs/main';
@@ -20,6 +21,7 @@ App.start({
         AppLauncher();
         Bar();
         BgFade();
+        Calendar();
         Corners();
         IconBrowser();
         NotifPopups();

nixosModules/ags/v2/colors.scss

@@ -77,3 +77,19 @@ $blue_2: #62a0ea;
 $blue_3: #3584e4;
 $blue_4: #1c71d8;
 $blue_5: #1a5fb4;
+
+$black: #151720;
+$dimblack: #1a1c25;
+$lightblack: #262831;
+$red: #dd6777;
+$blue: #86aaec;
+$cyan: #93cee9;
+$blue-desaturated: #93cee9;
+$magenta: #c296eb;
+$purple: #c296eb;
+$green: #90ceaa;
+$aquamarine: #90ceaa;
+$yellow: #ecd3a0;
+$accent: $blue;
+$javacafe-magenta: #c296eb;
+$javacafe-blue: #86aaec;

nixosModules/ags/v2/style.scss

@@ -14,6 +14,7 @@ window, viewport {
 
 @import 'widgets/applauncher/style.scss';
 @import 'widgets/bar/style.scss';
+@import 'widgets/date/style.scss';
 @import 'widgets/icon-browser/style.scss';
 @import 'widgets/notifs/style.scss';
 @import 'widgets/powermenu/style.scss';

nixosModules/ags/v2/widgets/bar/items/clock.tsx

@@ -1,6 +1,8 @@
 import { bind, Variable } from 'astal';
+import { App } from 'astal/gtk3';
 
 import GLib from 'gi://GLib?version=2.0';
+import { PopupWindow } from '../../misc/popup-window';
 
 
 export default () => {
@@ -24,8 +26,30 @@ export default () => {
     });
 
     return (
-        <box className="bar-item">
+        <button
+            className="bar-item"
+            cursor="pointer"
+
+            onButtonReleaseEvent={(self) => {
+                const win = App.get_window('win-calendar') as PopupWindow;
+
+                win.set_x_pos(
+                    self.get_allocation(),
+                    'right',
+                );
+
+                win.visible = !win.visible;
+            }}
+
+            setup={(self) => {
+                App.connect('window-toggled', (_, win) => {
+                    if (win.name === 'win-notif-center') {
+                        self.toggleClassName('toggle-on', win.visible);
+                    }
+                });
+            }}
+        >
             <label label={bind(timeVar)} />
-        </box>
+        </button>
     );
 };

nixosModules/ags/v2/widgets/date/main.tsx

@@ -0,0 +1,97 @@
+import { bind, Variable } from 'astal';
+import { Astal, Gtk } from 'astal/gtk3';
+
+import GLib from 'gi://GLib?version=2.0';
+
+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>
+);

nixosModules/ags/v2/widgets/date/style.scss

@@ -0,0 +1,71 @@
+.date {
+    margin-top: 0;
+}
+
+.timebox {
+    margin: 30px 0;
+
+    .time-container {
+        .content {
+            font-weight: bolder;
+            font-size: 60px;
+        }
+
+        .divider {
+            margin: 8px 15px;
+            padding: 0 1px;
+            background: linear-gradient($red, $magenta, $blue, $cyan);
+        }
+    }
+
+    .date-container {
+        margin-top: 2px;
+    }
+}
+
+.cal-box {
+    border-radius: 30px;
+    padding: 0 1rem .2rem;
+    background-color: $window_bg_color;
+    border-bottom: 2px solid $accent_color;
+    border-top: 2px solid $accent_color;
+    margin: 0 12px 18px;
+
+    calendar {
+        font-size: 20px;
+        background-color: inherit;
+        padding: .5rem .10rem 0;
+        margin-left: 10px;
+        border-radius: 30px;
+
+        &>* {
+            border: solid 0 transparent;
+        }
+
+        &.highlight {
+            padding: 10rem;
+        }
+    }
+}
+
+calendar:selected {
+    color: $cyan;
+}
+
+calendar.header {
+    color: $cyan;
+    font-weight: bold;
+}
+
+calendar.button {
+    color: $cyan;
+}
+
+calendar.highlight {
+    color: $green;
+    font-weight: bold;
+}
+
+calendar:indeterminate {
+    color: $lightblack;
+}