added volume bars

modules/ewwbar/eww-config/eww.scss

@@ -2,21 +2,19 @@
 	all: unset; //Unsets everything so you can style everything from scratch
 }
 
+$bkgrnd: rgba(20, 20, 20, 0.9);
+$light_bkgrnd: rgba(60, 60, 60, 0.8);
+
+@import "./modules/center-clock.scss"
+@import "./modules/volume-osd.scss"
+
 //Global Styles
 .bar-main {
-	background-color: rgba(30, 30, 30, 0.9);
+	background-color: $bkgrnd;
     color: #FFFFFF;
 	border-radius: 10;
 	padding-left: 10px;
 	padding-right: 10px;
-
-    // font: 12px;
-
-	// color: #b0b4bc;
-	// margin: 15px;
-	// padding: 10px;
-	// margin-bottom: 0px;
-	// padding-bottom: 0px;
 }
 
 .bar-section {
@@ -28,11 +26,6 @@
 	color: rgba(200, 200, 200, 0.5);
 }
 
-.time {
-	font-weight: bold;
-	padding-right: 20px;
-}
-
 .alert {
 	color: #aa5555;
 	padding: 5px;
@@ -51,9 +44,12 @@
 }
 
 .side-stuff {
-	background-color: rgba(20, 20, 20, 0.9);
+	background-color: $bkgrnd;
     color: #FFFFFF;
 	border-radius: 10;
 	padding-left: 10px;
 	padding-right: 10px;
+    font-size: 1.2rem;
 }
+
+

modules/ewwbar/eww-config/eww.yuck

@@ -1,8 +1,10 @@
 (defwidget bar []
   (centerbox :orientation "h"
     (workspaces :current-idx current-workspace)
-    (music)
+    ;; (music)
-    (info)))
+    (center-clock)
+    (info)
+    ))
 
 (deflisten current-workspace :initial "1" "bash ./scripts/get-active-workspace")
 (defwidget workspaces [current-idx]
@@ -73,9 +75,12 @@
 
 (defvar volume-visible false)
 (defwidget _volume [volume]
+    (eventbox
+        :onscroll "./scripts/volume {} ${EWW_EXECUTABLE}"
+        :onclick "./scripts/volume toggle ${EWW_EXECUTABLE}"
         (box
             :hexpand false
-		:class {volume > 100 ? "alert" : "regular"}
+            :class {(volume ?: 90) > 100 ? "alert" : "regular"}
             (revealer-on-hover
                 :toggle volume-visible
                 :togglename "volume-visible"
@@ -83,7 +88,10 @@
                     volume < 33 ? "󰕿 " :
                         volume < 66 ? "󰖀 " :
                             volume < 99 ? "󰕾 " : "󱄡 "})
-			(label :text "${volume}%"))))
+                (label :text "${volume ?: "??"}%")
+            )
+            (volume_scale)
+        )))
 
 
 (defvar battery-visible false)
@@ -144,19 +152,11 @@
     {music != "" ? "🎵${music}" : ""}))
 
 (defpoll volume :interval "1s"
-  "pw-volume status | jq '.percentage'")
+    {"pw-volume status | jq '.percentage // -1'" ?: 500})
 
-(defpoll time :interval "10s"
+(include "windows.yuck")
-  "date '+%H:%M %b %d, %Y'")
+(include "./modules/center-clock.yuck")
 
-(defwindow bar
+(defvar open_vol_osd false)
-  :monitor 1
+(defvar ANIM_DURATION "500ms")
-  :exclusive true
+(include "./modules/volume-osd.yuck")
-  :windowtype "dock"
-  :geometry (geometry :x "0%"
-                      :y "0%"
-                      :width "90%"
-                      :height "10px"
-                      :anchor "top center")
-  :reserve (struts :side "top" :distance "4%")
-  (bar))

modules/ewwbar/eww-config/modules/center-clock.scss

@@ -0,0 +1,8 @@
+.center-clock {
+    border-radius: 15;
+	background-color: rgba(20, 20, 20, 0.9);
+    color: rgba(200, 200, 200, 1.0);
+    padding-left: 20px;
+    padding-right: 20px;
+    font-size: 1.2rem;
+}

