treewide: implement notifications with swaync

Implemented notifications with SwayNotificationCenter, as well as theming using
the custom theme module. Some Waybar code had to be updated too, and was
also simplified in order to be more consistent with the new
SwayNotificationCenter implementation.
This commit is contained in:
Anthony Rodriguez 2024-11-26 15:47:10 +01:00
parent 75728e1b81
commit 84c8dc0920
Signed by: nezia
GPG key ID: EE3BE97C040A86CE
7 changed files with 735 additions and 230 deletions

View file

@ -1,17 +1,25 @@
{ {
osConfig,
pkgs, pkgs,
lib, lib,
lib',
osConfig,
config,
... ...
}: let }: let
inherit (lib) getExe; inherit (lib) getExe mkMerge mkIf optionalString;
inherit (lib') generateGtkColors;
inherit (osConfig.theme.scheme) palette;
inherit (builtins) readFile;
in { in {
imports = [./style.nix];
programs.waybar = { programs.waybar = {
enable = true; enable = true;
systemd.enable = true; systemd.enable = true;
style =
optionalString osConfig.theme.enable generateGtkColors lib palette
+ readFile ./style.css;
settings = { settings = {
mainBar = { mainBar = mkMerge [
{
layer = "top"; layer = "top";
position = "top"; position = "top";
height = 30; height = 30;
@ -23,7 +31,9 @@ in {
modules-left = ["niri/workspaces" "niri/window"]; modules-left = ["niri/workspaces" "niri/window"];
modules-center = ["group/clock"]; modules-center = ["group/clock"];
modules-right = ["tray" "group/status" "group/power"]; modules-right =
["tray" "group/status" "group/power"]
++ lib.optional config.services.swaync.enable "custom/notification";
battery = { battery = {
interval = 10; interval = 10;
@ -44,10 +54,6 @@ in {
max-length = 25; max-length = 25;
}; };
"niri/window" = {
icon = true;
};
"pulseaudio" = { "pulseaudio" = {
format = "{icon} {volume}%"; format = "{icon} {volume}%";
format-bluetooth = "{icon} {volume}%"; format-bluetooth = "{icon} {volume}%";
@ -146,7 +152,28 @@ in {
"󰤨" "󰤨"
]; ];
}; };
}
(mkIf osConfig.programs.niri.enable {
"niri/window" = {
icon = true;
}; };
})
(mkIf config.services.swaync.enable {
"custom/notification" = {
tooltip = false;
format = "{icon}";
format-icons = {
notification = "󱅫";
none = "󰂚";
dnd-notification = "󱏧";
dnd-none = "󱏧";
};
return-type = "json";
exec = "swaync-client -swb";
on-click = "swaync-client -t -sw";
};
})
];
}; };
}; };

View file

@ -0,0 +1,91 @@
* {
/* `otf-font-awesome` is required to be installed for icons */
border: none;
border-radius: 0px;
min-height: 0;
}
window#waybar {
border-radius: 2em;
font-family: "Symbols Nerd Font", Inter, sans-serif;
font-size: 16px;
font-style: normal;
background: alpha(
@base00,
0.9999999
); /* niri issue workaround, thanks https://github.com/oatmealine/nix-config/blob/bfdddd2cb36ef659bcddc28e0dbb542b6db8b3bc/modules/desktop/themes/catppuccin/waybar.css#L14 */
color: @base05;
}
#workspaces,
.modules-right box {
background: @base02;
padding: 0.15em 0.25em;
border-radius: 1em;
margin: 0 0.25em;
}
#workspaces {
padding: 0;
background: @base02;
}
#workspaces button:nth-child(1) {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
#workspaces button:nth-last-child(1) {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
#workspaces button {
padding: 0 0.5em;
background-color: transparent;
}
#workspaces button:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: none;
}
#workspaces button.active {
background: @base0E;
color: @base02;
}
#workspaces button.urgent {
background: @base08;
}
#window {
margin-left: 1em;
}
.modules-left,
.modules-right {
margin: 0.4em 0.5em;
}
#battery,
#clock,
#network,
#pulseaudio,
#tray,
#power-profiles-daemon {
padding: 0 0.5em;
}
.modules-left,
.modules-right {
margin: 0.4em 0.5em;
}
#custom-power {
padding: 0 1.2em;
color: @base08;
}
#custom-notification {
padding: 0 1.2em;
}

View file

