update system

overlays/asztal/widget/powermenu/PowerMenu.ts

@@ -0,0 +1,56 @@
+import PopupWindow from "widget/PopupWindow"
+import powermenu, { type Action } from "service/powermenu"
+import icons from "lib/icons"
+import options from "options"
+import type Gtk from "gi://Gtk?version=3.0"
+
+const { layout, labels } = options.powermenu
+
+const SysButton = (action: Action, label: string) => Widget.Button({
+    on_clicked: () => powermenu.action(action),
+    child: Widget.Box({
+        vertical: true,
+        class_name: "system-button",
+        children: [
+            Widget.Icon(icons.powermenu[action]),
+            Widget.Label({
+                label,
+                visible: labels.bind(),
+            }),
+        ],
+    }),
+})
+
+export default () => PopupWindow({
+    name: "powermenu",
+    transition: "crossfade",
+    child: Widget.Box<Gtk.Widget>({
+        class_name: "powermenu horizontal",
+        setup: self => self.hook(layout, () => {
+            self.toggleClassName("box", layout.value === "box")
+            self.toggleClassName("line", layout.value === "line")
+        }),
+        children: layout.bind().as(layout => {
+            switch (layout) {
+                case "line": return [
+                    SysButton("shutdown", "Shutdown"),
+                    SysButton("logout", "Log Out"),
+                    SysButton("reboot", "Reboot"),
+                    SysButton("sleep", "Sleep"),
+                ]
+                case "box": return [
+                    Widget.Box(
+                        { vertical: true },
+                        SysButton("shutdown", "Shutdown"),
+                        SysButton("logout", "Log Out"),
+                    ),
+                    Widget.Box(
+                        { vertical: true },
+                        SysButton("reboot", "Reboot"),
+                        SysButton("sleep", "Sleep"),
+                    ),
+                ]
+            }
+        }),
+    }),
+})

overlays/asztal/widget/powermenu/Verification.ts

@@ -0,0 +1,47 @@
+import PopupWindow from "widget/PopupWindow"
+import powermenu from "service/powermenu"
+
+export default () => PopupWindow({
+    name: "verification",
+    transition: "crossfade",
+    child: Widget.Box({
+        class_name: "verification",
+        vertical: true,
+        children: [
+            Widget.Box({
+                class_name: "text-box",
+                vertical: true,
+                children: [
+                    Widget.Label({
+                        class_name: "title",
+                        label: powermenu.bind("title"),
+                    }),
+                    Widget.Label({
+                        class_name: "desc",
+                        label: "Are you sure?",
+                    }),
+                ],
+            }),
+            Widget.Box({
+                class_name: "buttons horizontal",
+                vexpand: true,
+                vpack: "end",
+                homogeneous: true,
+                children: [
+                    Widget.Button({
+                        child: Widget.Label("No"),
+                        on_clicked: () => App.toggleWindow("verification"),
+                        setup: self => self.hook(App, (_, name: string, visible: boolean) => {
+                            if (name === "verification" && visible)
+                                self.grab_focus()
+                        }),
+                    }),
+                    Widget.Button({
+                        child: Widget.Label("Yes"),
+                        on_clicked: () => Utils.exec(powermenu.cmd),
+                    }),
+                ],
+            }),
+        ],
+    }),
+})

overlays/asztal/widget/powermenu/powermenu.scss

@@ -0,0 +1,110 @@
+window#powermenu,
+window#verification {
+    // the fraction has to be more than hyprland ignorealpha
+    background-color: rgba(0, 0, 0, .4);
+}
+
+window#verification .verification {
+    @include floating-widget;
+    padding: $popover-padding * 1.5;
+    min-width: 300px;
+    min-height: 100px;
+
+    .text-box {
+        margin-bottom: $spacing;
+
+        .title {
+            font-size: 1.6em;
+        }
+
+        .desc {
+            color: transparentize($fg, 0.1);
+            font-size: 1.1em;
+        }
+    }
+
+    .buttons {
+        @include spacing;
+        margin-top: $padding;
+
+        button {
+            @include button;
+            font-size: 1.5em;
+            padding: $padding;
+        }
+    }
+}
+
+window#powermenu .powermenu {
+    @include floating-widget;
+
+    &.line {
+        padding: $popover-padding * 1.5;
+
+        button {
+            padding: $popover-padding;
+        }
+
+        label {
+            margin-bottom: $spacing * -.5;
+        }
+    }
+
+    &.box {
+        padding: $popover-padding * 2;
+
+        button {
+            padding: $popover-padding * 1.5;
+        }
+
+        label {
+            margin-bottom: $spacing * -1;
+        }
+    }
+
+    button {
+        @include unset;
+
+        image {
+            @include button;
+            border-radius: $radius + ($popover-padding * 1.4);
+            min-width: 1.7em;
+            min-height: 1.7em;
+            font-size: 4em;
+        }
+
+        label,
+        image {
+            color: transparentize($fg, 0.1);
+        }
+
+        label {
+            margin-top: $spacing * .3;
+        }
+
+        &:hover {
+            image {
+                @include button-hover;
+            }
+
+            label {
+                color: $fg;
+            }
+        }
+
+        &:focus image {
+            @include button-focus;
+        }
+
+        &:active image {
+            @include button-active;
+        }
+
+        &:focus,
+        &:active {
+            label {
+                color: $primary-bg;
+            }
+        }
+    }
+}