modules/ewwbar/eww-config/modules/center-clock.yuck

@@ -0,0 +1,7 @@
+
+(defwidget center-clock []
+(label :class "center-clock"
+        :orientation "h"
+        :halign "center"
+       :text {formattime(EWW_TIME, "%H:%M")})
+)

modules/ewwbar/eww-config/modules/volume-osd.scss

@@ -0,0 +1,32 @@
+.volume-osd {
+    min-width: 25rem;
+    margin-top: 20px;
+    padding: 5px;
+    border-radius: 0.3rem;
+    background-color: $light_bkgrnd;
+}
+
+.volume-scale trough {
+    background-color: rgba(74, 139, 173, 1);
+    border-radius: 0.2rem;
+    min-height: 0.4rem;
+}
+
+.volume-scale trough highlight {
+    background-color: rgba(163, 255, 180, 1);
+    border-radius: 0.2rem;
+    min-height: 0.4rem;
+}
+
+.volume-icon {
+    margin-left: 0.75rem;
+    font-size: 1.5rem;
+
+    &.less {
+        color: rgba(150, 0, 0, 1);
+    };
+
+    &.more {
+        color: rgba(0, 150, 0, 1);
+    };
+}

modules/ewwbar/eww-config/modules/volume-osd.yuck

@@ -0,0 +1,25 @@
+(defwindow vol_osd
+    :monitor 1 
+    :exclusive: false
+    :stacking "overlay" 
+    :geometry (geometry :anchor "top center")
+    (volume_osd))
+
+(defwidget volume_osd []
+    (revealer :transition "slidedown" 
+              :reveal {open_vol_osd == true ? true : false} 
+              :duration { ANIM_DURATION }
+        (box :orientation "h"
+             :class "volume-osd"
+             :space-evenly false
+             (volume_scale))))
+
+(defwidget volume_scale []
+    (overlay :hexpand true 
+        (scale :min 0 
+                :max 100
+                :active {volume != -1}
+                :value {volume == "-1" ? 0 : volume}
+                :class "volume-scale")))
+
+

modules/ewwbar/eww-config/scripts/volume

@@ -0,0 +1,12 @@
+#!/bin/sh 
+
+case $1 in
+    "*") command="";;
+    "up") command="change +4%";;
+    "down") command="change -4%";;
+    "toggle") command="mute toggle";;
+esac
+
+[ -n "$command" ] && pw-volume $command
+
+$2 update volume=$(pw-volume status | jq '.percentage // 10')

modules/ewwbar/eww-config/windows.yuck

@@ -0,0 +1,12 @@
+
+(defwindow bar
+  :monitor 1
+  :exclusive true
+  :windowtype "dock"
+  :geometry (geometry :x "0%"
+                      :y "0%"
+                      :width "90%"
+                      :height "10px"
+                      :anchor "top center")
+  :reserve (struts :side "top" :distance "4%")
+  (bar))

modules/hyprland/keybinds.nix

@@ -1,4 +1,4 @@
-{lib, ...}:
+{lib, pkgs, ...}:
 
 let 
   workspaces =
@@ -20,7 +20,23 @@ in
       "$mod ALT, mouse:272, resizewindow"
     ];
 
+    # binde, will repeat when held
+    #https://wiki.hyprland.org/Configuring/Binds/#bind-flags
+    binde = [
+      ",XF86AudioRaiseVolume, exec, pw-volume change +1%; ${pkgs.eww}/bin/eww update volume=$(pw-volume status | jq '.percentage // 10')"
+      ",XF86AudioLowerVolume, exec, pw-volume change -1%; ${pkgs.eww}/bin/eww update volume=$(pw-volume status | jq '.percentage // 10')"
+    ];
+
+    # listen even when locked
+    bindl = [
+      ",XF86AudioPlay, exec, playerctl play-pause"
+      ",XF86AudioNext, exec, playerctl next"
+      ",XF86AudioNext, exec, playerctl previous"
+    ];
+
     bind = [
+      ",XF86AudioMute, exec, pw-volume mute toggle"
+
       "$mod, RETURN, exec, kitty"
       "$mod, r, exec, rofi -show run window"
       "$mod, q, killactive"