added Batterymenu and refactor

widget/Bar.scss

@@ -1,4 +1,5 @@
-@use "./widget/modules/modules.scss";
+@use "./modules/modules.scss";
+@use "./menus/menus.scss";
 
 window.Bar {
     background: transparent;

widget/Bar.tsx

@@ -1,6 +1,5 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk3";
 import {
-  PowerMenu,
   Cpu,
   BatteryLevel,
   Ram,
@@ -9,18 +8,15 @@ import {
   // FocusedClient,
   Time,
   SysTray,
-  Media,
   LauncherButton,
   PowerMenuButton,
   MediaPlayerButton,
   Volume,
 } from "./modules/export";
-// import Wp from "gi://AstalWp";
-// import { bind } from "astal";
+import { BatteryMenu, MediaMenu, PowerMenu } from "./menus/menus";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
-  // const speaker = Wp.get_default()?.audio.defaultSpeaker!;
   return (
     <>
       <window
@@ -53,7 +49,8 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
         </centerbox>
       </window>
       <PowerMenu />
-      <Media />
+      <MediaMenu />
+      <BatteryMenu />
     </>
   );
 }

widget/menus/BatteryMenu/BatteryMenu.scss

@@ -0,0 +1,38 @@
+.Batterymenu {
+    background-color: transparent;
+    padding: 10px;
+    box {
+        margin: 5px;
+    }
+
+    .BatteryMainBox {
+        background-color: black;
+        border-radius: 25px;
+        padding: 10px;
+    }
+
+    icon {
+        font-size: 25px;
+        padding: 0 2px;
+    }
+
+    .BatteryTopTitle {
+        font-weight: bold;
+        font-size: 15px;
+        padding: 0 2px;
+    }
+
+    .BatteryInfoTable {
+        padding: 10px;
+        background-color: rgb(55, 55, 55);
+        border-radius: 25px;
+        min-width: 300px;
+        label {
+            font-size: 15px;
+        }
+
+        label.BatteryInfoTableRowTitle {
+            color: rgb(170, 170, 170);
+        }
+    }
+}

widget/menus/BatteryMenu/BatteryMenu.tsx

@@ -0,0 +1,93 @@
+import { Astal, App, Gtk } from "astal/gtk3";
+import Battery from "gi://AstalBattery";
+import { bind } from "astal";
+
+const BatteryMenu = () => {
+  const { TOP, RIGHT } = Astal.WindowAnchor;
+  const { START, END } = Gtk.Align;
+  const bat = Battery.get_default();
+  console.log(
+    bat.charging,
+    bat.capacity,
+    bat.energyFull,
+    bat.energy_full_design,
+  );
+  return (
+    <window
+      anchor={TOP | RIGHT}
+      name="batterymenu"
+      className="Batterymenu"
+      application={App}
+      visible={false}
+    >
+      <box vertical className="BatteryMainBox">
+        <box className="Top">
+          <icon icon={bind(bat, "batteryIconName")} />
+          <box vertical>
+            <label
+              className="BatteryTopTitle"
+              label={bind(bat, "percentage").as(
+                (p) => `Battery ${Math.floor(p * 100)} %`,
+              )}
+            />
+          </box>
+        </box>
+        <box vertical className="BatteryInfoTable">
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Status:"
+            />
+            <label
+              hexpand
+              halign={END}
+              label={bind(bat, "charging").as((p) =>
+                p ? "CHARGING" : "PENDING_CHARGE",
+              )}
+            />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Health:"
+            />
+            <label hexpand halign={END} label="92.5 %" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Charge cycles:"
+            />
+            <label hexpand halign={END} label="325" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Power draw:"
+            />
+            <label hexpand halign={END} label="0.0 W" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Voltage:"
+            />
+            <label hexpand halign={END} label="12.1 V" />
+          </box>
+        </box>
+      </box>
+    </window>
+  );
+};
+
+export default BatteryMenu;

widget/menus/MediaMenu/MediaMenu.tsx

@@ -10,7 +10,7 @@ function lengthStr(length: number) {
   return `${min}:${sec0}${sec}`;
 }
 
-export default function Media() {
+export default function MediaMenu() {
   const { TOP, RIGHT } = Astal.WindowAnchor;
   const mpris = Mpris.get_default();
 

widget/menus/Powermenu/PowerMenu.scss

@@ -0,0 +1,22 @@
+window.Powermenu {
+    margin: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        button {
+            all: unset;
+            margin: 2px;
+            padding: 5px 15px 5px 13px;
+            background-color: black;
+            border-radius: 25px;
+            transition: 300ms;
+            background-color: rgb(70, 70, 70);
+
+            &:hover {
+                background-color: gray;
+            }
+        }
+    }
+}

widget/menus/Powermenu/PowerMenu.tsx

@@ -0,0 +1,26 @@
+import { Astal, App } from "astal/gtk3";
+
+export default function PowerMenu() {
+    const { TOP, RIGHT } = Astal.WindowAnchor
+    const powermenulist = [
+        {action: "/home/tola/.config/ags/scripts/powermenu lock", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu suspend", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu logout", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu reboot", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu poweroff", label: ""}
+    ]
+
+    return <window 
+                anchor={TOP | RIGHT} 
+                name="powermenu" 
+                className="Powermenu"
+                application={App}
+                visible={false}
+            >
+        <box>
+            {powermenulist.map(data => (
+                <button onClicked={data.action}>{data.label}</button>
+            ))}
+        </box>
+    </window>
+}

widget/menus/menus.scss

@@ -0,0 +1,3 @@
+@use "./BatteryMenu/BatteryMenu.scss";
+@use "./MediaMenu/MediaMenu.scss";
+@use "./Powermenu/PowerMenu.scss";

widget/menus/menus.ts

@@ -0,0 +1,5 @@
+import BatteryMenu from "./BatteryMenu/BatteryMenu";
+import MediaMenu from "./MediaMenu/MediaMenu";
+import PowerMenu from "./Powermenu/PowerMenu";
+
+export { BatteryMenu, MediaMenu, PowerMenu };

widget/modules/Battery/Battery.scss

@@ -1,12 +1,16 @@
 .Battery {
-  background-color: rgb(70, 70, 70);
-  border-radius: 25px;
-  border: 3pt solid black;
-  padding: 0 5px;
-  icon {
-    margin: 0 5px;
-  }
-  label {
-    margin: 0 5px 0 0;
-  }
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
+    border: 3pt solid black;
+    padding: 0 5px;
+    transition: 300ms;
+    &:hover {
+        background-color: gray;
+    }
+    icon {
+        margin: 0 5px;
+    }
+    label {
+        margin: 0 5px 0 0;
+    }
 }

widget/modules/Battery/Battery.tsx

@@ -1,15 +1,26 @@
-import { bind } from "astal"
-import Battery from "gi://AstalBattery"
+import { bind } from "astal";
+import Battery from "gi://AstalBattery";
+import { close_all_menus } from "../../utils/windows";
+import { App } from "astal/gtk3";
 
 export default function BatteryLevel() {
-    const bat = Battery.get_default()
-    console.log(bat.charging, bat.capacity, bat.energyFull, bat.energy_full_design)
+  const bat = Battery.get_default();
 
-    return <box className="Battery"
-        visible={bind(bat, "isPresent")}>
+  return (
+    <button
+      onClicked={() => {
+        close_all_menus("batterymenu");
+        App.toggle_window("batterymenu");
+      }}
+      className="Battery"
+      visible={bind(bat, "isPresent")}
+    >
+      <box>
         <icon icon={bind(bat, "batteryIconName")} />
-        <label label={bind(bat, "percentage").as(p =>
-            `${Math.floor(p * 100)} %`
-        )} />
-    </box>
-}
+        <label
+          label={bind(bat, "percentage").as((p) => `${Math.floor(p * 100)} %`)}
+        />
+      </box>
+    </button>
+  );
+}

widget/modules/export.ts

@@ -1,13 +1,11 @@
 import BatteryLevel from "./Battery/Battery";
 import Cpu from "./Cpu/Cpu";
 import FocusedClient from "./FocusedClient/FocusedClient";
-import PowerMenu from "./Powermenu/PowerMenu";
 import Ram from "./Ram/Ram";
 import Storage from "./Storage/Storage";
 import SysTray from "./SysTray/SysTray";
 import Time from "./Time/Time";
 import Workspaces from "./Workspaces/Workspaces";
-import Media from "./Media/Media";
 import LauncherButton from "./LauncherButton";
 import PowerMenuButton from "./PowerMenuButton";
 import MediaPlayerButton from "./MediaPlayerButton";
@@ -17,13 +15,11 @@ export {
   BatteryLevel,
   Cpu,
   FocusedClient,
-  PowerMenu,
   Ram,
   Storage,
   SysTray,
   Time,
   Workspaces,
-  Media,
   LauncherButton,
   PowerMenuButton,
   MediaPlayerButton,

widget/modules/modules.scss

@@ -1,5 +1,3 @@
-@use "./Media/Media.scss";
-@use "./Powermenu/PowerMenu.scss";
 @use "./Cpu/Cpu.scss";
 @use "./Ram/Ram.scss";
 @use "./Time/Time.scss";
@@ -8,4 +6,4 @@
 @use "./Workspaces/Workspaces.scss";
 @use "./FocusedClient/FocusedClient.scss";
 @use "./Volume/Volume.scss";
-@use "./Battery/Battery.scss"
+@use "./Battery/Battery.scss";