diff --git a/.config/ags/battery.js b/.config/ags/battery.js new file mode 100644 index 0000000..53858d5 --- /dev/null +++ b/.config/ags/battery.js @@ -0,0 +1,38 @@ +const css = `${App.configDir}/style.css`; +const battery = await Service.import("battery"); + +const laptop = Utils.exec(`hostname`) === "syl"; + +export function BatteryPopup(monitor = laptop ? 0 : 2) { + const battery_state = battery.bind("percent"); + return Widget.Window({ + monitor, + name: `battery${monitor}`, + class_name: "battery-popup", + anchor: [laptop ? "bottom" : "top"], + css: "margin-right: 30px", + visible: battery_state.as(p => p < 25 ? true : false), + child: Widget.Box({ + // css: "padding: .8em", + children: [ + Widget.Icon({ + css: "padding: .8em", + class_name: "battery-icon", + icon: battery.bind("icon-name"), + }), + Widget.Label({ + css: "padding: .8em", + label: battery.bind("percent").as(p => p + "% Please charge me!!"), + }), + Widget.Button({ + css: "font-size: 60px;", + class_name: "battery-close", + child: Widget.Icon({ + icon: "view-close", + }), + on_clicked: () => console.log("lets' close"), + }) + ], + }), + }) +} diff --git a/.config/ags/config.js b/.config/ags/config.js index 7dec1d1..9c339be 100644 --- a/.config/ags/config.js +++ b/.config/ags/config.js @@ -5,6 +5,7 @@ const battery = await Service.import("battery"); const audio = await Service.import('audio') import { NotificationPopups } from "./notifications.js" +import { BatteryPopup } from "./battery.js" const laptop = Utils.exec(`hostname`) === "syl"; console.log(laptop ? "Running on syl" : "Running on kaladin"); @@ -177,6 +178,7 @@ App.config({ windows: [ Bar(laptop ? 0 : 2), // can be instantiated for each monitor NotificationPopups(), + BatteryPopup() ], }) diff --git a/.config/ags/style.css b/.config/ags/style.css index d19134c..efb16bb 100644 --- a/.config/ags/style.css +++ b/.config/ags/style.css @@ -168,3 +168,20 @@ window.notification-popups box.notifications { .notif-actions .notif-action-button:last-child { margin-right: 0; } + +.battery-popup { + padding: 2.5em; + font-size: 2em; + background-color: @backtransparent; + border-radius: 20px; +} + +.battery-close { + border-radius: 10px; + padding: 1px; + margin-bottom: 25px; +} + +.battery-close:hover { + background-color: @base08; +}