From 0241c611341d8341b372ba2c099c87b011034365 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Thu, 8 Jun 2023 01:26:21 -0400 Subject: [PATCH] feat: switch from mako to swaync and add eww widget to waybar --- eww/scripts/notif.sh | 25 +++ eww/traybuttons/traybuttons.scss | 11 +- eww/traybuttons/traybuttons.yuck | 31 ++- eww/variables.yuck | 2 + hypr/hyprland.conf | 3 +- hypr/hyprpaper.conf | 2 + mako/config | 24 -- swaync/config.json | 78 +++++++ swaync/style.css | 361 +++++++++++++++++++++++++++++++ waybar/config | 12 +- waybar/style.css | 6 + 11 files changed, 523 insertions(+), 32 deletions(-) create mode 100755 eww/scripts/notif.sh create mode 100644 hypr/hyprpaper.conf delete mode 100644 mako/config create mode 100644 swaync/config.json create mode 100644 swaync/style.css diff --git a/eww/scripts/notif.sh b/eww/scripts/notif.sh new file mode 100755 index 00000000..4a0ee8a2 --- /dev/null +++ b/eww/scripts/notif.sh @@ -0,0 +1,25 @@ +#!/bin/bash + +state () { + if [[ $(hyprctl layers | grep swaync-control-center) == "" ]]; then + eww update notif-panel-state=false + fi +} + +icon () { + local COUNT=$(swaync-client -c) + + if [[ $(swaync-client -D) == "true" ]]; then + echo " 󱏨" + elif [[ $COUNT == "0" ]]; then + echo "$COUNT 󰂜" + else + echo "$COUNT 󰂚" + fi + state +} + +if [[ $1 == "icon" ]]; then + icon +fi + diff --git a/eww/traybuttons/traybuttons.scss b/eww/traybuttons/traybuttons.scss index caab83db..4d9bf519 100644 --- a/eww/traybuttons/traybuttons.scss +++ b/eww/traybuttons/traybuttons.scss @@ -11,7 +11,6 @@ background-color: $bg; transition: border-color 0.5s ease-in-out; color: #CBA6F7; - font-size: 26px; border-radius: 80px; border: 3px solid $contrastbg; padding: 0px 6px 0px 12px; @@ -22,10 +21,18 @@ background-color: $bg; transition: border-color 0.5s ease-in-out; color: #CBA6F7; - font-size: 26px; border-radius: 80px; border: 3px solid #CBA6F7; padding: 0px 6px 0px 12px; /* Add any other styles for the "on" state */ } +.notif-panel { + min-width: 110px; + min-height: 40px; + font-size: 22px; +} + +.tablet-toggle { + font-size: 26px; +} diff --git a/eww/traybuttons/traybuttons.yuck b/eww/traybuttons/traybuttons.yuck index 0cd8dccf..b5dac651 100644 --- a/eww/traybuttons/traybuttons.yuck +++ b/eww/traybuttons/traybuttons.yuck @@ -1,7 +1,8 @@ (defvar toggle-state false) (defwidget tablet-toggle [] - (button :onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" : + (button :class "tablet-toggle" + :onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" : "$HOME/.config/hypr/scripts/tablet/tablet-mode.sh &"} (box :class {toggle-state ? "toggle-on" : "toggle-off"} :space-evenly true @@ -23,3 +24,31 @@ ) (tablet-toggle) ) + +(defvar notif-panel-state false) + +(defwidget notif-panel [] + (button :class "notif-panel" + :onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" : + "swaync-client -op; eww update notif-panel-state=true"} + (box :class {notif-panel-state ? "toggle-on" : "toggle-off"} + :space-evenly true + :spacing 6 + :orientation "h" + (label :text " ${notif_icon} ") + ) + ) +) + +(defwindow notif-panel + :monitor 0 + :stacking "overlay" + :exclusive "ignore" + :geometry (geometry :x "60px" + :y "8px" + :width "0px" + :height "0px" + :anchor "top right" + ) + (notif-panel) +) diff --git a/eww/variables.yuck b/eww/variables.yuck index 857d70bd..ca1067ef 100644 --- a/eww/variables.yuck +++ b/eww/variables.yuck @@ -44,3 +44,5 @@ (defpoll ram :interval "3s" "~/.config/eww/scripts/ram.sh ram") (defpoll temp :interval "3s" "~/.config/eww/scripts/temp.sh get") (defpoll disk :interval "3s" "~/.config/eww/scripts/disk.sh") + +(defpoll notif_icon :interval "1s" "~/.config/eww/scripts/notif.sh icon") diff --git a/hypr/hyprland.conf b/hypr/hyprland.conf index 03adfb6e..955cf732 100644 --- a/hypr/hyprland.conf +++ b/hypr/hyprland.conf @@ -17,6 +17,7 @@ exec-once = bash -c "sleep 7; galaxybudsclient /StartMinimized" exec-once = eww daemon exec-once = eww open tablet-toggle +exec-once = eww open notif-panel #exec-once = sudo input-emulator start touch --x-max 1920 --y-max 1200 --slots 4 #exec = $HOME/.config/lisgd/config exec-once = libinput-gestures-setup start @@ -29,7 +30,7 @@ exec-once = hyprpaper exec-once = $scripts/lose-focus.sh exec-once = waybar -exec-once = mako +exec-once = swaync exec-once = /usr/lib/polkit-kde-authentication-agent-1 exec-once = wl-paste --watch cliphist store diff --git a/hypr/hyprpaper.conf b/hypr/hyprpaper.conf new file mode 100644 index 00000000..d37a22fa --- /dev/null +++ b/hypr/hyprpaper.conf @@ -0,0 +1,2 @@ +preload = ~/Pictures/BG/bonzai.jpg +wallpaper = eDP-1, ~/Pictures/BG/bonzai.jpg diff --git a/mako/config b/mako/config deleted file mode 100644 index 5bb4a7e4..00000000 --- a/mako/config +++ /dev/null @@ -1,24 +0,0 @@ -font=UbuntuMono 14 - -anchor=top-right -background-color=#181b23 -text-color=#CBA6F7 -width=500 -height=300 -padding=10 -margin=10 -progress-color=over #eceff480 -icons=1 -icon-path=/usr/share/icons/Arc-X-D -max-icon-size=70 -layer=overlay - -border-size=2 -border-radius=15 -border-color=#45475a - -default-timeout=5000 - -[urgency=high] - -ignore-timeout=1 diff --git a/swaync/config.json b/swaync/config.json new file mode 100644 index 00000000..0c9aa043 --- /dev/null +++ b/swaync/config.json @@ -0,0 +1,78 @@ +{ + "$schema": "/etc/xdg/swaync/configSchema.json", + "positionX": "right", + "positionY": "top", + "layer": "top", + "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, + "timeout": 10, + "timeout-low": 5, + "timeout-critical": 0, + "fit-to-screen": true, + "control-center-width": 500, + "control-center-height": 600, + "notification-window-width": 500, + "keyboard-shortcuts": true, + "image-visibility": "when-available", + "transition-time": 200, + "hide-on-clear": false, + "hide-on-action": true, + "script-fail-notify": true, + "scripts": { + "example-script": { + "exec": "echo 'Do something...'", + "urgency": "Normal" + }, + "example-action-script": { + "exec": "echo 'Do something actionable!'", + "urgency": "Normal", + "run-on": "action" + } + }, + "notification-visibility": { + "example-name": { + "state": "muted", + "urgency": "Low", + "app-name": "Spotify" + } + }, + "widgets": [ + "inhibitors", + "title", + "dnd", + "notifications" + ], + "widget-config": { + "inhibitors": { + "text": "Inhibitors", + "button-text": "Clear All", + "clear-all-button": true + }, + "title": { + "text": "Notifications", + "clear-all-button": true, + "button-text": "Clear All" + }, + "dnd": { + "text": "Do Not Disturb" + }, + "label": { + "max-lines": 5, + "text": "Label Text" + }, + "mpris": { + "image-size": 96, + "image-radius": 12 + } + } +} diff --git a/swaync/style.css b/swaync/style.css new file mode 100644 index 00000000..c9e93b37 --- /dev/null +++ b/swaync/style.css @@ -0,0 +1,361 @@ +/* + * vim: ft=less + */ + +@define-color cc-bg rgba(0, 0, 0, 0.7); + +@define-color noti-border-color rgba(255, 255, 255, 0.15); +@define-color noti-bg rgb(48, 48, 48); +@define-color noti-bg-darker rgb(38, 38, 38); +@define-color noti-bg-hover rgb(56, 56, 56); +@define-color noti-bg-focus rgba(68, 68, 68, 0.6); +@define-color noti-close-bg rgba(255, 255, 255, 0.1); +@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15); + +@define-color text-color rgb(255, 255, 255); +@define-color text-color-disabled rgb(150, 150, 150); + +@define-color bg-selected rgb(0, 128, 255); + +.notification-row { + outline: none; +} + +.notification-row:focus, +.notification-row:hover { + background: @noti-bg-focus; +} + +.notification { + border-radius: 12px; + margin: 6px 12px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), + 0 2px 6px 2px rgba(0, 0, 0, 0.3); + padding: 0; +} + +/* Uncomment to enable specific urgency colors +.low { + background: yellow; + padding: 6px; + border-radius: 12px; +} + +.normal { + background: green; + padding: 6px; + border-radius: 12px; +} + +.critical { + background: red; + padding: 6px; + border-radius: 12px; +} +*/ + +.notification-content { + background: transparent; + padding: 6px; + border-radius: 12px; +} + +.close-button { + background: @noti-close-bg; + color: @text-color; + text-shadow: none; + padding: 0; + border-radius: 100%; + margin-top: 10px; + margin-right: 16px; + box-shadow: none; + border: none; + min-width: 24px; + min-height: 24px; +} + +.close-button:hover { + box-shadow: none; + background: @noti-close-bg-hover; + transition: all 0.15s ease-in-out; + border: none; +} + +.notification-default-action, +.notification-action { + padding: 4px; + margin: 0; + box-shadow: none; + background: @noti-bg; + border: 1px solid @noti-border-color; + color: @text-color; + transition: all 0.15s ease-in-out; +} + +.notification-default-action:hover, +.notification-action:hover { + -gtk-icon-effect: none; + background: @noti-bg-hover; +} + +.notification-default-action { + border-radius: 12px; +} + +/* When alternative actions are visible */ +.notification-default-action:not(:only-child) { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.notification-action { + border-radius: 0px; + border-top: none; + border-right: none; +} + +/* add bottom border radius to eliminate clipping */ +.notification-action:first-child { + border-bottom-left-radius: 10px; +} + +.notification-action:last-child { + border-bottom-right-radius: 10px; + border-right: 1px solid @noti-border-color; +} + +.inline-reply { + margin-top: 8px; +} +.inline-reply-entry { + background: @noti-bg-darker; + color: @text-color; + caret-color: @text-color; + border: 1px solid @noti-border-color; + border-radius: 12px; +} +.inline-reply-button { + margin-left: 4px; + background: @noti-bg; + border: 1px solid @noti-border-color; + border-radius: 12px; + color: @text-color; +} +.inline-reply-button:disabled { + background: initial; + color: @text-color-disabled; + border: 1px solid transparent; +} +.inline-reply-button:hover { + background: @noti-bg-hover; +} + +.image { +} + +.body-image { + margin-top: 6px; + background-color: white; + border-radius: 12px; +} + +.summary { + font-size: 16px; + font-weight: bold; + background: transparent; + color: @text-color; + text-shadow: none; +} + +.time { + font-size: 16px; + font-weight: bold; + background: transparent; + color: @text-color; + text-shadow: none; + margin-right: 18px; +} + +.body { + font-size: 15px; + font-weight: normal; + background: transparent; + color: @text-color; + text-shadow: none; +} + +.control-center { + background: @cc-bg; +} + +.control-center-list { + background: transparent; +} + +.control-center-list-placeholder { + opacity: 0.5; +} + +.floating-notifications { + background: transparent; +} + +/* Window behind control center and on all other monitors */ +.blank-window { + background: alpha(black, 0.25); +} + +/*** Widgets ***/ + +/* Title widget */ +.widget-title { + margin: 8px; + font-size: 1.5rem; +} +.widget-title > button { + font-size: initial; + color: @text-color; + text-shadow: none; + background: @noti-bg; + border: 1px solid @noti-border-color; + box-shadow: none; + border-radius: 12px; +} +.widget-title > button:hover { + background: @noti-bg-hover; +} + +/* DND widget */ +.widget-dnd { + margin: 8px; + font-size: 1.1rem; +} +.widget-dnd > switch { + font-size: initial; + border-radius: 12px; + background: @noti-bg; + border: 1px solid @noti-border-color; + box-shadow: none; +} +.widget-dnd > switch:checked { + background: @bg-selected; +} +.widget-dnd > switch slider { + background: @noti-bg-hover; + border-radius: 12px; +} + +/* Label widget */ +.widget-label { + margin: 8px; +} +.widget-label > label { + font-size: 1.1rem; +} + +/* Mpris widget */ +.widget-mpris { + /* The parent to all players */ +} +.widget-mpris-player { + padding: 8px; + margin: 8px; +} +.widget-mpris-title { + font-weight: bold; + font-size: 1.25rem; +} +.widget-mpris-subtitle { + font-size: 1.1rem; +} + +/* Buttons widget */ +.widget-buttons-grid { + padding: 8px; + margin: 8px; + border-radius: 12px; + background-color: @noti-bg; +} + +.widget-buttons-grid>flowbox>flowboxchild>button{ + background: @noti-bg; + border-radius: 12px; +} + +.widget-buttons-grid>flowbox>flowboxchild>button:hover { + background: @noti-bg-hover; +} + +/* Menubar widget */ +.widget-menubar>box>.menu-button-bar>button { + border: none; + background: transparent; +} + +/* .AnyName { Name defined in config after # + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +.AnyName>button { + background: transparent; + border: none; +} + +.AnyName>button:hover { + background-color: @noti-bg-hover; +} */ + +.topbar-buttons>button { /* Name defined in config after # */ + border: none; + background: transparent; +} + +/* Volume widget */ + +.widget-volume { + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +.widget-volume>box>button { + background: transparent; + border: none; +} + +.per-app-volume { + background-color: @noti-bg-alt; + padding: 4px 8px 8px 8px; + margin: 0px 8px 8px 8px; + border-radius: 12px +} + +/* Backlight widget */ +.widget-backlight { + background-color: @noti-bg; + padding: 8px; + margin: 8px; + border-radius: 12px; +} + +/* Title widget */ +.widget-inhibitors { + margin: 8px; + font-size: 1.5rem; +} +.widget-inhibitors > button { + font-size: initial; + color: @text-color; + text-shadow: none; + background: @noti-bg; + border: 1px solid @noti-border-color; + box-shadow: none; + border-radius: 12px; +} +.widget-inhibitors > button:hover { + background: @noti-bg-hover; +} diff --git a/waybar/config b/waybar/config index 42aa6cac..a580c1a0 100644 --- a/waybar/config +++ b/waybar/config @@ -1,5 +1,4 @@ { - "ipc": true, "height": 20, "margin-top":5, "margin-left":5, @@ -7,7 +6,7 @@ "spacing": 1, "modules-left": ["custom/osk", "custom/tablet", "wlr/workspaces", "tray", "custom/mowayah"], "modules-center": ["hyprland/window"], - "modules-right": ["pulseaudio", "backlight", "battery", "clock", "custom/quicksettings"], + "modules-right": ["pulseaudio", "backlight", "battery", "clock", "custom/notif", "custom/quicksettings"], "sway/mode": { "format": "{}" }, @@ -73,7 +72,7 @@ }, "custom/osk": { "format":" 󰌌 ", - "on-click": "$HOME/.config/sway/scripts/tablet/osk-toggle.sh", + "on-click": "$HOME/.config/hypr/scripts/tablet/osk-toggle.sh", "restart-interval": 1, }, @@ -97,11 +96,16 @@ "default": "" } }, + "custom/tablet": { "format":" 󰦧 ", - //"on-click": "$HOME/.config/sway/scripts/tablet/tablet-toggle.sh", + //"on-click": "$HOME/.config/hypr/scripts/tablet/tablet-toggle.sh", "restart-interval": 1, }, + + "custom/notif": { + "format": " 󰂜 " + }, "custom/mowayah": { "exec": "$HOME/.config/waybar/scripts/heart.sh", diff --git a/waybar/style.css b/waybar/style.css index 53b40ae9..fd8206e0 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -127,3 +127,9 @@ background-color: rgba(0, 0, 0, 0); padding: 0 8px 0 0; } + + #custom-notif { + min-width: 110px; + color: #CBA6F7; + font-size: 26px; + }