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