From ed05e9af2515c3c1c09becae5b405fc5074aa5e9 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Thu, 16 Jan 2025 18:47:23 +1100 Subject: notifications: make popup window --- app.tsx | 2 + scss/_lib.scss | 2 +- scss/bar.scss | 2 +- scss/notifications.scss | 101 ++++++++++++++++++++++++++++++++++++++++++ scss/notifpopups.scss | 84 +++++------------------------------ scss/widgets.scss | 78 ++++++++++++++++++++++++++++++-- src/modules/bar.tsx | 77 +++++++++++++++++--------------- src/modules/notifications.tsx | 84 +++++++++++++++++++++-------------- src/modules/notifpopups.tsx | 10 ++++- src/widgets/notification.tsx | 11 +++-- src/widgets/popupwindow.ts | 5 ++- style.scss | 1 + 12 files changed, 302 insertions(+), 155 deletions(-) create mode 100644 scss/notifications.scss diff --git a/app.tsx b/app.tsx index 31e7ed1..708532f 100644 --- a/app.tsx +++ b/app.tsx @@ -2,6 +2,7 @@ import { execAsync, GLib, writeFileAsync } from "astal"; import { App } from "astal/gtk3"; import Bar from "./src/modules/bar"; import Launcher from "./src/modules/launcher"; +import Notifications from "./src/modules/notifications"; import NotifPopups from "./src/modules/notifpopups"; import Osds from "./src/modules/osds"; import Monitors from "./src/services/monitors"; @@ -24,6 +25,7 @@ App.start({ ; ; Monitors.get_default().forEach(m => ); + ; console.log("Caelestia started"); }, diff --git a/scss/_lib.scss b/scss/_lib.scss index e12140f..d2ad3d0 100644 --- a/scss/_lib.scss +++ b/scss/_lib.scss @@ -15,7 +15,7 @@ $scale: 0.068rem; border: s($width) $style color.change($colour, $alpha: $alpha); } -@mixin shadow($colour: scheme.$mantle, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) { +@mixin shadow($colour: black, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) { box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha); } diff --git a/scss/bar.scss b/scss/bar.scss index ab75b00..1d73319 100644 --- a/scss/bar.scss +++ b/scss/bar.scss @@ -92,7 +92,7 @@ color: scheme.$blue; } - .notifications { + .unread { color: scheme.$mauve; } diff --git a/scss/notifications.scss b/scss/notifications.scss new file mode 100644 index 0000000..51f1a0b --- /dev/null +++ b/scss/notifications.scss @@ -0,0 +1,101 @@ +@use "sass:color"; +@use "scheme"; +@use "lib"; +@use "font"; + +@mixin popup($accent) { + .separator { + background-color: $accent; + } + + .image { + @include lib.border($accent, 0.05); + } +} + +.notifications { + @include lib.rounded(8); + @include lib.border(scheme.$mauve, 0.4, 2); + @include lib.shadow; + + min-width: lib.s(400); + min-height: lib.s(600); + background-color: scheme.$base; + color: scheme.$mauve; + padding: lib.s(10) lib.s(12); + + .header { + @include font.mono; + @include lib.spacing(8); + + padding: 0 lib.s(5); + margin-bottom: lib.s(8); + + button { + @include lib.rounded(5); + @include lib.element-decel; + + padding: lib.s(3) lib.s(8); + + &:hover, + &:focus { + background-color: scheme.$surface0; + } + + &:active { + background-color: scheme.$surface1; + } + + &.enabled { + background-color: scheme.$mauve; + color: scheme.$base; + + &:hover, + &:focus { + background-color: color.mix(scheme.$mauve, scheme.$base, 80%); + } + + &:active { + background-color: color.mix(scheme.$mauve, scheme.$base, 70%); + } + } + } + } + + .notification { + .wrapper { + padding-bottom: lib.s(10); + } + + .inner { + background-color: color.mix(scheme.$surface0, scheme.$base, 70%); + + &.low { + @include popup(scheme.$overlay0); + } + + &.normal { + @include lib.border(scheme.$lavender, 0.3); + @include popup(scheme.$lavender); + } + + &.critical { + @include lib.border(scheme.$red, 0.5); + @include popup(scheme.$red); + } + } + + .actions > * { + background-color: scheme.$surface1; + + &:hover, + &:focus { + background-color: scheme.$surface2; + } + + &:active { + background-color: scheme.$overlay0; + } + } + } +} diff --git a/scss/notifpopups.scss b/scss/notifpopups.scss index 25e52e1..cec24a4 100644 --- a/scss/notifpopups.scss +++ b/scss/notifpopups.scss @@ -21,86 +21,22 @@ min-width: lib.s(410); padding-left: lib.s(10); // So notifications can overshoot for init animation - .wrapper { - padding-top: lib.s(10); - } - .notification { - @include lib.rounded(8, $tr: 0, $br: 0); - @include lib.shadow; - @include font.main; - @include popup(scheme.$lavender); - - background-color: scheme.$base; - color: scheme.$text; - padding: lib.s(10) lib.s(12); - - @include lib.spacing($vertical: true); - - &.low { - @include popup(scheme.$overlay0); - } - - &.critical { - @include popup(scheme.$red); + .wrapper { + padding-top: lib.s(10); } - } - - .header, - .content { - padding: 0 lib.s(5); - } - - .header { - @include font.mono; - @include lib.spacing(5); - } - - .content { - @include lib.spacing(10); - } - - .app-icon { - font-size: lib.s(18); - } - - .image { - @include lib.rounded(10); - - background-size: cover; - background-position: center; - min-width: lib.s(64); - min-height: lib.s(64); - margin-top: lib.s(3); - } - - .summary { - @include font.title; - - font-size: lib.s(16); - } - - .body { - font-size: lib.s(14); - } - - .actions { - @include lib.spacing; - - & > * { - @include lib.rounded(5); - @include lib.element-decel; - padding: lib.s(5) lib.s(10); - background-color: scheme.$surface0; + .inner { + @include lib.rounded(8, $tr: 0, $br: 0); + @include lib.shadow; + @include popup(scheme.$lavender); - &:hover, - &:focus { - background-color: scheme.$surface1; + &.low { + @include popup(scheme.$overlay0); } - &:active { - background-color: scheme.$surface2; + &.critical { + @include popup(scheme.$red); } } } diff --git a/scss/widgets.scss b/scss/widgets.scss index 39ab490..e54a117 100644 --- a/scss/widgets.scss +++ b/scss/widgets.scss @@ -17,6 +17,78 @@ label.icon { @include font.icon; } +.notification { + .inner { + @include lib.rounded(8); + @include font.main; + + background-color: scheme.$base; + color: scheme.$text; + padding: lib.s(10) lib.s(12); + + @include lib.spacing($vertical: true); + } + + .header, + .content { + padding: 0 lib.s(5); + } + + .header { + @include font.mono; + @include lib.spacing(8); + } + + .content { + @include lib.spacing(10); + } + + .app-icon { + font-size: lib.s(18); + } + + .image { + @include lib.rounded(10); + + background-size: cover; + background-position: center; + min-width: lib.s(64); + min-height: lib.s(64); + margin-top: lib.s(3); + } + + .summary { + @include font.title; + + font-size: lib.s(16); + } + + .body { + font-size: lib.s(14); + } + + .actions { + @include lib.spacing; + + & > * { + @include lib.rounded(5); + @include lib.element-decel; + + padding: lib.s(5) lib.s(10); + background-color: scheme.$surface0; + + &:hover, + &:focus { + background-color: scheme.$surface1; + } + + &:active { + background-color: scheme.$surface2; + } + } + } +} + separator, .separator { @include lib.rounded(2); @@ -112,9 +184,6 @@ tooltip { scrollbar { trough { - @include lib.rounded(1000); - - min-width: lib.s(12); background-color: transparent; } @@ -122,12 +191,13 @@ scrollbar { @include lib.rounded(1000); @include lib.element-decel; - min-width: lib.s(6); + min-width: lib.s(3); min-height: lib.s(30); background-color: color.change(scheme.$overlay0, $alpha: 0.3); &:hover, &:focus { + min-width: lib.s(6); background-color: color.change(scheme.$overlay0, $alpha: 0.4); } diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index b56d94a..aeb6e42 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -15,6 +15,7 @@ import { getAppCategoryIcon } from "../utils/icons"; import { ellipsize } from "../utils/strings"; import { osIcon } from "../utils/system"; import { setupCustomTooltip } from "../utils/widgets"; +import type PopupWindow from "../widgets/popupwindow"; const hyprland = AstalHyprland.get_default(); @@ -385,11 +386,19 @@ const PkgUpdates = () => ( ); -const Notifications = () => { +const Unread = () => { const unreadCount = Variable(0); return ( - { + if (event.button === Astal.MouseButton.PRIMARY) { + const popup = App.get_window("notifications") as PopupWindow | null; + if (popup) { + if (popup.visible) popup.hide(); + else popup.popup_at_widget(self, event); + } + } else if (event.button === Astal.MouseButton.SECONDARY) unreadCount.set(0); + }} setup={self => setupCustomTooltip( self, @@ -397,39 +406,37 @@ const Notifications = () => { ) } > - + ); }; @@ -491,7 +498,7 @@ export default ({ monitor }: { monitor: Monitor }) => ( - + diff --git a/src/modules/notifications.tsx b/src/modules/notifications.tsx index 66188a1..ea98ada 100644 --- a/src/modules/notifications.tsx +++ b/src/modules/notifications.tsx @@ -1,6 +1,8 @@ -import { Gtk } from "astal/gtk3"; +import { bind } from "astal"; +import { Astal, Gtk } from "astal/gtk3"; import AstalNotifd from "gi://AstalNotifd"; -import { PopupWindow, setupChildClickthrough } from "../utils/widgets"; +import Notification from "../widgets/notification"; +import PopupWindow from "../widgets/popupwindow"; const List = () => ( ( className="list" setup={self => { const notifd = AstalNotifd.get_default(); - const map = new Map(); - self.hook(notifd, "notified", (self, id) => { - const notification = notifd.get_notification(id); + const map = new Map(); - const popup = () as NotifPopup; - popup.connect("destroy", () => map.get(notification.id) === popup && map.delete(notification.id)); + const addNotification = (notification: AstalNotifd.Notification) => { + const notif = () as Notification; + notif.connect("destroy", () => map.get(notification.id) === notif && map.delete(notification.id)); map.get(notification.id)?.destroyWithAnims(); - map.set(notification.id, popup); + map.set(notification.id, notif); - self.add( + self.pack_end( event.button === Astal.MouseButton.MIDDLE && notification.dismiss()} - // Close on hover lost - onHoverLost={() => popup.destroyWithAnims()} > - {popup} - + {notif} + , + false, + false, + 0 ); + }; - // Limit number of popups - if (config.maxPopups > 0 && self.children.length > config.maxPopups) - map.values().next().value?.destroyWithAnims(); - }); - self.hook(notifd, "resolved", (_, id) => map.get(id)?.destroyWithAnims()); + notifd + .get_notifications() + .sort((a, b) => a.time - b.time) + .forEach(addNotification); - // Change input region to child region so can click through empty space - setupChildClickthrough(self); + self.hook(notifd, "notified", (_, id) => addNotification(notifd.get_notification(id))); + self.hook(notifd, "resolved", (_, id) => map.get(id)?.destroyWithAnims()); }} /> ); -export default class Notifications extends PopupWindow { - constructor() { - super({ - name: "notifications", - child: ( - - - - ), - }); - - setupChildClickthrough(self); - } -} +export default () => ( + + + +