From ffc873775609b4e01a5d64d6c3dce0f0d4aed9f0 Mon Sep 17 00:00:00 2001 From: ProtoShark Date: Fri, 7 Feb 2025 22:09:12 -0800 Subject: [PATCH] Reworked toggle buttons and added power menu --- assets/hyprland.svg | 32 ++++++++++++++++ assets/lock-symbolic.svg | 7 ++++ assets/logout.svg | 7 ++++ assets/noplayer-symbolic | 2 - assets/reboot.svg | 7 ++++ assets/shutdown.svg | 7 ++++ assets/suspend.svg | 7 ++++ style.scss | 58 +++++++++++++++------------- widget/Bar.tsx | 9 +++-- widget/battery.tsx | 83 +++++++++++++++++++--------------------- widget/bluetooth.tsx | 13 ++----- widget/brightness.tsx | 9 +++-- widget/client.tsx | 4 +- widget/notif.tsx | 66 ++++++++++++++++++++++++++++---- widget/player.tsx | 18 +++------ widget/power.tsx | 61 +++++++++++++++++++++++++++++ 16 files changed, 281 insertions(+), 109 deletions(-) create mode 100644 assets/hyprland.svg create mode 100644 assets/lock-symbolic.svg create mode 100644 assets/logout.svg delete mode 100644 assets/noplayer-symbolic create mode 100644 assets/reboot.svg create mode 100644 assets/shutdown.svg create mode 100644 assets/suspend.svg create mode 100644 widget/power.tsx diff --git a/assets/hyprland.svg b/assets/hyprland.svg new file mode 100644 index 0000000..ec049dd --- /dev/null +++ b/assets/hyprland.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/lock-symbolic.svg b/assets/lock-symbolic.svg new file mode 100644 index 0000000..b0a2853 --- /dev/null +++ b/assets/lock-symbolic.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/logout.svg b/assets/logout.svg new file mode 100644 index 0000000..bc97290 --- /dev/null +++ b/assets/logout.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/noplayer-symbolic b/assets/noplayer-symbolic deleted file mode 100644 index 50bfb6b..0000000 --- a/assets/noplayer-symbolic +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/assets/reboot.svg b/assets/reboot.svg new file mode 100644 index 0000000..12dead9 --- /dev/null +++ b/assets/reboot.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/shutdown.svg b/assets/shutdown.svg new file mode 100644 index 0000000..8ec60af --- /dev/null +++ b/assets/shutdown.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/suspend.svg b/assets/suspend.svg new file mode 100644 index 0000000..364d9fd --- /dev/null +++ b/assets/suspend.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/style.scss b/style.scss index 05039ae..4e85348 100644 --- a/style.scss +++ b/style.scss @@ -21,10 +21,10 @@ button { color: $text-1; padding: 0; - > box, > overlay > box { + > box, > overlay > box, > label { transition: ease-out 0.2s; border-radius: 12px; - padding: 0 6px 0 6px; + padding: 0 6px; margin: 2px 6px 4px 6px; color: $text-1; } @@ -38,11 +38,11 @@ button { &:hover { color: transparent; - > box, > overlay > box { + > box, > overlay > box, > label { background: $background-2; } &.selected { - > box, > overlay > box { + > box, > overlay > box, > label { background: $highlight-1s; } } @@ -118,7 +118,7 @@ button { > box { background: $background-3; border-radius: 10px; - box-shadow: 0 0 10px 4px black; + box-shadow: 0 0 16px 4px black; padding: 10px; margin: 48px 40px 40px 12px; } @@ -157,13 +157,19 @@ button { } .toggleButton { + > box { + padding: 0; + } + label { + color: white; + } + :not(.toggleIndicator) { + background: none; + } &.bt { icon { margin-right: 8px; } - box { - background: none; - } label { margin-top: 2px; margin-right: 60px; @@ -172,19 +178,10 @@ button { &:hover .toggleIndicator { box-shadow: 0 0 6px 0px $highlight-3; } - > overlay { - margin: 0; - padding: 6px 0px 6px 0px; - > label { - color: $text-1; - font-size: 16px; - margin: 2px; - } - > .active { - margin: 4px 12px 4px 0; - min-width: 32px; - background: $highlight-3; - } + > label { + color: $text-1; + font-size: 16px; + margin: 2px; } } @@ -302,9 +299,14 @@ button { min-height: 6px; min-width: 24px; padding: 0; - margin: 4px 16px 4px 0; + margin: 4px 4px 4px 0; border: 2px solid $highlight-3; border-radius: 8px; + &.active { + margin: 4px 0px 4px 0; + min-width: 32px; + background: $highlight-3; + } } @keyframes notifIn { @@ -315,7 +317,7 @@ button { @keyframes glowIn { from { background: white; - box-shadow: 0 0 10px 4px white; + box-shadow: 0 0 16px 4px white; } } @@ -325,15 +327,19 @@ button { background: $background-3; border-radius: 10px; padding: 8px; - box-shadow: 0 0 10px 4px black; + box-shadow: 0 0 16px 4px black; min-width: 300px; margin: 12px 12px 40px 40px; } .notifIcon { - min-width: 64px; - min-height: 64px; + min-width: 48px; + min-height: 48px; margin: 8px; background-size: contain; border-radius: 10px; } + +.panelNotifBox { + min-width: 400px; +} diff --git a/widget/Bar.tsx b/widget/Bar.tsx index c73f703..8d72052 100644 --- a/widget/Bar.tsx +++ b/widget/Bar.tsx @@ -9,6 +9,7 @@ import client from "./client" import player from "./player" import bluetooth from "./bluetooth" import notifs from "./notif" +import power from "./power" const time = Variable("").poll(1000, "date +'%a %b %d ยท %H:%M'") @@ -21,11 +22,13 @@ export default function Bar(monitor: Hyprland.Monitor) { monitor={monitor.id} exclusivity={Astal.Exclusivity.IGNORE} anchor={TOP | LEFT | RIGHT} - heightRequest={36} layer={Astal.Layer.TOP} application={App}> - + self.css="box-shadow: 0 0 16px 4px black;"} + > + {power()} {battery()} {volume()} {brightness()} @@ -43,6 +46,6 @@ export default function Bar(monitor: Hyprland.Monitor) { {notifs()} - + } diff --git a/widget/battery.tsx b/widget/battery.tsx index e29fecd..eb5bd16 100644 --- a/widget/battery.tsx +++ b/widget/battery.tsx @@ -19,17 +19,19 @@ function profileButton(label: string, profile: string) { return } @@ -63,47 +65,40 @@ function BattWindow() { /> - `${w}W`), - }), - new Widget.Label({ - className: "smallText", - label: bind(batt, "charging").as( - (c) => c ? "Charging" : "Discharging" - ), - }), - ] - })}> - - - + + + + + + + { execAsync(["bluetoothctl", device.connected ? "disconnect" : "connect", device.address]).then(out => console.log(out)).catch(out => console.log(out)) }}> - - "toggleIndicator ".concat(c ? "active" : "inactive") - ), - halign: Gtk.Align.END, - valign: Gtk.Align.CENTER, - })}> - + + - + "toggleIndicator ".concat(c ? "active" : "inactive"))} halign={Gtk.Align.END} valign={Gtk.Align.CENTER}/> + } diff --git a/widget/brightness.tsx b/widget/brightness.tsx index a185d5c..512973f 100644 --- a/widget/brightness.tsx +++ b/widget/brightness.tsx @@ -68,9 +68,12 @@ function BrightWindow() { .then((out) => (console.log(out))) .catch((out) => (console.log(out))) }} - > - - + > + + + {toggleIndicator} + + } diff --git a/widget/client.tsx b/widget/client.tsx index 5787a85..8cab988 100644 --- a/widget/client.tsx +++ b/widget/client.tsx @@ -23,11 +23,11 @@ function NewClient(client: Hyprland.Client) { } let b = return b diff --git a/widget/notif.tsx b/widget/notif.tsx index 591e741..c815101 100644 --- a/widget/notif.tsx +++ b/widget/notif.tsx @@ -4,16 +4,16 @@ import Notif from "gi://AstalNotifd" import Pango from "gi://Pango?version=1.0" const notifs = Notif.get_default() -const { TOP, RIGHT } = Astal.WindowAnchor +const { TOP, RIGHT, BOTTOM } = Astal.WindowAnchor const notifPlaceholder = "/home/protoshark/.config/ags/assets/notif.svg" let notifWindow: Widget.Window -function NewNotif(notif: Notif.Notification) { + +function NewNotif(notif: Notif.Notification, inPanel: boolean = true) { return - - + - + + {notif.actions.map(action => )} + + +} + +function NotifPanel() { + return + + + + + + + + {notifs.notifications.map(n => NewNotif(n, false))} + + + + } function notify(notif: Notif.Notification) { @@ -59,6 +101,7 @@ function notify(notif: Notif.Notification) { notifWindow = @@ -93,7 +136,14 @@ function notifCount() { export default function notifWidget() { return )} + + +} + +export default function power() { + return +}