@ -1,106 +0,0 @@
{
lib,
osConfig,
...
}: let
inherit (osConfig.theme.scheme) palette;
inherit (lib) mapAttrsToList concatLines optionalString;
generateGtkColors = palette: (concatLines
(mapAttrsToList
(name: color: "@define-color ${name} ${color};")
palette));
in {
programs.waybar.style =
optionalString osConfig.theme.enable generateGtkColors palette
+ ''
* {
/* `otf-font-awesome` is required to be installed for icons */
border: none;
border-radius: 0px;
min-height: 0;
}
window#waybar {
border-radius: 2em;
font-family: "Symbols Nerd Font", Inter, sans-serif;
font-size: 16px;
font-style: normal;
background: alpha(
@base00,
0.9999999
); /* niri issue workaround, thanks https://github.com/oatmealine/nix-config/blob/bfdddd2cb36ef659bcddc28e0dbb542b6db8b3bc/modules/desktop/themes/catppuccin/waybar.css#L14 */
color: @base05;
}
#workspaces,
.modules-right box {
background: @base02;
padding: 0.15em 0.25em;
border-radius: 1em;
margin: 0 0.25em;
}
#workspaces {
padding: 0;
background: @base02;
}
#workspaces button:nth-child(1) {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
#workspaces button:nth-last-child(1) {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
#workspaces button {
padding: 0 0.5em;
background-color: transparent;
}
#workspaces button:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: none;
}
#workspaces button.active {
background: @base0E;
color: @base02;
}
#workspaces button.urgent {
background: @base08;
}
#window {
margin-left: 1em;
}
.modules-left,
.modules-right {
margin: 0.4em 0.5em;
}
#battery,
#clock,
#network,
#pulseaudio,
#tray,
#power-profiles-daemon {
padding: 0 0.5em;
}
.modules-left,
.modules-right {
margin: 0.4em 0.5em;
}
#custom-power {
padding: 0 1.2em;
color: @base08;
}
'';
}

View file

