From 0fea2069f18898db4bf0b3ef1e9cff3c1429f7d1 Mon Sep 17 00:00:00 2001 From: ProtoShark Date: Mon, 3 Feb 2025 18:07:00 -0800 Subject: [PATCH] Notifications --- assets/notif.svg | 7 +++ style.scss | 34 ++++++++++++++ widget/Bar.tsx | 2 + widget/bluetooth.tsx | 2 +- widget/notif.tsx | 105 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 assets/notif.svg create mode 100644 widget/notif.tsx diff --git a/assets/notif.svg b/assets/notif.svg new file mode 100644 index 0000000..73a1766 --- /dev/null +++ b/assets/notif.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/style.scss b/style.scss index efc32ad..05039ae 100644 --- a/style.scss +++ b/style.scss @@ -10,6 +10,9 @@ window { > centerbox { background: $background-1; } + icon { + font-size: 24px; + } } button { @@ -303,3 +306,34 @@ button { border: 2px solid $highlight-3; border-radius: 8px; } + +@keyframes notifIn { + 0% { + margin-right: -352px; + } +} +@keyframes glowIn { + from { + background: white; + box-shadow: 0 0 10px 4px white; + } +} + +.notifBox { + animation: notifIn cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s, glowIn ease-in 0.3s; + transition: margin cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s; + background: $background-3; + border-radius: 10px; + padding: 8px; + box-shadow: 0 0 10px 4px black; + min-width: 300px; + margin: 12px 12px 40px 40px; +} + +.notifIcon { + min-width: 64px; + min-height: 64px; + margin: 8px; + background-size: contain; + border-radius: 10px; +} diff --git a/widget/Bar.tsx b/widget/Bar.tsx index 1695a98..c73f703 100644 --- a/widget/Bar.tsx +++ b/widget/Bar.tsx @@ -8,6 +8,7 @@ import brightness from "./brightness" import client from "./client" import player from "./player" import bluetooth from "./bluetooth" +import notifs from "./notif" const time = Variable("").poll(1000, "date +'%a %b %d ยท %H:%M'") @@ -40,6 +41,7 @@ export default function Bar(monitor: Hyprland.Monitor) { label={time()} /> + {notifs()} diff --git a/widget/bluetooth.tsx b/widget/bluetooth.tsx index 7b5c1fb..0e3cf7b 100644 --- a/widget/bluetooth.tsx +++ b/widget/bluetooth.tsx @@ -21,7 +21,7 @@ function bluetoothItem(device: Bluetooth.Device) { valign: Gtk.Align.CENTER, })}> - + diff --git a/widget/notif.tsx b/widget/notif.tsx new file mode 100644 index 0000000..591e741 --- /dev/null +++ b/widget/notif.tsx @@ -0,0 +1,105 @@ +import { bind } from "astal" +import { Astal, Gtk, Widget } from "astal/gtk3" +import Notif from "gi://AstalNotifd" +import Pango from "gi://Pango?version=1.0" +const notifs = Notif.get_default() + +const { TOP, RIGHT } = Astal.WindowAnchor +const notifPlaceholder = "/home/protoshark/.config/ags/assets/notif.svg" +let notifWindow: Widget.Window + +function NewNotif(notif: Notif.Notification) { + return + + + + + + + +} + +function notify(notif: Notif.Notification) { + let thisNotif = NewNotif(notif) + if (notifWindow) { + let os = notifWindow.get_child().overlays + let top = 12 + for (let i = os.length-1; i > 0; i--) { + top += thisNotif.get_preferred_height()[0] - 40 + if (os[i].get_preferred_width()[0] >= 352) { + os[i].css = `margin-top: ${top}px;` + } + } + notifWindow.get_child().add_overlay(thisNotif) + notifWindow.get_child().get_child().heightRequest = os[1].get_preferred_height()[0] + thisNotif.get_preferred_height()[0] + } else { + notifWindow = + + + + + } + setTimeout(() => { + let os = notifWindow.get_child().overlays + thisNotif.css = `margin-right: -352px; margin-top: ${thisNotif.get_preferred_height()[0]-thisNotif.get_child().get_preferred_height()[0]-52}px; transition: cubic-bezier(0.64, 0, 0.78, 0) 0.3s;` + setTimeout(() => { + let os = notifWindow.get_child().overlays + notifWindow.get_child().remove(thisNotif) + if (os.length < 3) { + notifWindow.destroy() + notifWindow = null + } + }, 400) + }, 3000) +} + +function notifCount() { + return +} + +export default function notifWidget() { + return +}