@ -0,0 +1,37 @@
{
osConfig,
lib,
lib',
...
}: let
inherit (lib) optionalString;
inherit (lib') generateGtkColors;
inherit (osConfig.theme.scheme) palette;
inherit (builtins) readFile;
in {
services.swaync = {
enable = true;
style =
optionalString osConfig.theme.enable generateGtkColors lib palette
+ readFile ./style.css;
settings = {
positionX = "right";
positionY = "top";
layer = "overlay";
control-center-layer = "top";
layer-shell = true;
cssPriority = "application";
control-center-margin-top = 0;
control-center-margin-bottom = 0;
control-center-margin-right = 0;
control-center-margin-left = 0;
notification-2fa-action = true;
notification-inline-replies = false;
notification-icon-size = 64;
notification-body-image-height = 100;
notification-body-image-width = 200;
};
};
# systemd.user.services.swaync.Service.Environment = "WAYLAND_DISPLAY=wayland-1";
systemd.user.services.swaync.Unit.ConditionEnvironment = lib.mkForce "";
}

View file

@ -0,0 +1,450 @@
* {
all: unset;
font-size: 14px;
font-family: "Ubuntu Nerd Font";
transition:
background 200ms,
border-radius 200ms; /* exclude color from transition so it looks more natural */
}
trough highlight {
background: @base05;
}
scale trough {
margin: 0rem 1rem;
background-color: @base02;
min-height: 8px;
min-width: 70px;
}
slider {
background-color: @base0D;
}
.floating-notifications.background .notification-row .notification-background {
box-shadow:
0 0 8px 0 rgba(0, 0, 0, 0.8),
inset 0 0 0 1px @base02;
border-radius: 12.6px;
margin: 18px;
background-color: @base00;
color: @base05;
padding: 0;
}
.floating-notifications.background
.notification-row
.notification-background
.notification {
padding: 7px;
border-radius: 12.6px;
}
.floating-notifications.background
.notification-row
.notification-background
.notification.critical {
box-shadow: inset 0 0 7px 0 @base08;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content {
margin: 7px;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content
.summary {
color: @base05;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content
.time {
color: @base03;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
.notification-content
.body {
color: @base05;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> * {
min-height: 3.4em;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action {
border-radius: 7px;
color: @base05;
background-color: @base02;
box-shadow: inset 0 0 0 1px @base03;
margin: 7px;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:hover {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base02;
color: @base05;
}
.floating-notifications.background
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:active {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base0C;
color: @base05;
}
.floating-notifications.background
.notification-row
.notification-background
.close-button {
margin: 7px;
padding: 2px;
border-radius: 6.3px;
color: @base00;
background-color: @base08;
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:hover {
background-color: @base08;
color: @base00;
}
.floating-notifications.background
.notification-row
.notification-background
.close-button:active {
background-color: @base08;
color: @base00;
}
.control-center {
box-shadow:
0 0 8px 0 rgba(0, 0, 0, 0.8),
inset 0 0 0 1px @base02;
border-radius: 12.6px;
margin: 18px;
background-color: @base00;
color: @base05;
padding: 14px;
}
.control-center .widget-title > label {
color: @base05;
font-size: 1.3em;
}
.control-center .widget-title button {
border-radius: 7px;
color: @base05;
background-color: @base02;
box-shadow: inset 0 0 0 1px @base03;
padding: 8px;
}
.control-center .widget-title button:hover {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base04;
color: @base05;
}
.control-center .widget-title button:active {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base0C;
color: @base00;
}
.control-center .notification-row .notification-background {
border-radius: 7px;
color: @base05;
background-color: @base02;
box-shadow: inset 0 0 0 1px @base03;
margin-top: 14px;
}
.control-center .notification-row .notification-background .notification {
padding: 7px;
border-radius: 7px;
}
.control-center
.notification-row
.notification-background
.notification.critical {
box-shadow: inset 0 0 7px 0 @base08;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content {
margin: 7px;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content
.summary {
color: @base05;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content
.time {
color: @base03;
}
.control-center
.notification-row
.notification-background
.notification
.notification-content
.body {
color: @base05;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> * {
min-height: 3.4em;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action {
border-radius: 7px;
color: @base05;
background-color: @base00;
box-shadow: inset 0 0 0 1px @base03;
margin: 7px;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:hover {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base02;
color: @base05;
}
.control-center
.notification-row
.notification-background
.notification
> *:last-child
> *
.notification-action:active {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base0C;
color: @base05;
}
.control-center .notification-row .notification-background .close-button {
margin: 7px;
padding: 2px;
border-radius: 6.3px;
color: @base00;
background-color: @base08;
}
.control-center .notification-row .notification-background .close-button:hover {
background-color: @base08;
color: @base00;
}
.control-center
.notification-row
.notification-background
.close-button:active {
background-color: @base08;
color: @base00;
}
.control-center .notification-row .notification-background:hover {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base04;
color: @base05;
}
.control-center .notification-row .notification-background:active {
box-shadow: inset 0 0 0 1px @base03;
background-color: @base0C;
color: @base05;
}
.notification.critical progress {
background-color: @base08;
}
.notification.low progress,
.notification.normal progress {
background-color: @base0D;
}
.control-center-dnd {
margin-top: 5px;
border-radius: 8px;
background: @base02;
border: 1px solid @base03;
box-shadow: none;
}
.control-center-dnd:checked {
background: @base0C;
}
.control-center-dnd slider {
background: @base0C;
border-radius: 8px;
}
.widget-dnd {
margin: 0px;
font-size: 1.1rem;
}
.widget-dnd > switch {
font-size: initial;
border-radius: 8px;
background: @base02;
border: 1px solid @base03;
box-shadow: none;
}
.widget-dnd > switch:checked {
background: @base0C;
color: @base00;
}
.widget-dnd > switch slider {
background: @base03;
border-radius: 8px;
border: 1px solid @base03;
}
.widget-mpris .widget-mpris-player {
background: @base02;
padding: 7px;
}
.widget-mpris .widget-mpris-title {
font-size: 1.2rem;
}
.widget-mpris .widget-mpris-subtitle {
font-size: 0.8rem;
}
.widget-menubar > box > .menu-button-bar > button > label {
font-size: 3rem;
padding: 0.5rem 2rem;
}
.widget-menubar > box > .menu-button-bar > :last-child {
color: @base08;
}
.power-buttons button:hover,
.powermode-buttons button:hover,
.screenshot-buttons button:hover {
background: @base02;
}
.control-center .widget-label > label {
color: @base05;
font-size: 2rem;
}
.widget-buttons-grid {
padding-top: 1rem;
}
.widget-buttons-grid > flowbox > flowboxchild > button label {
font-size: 2.5rem;
}
.widget-volume {
padding-top: 1rem;
}
.widget-volume label {
font-size: 1.5rem;
color: @base0C;
}
.widget-volume trough highlight {
background: @base0C;
}
.widget-backlight trough highlight {
background: @base0A;
}
.widget-backlight label {
font-size: 1.5rem;
color: @base0A;
}
.widget-backlight .KB {
padding-bottom: 1rem;
}
.image {
padding-right: 0.5rem;
}

View file

@ -35,6 +35,7 @@ in {
"${home}/programs/niri" "${home}/programs/niri"
"${home}/programs/waybar" "${home}/programs/waybar"
"${home}/services/swaync"
"${home}/programs/fuzzel.nix" "${home}/programs/fuzzel.nix"
"${home}/programs/swaybg.nix" "${home}/programs/swaybg.nix"
"${home}/programs/swaylock.nix" "${home}/programs/swaylock.nix"

View file

@ -50,6 +50,11 @@ let
'' ''
magick ${path} -gaussian-blur 0x12 "$out" magick ${path} -gaussian-blur 0x12 "$out"
''; '';
generateGtkColors = lib: palette: (lib.concatLines
(lib.mapAttrsToList
(name: color: "@define-color ${name} ${color};")
palette));
in { in {
inherit blurImage rgba; inherit blurImage generateGtkColors rgba;
} }