✨ eww: better user experience with volume menu and control center

eww/scripts/workspaces.sh

@@ -5,8 +5,7 @@ print_workspaces_literal() {
     existing_workspaces=$(hyprctl -j workspaces | jq .[].id | xargs)
 
     output="
-        (box :class \"workspaces\"
-             :space-evenly false
+        (box :space-evenly false
              :orientation \"horizontal\""
 
     for i in {1..10}; do

eww/styles/bar.scss

@@ -38,7 +38,7 @@
     padding: 2px 0px;
     border-radius: 50%;
 
-    & > button {
+    & button {
         $padding-block: 5px;
 
         border-radius: 16px;

eww/styles/control-center.scss

@@ -136,11 +136,14 @@ box.cc {
             & > box {
                 background: darken($color: $color2, $amount: 15);
             }
+            &:checked > box {
+                background: $color3;
+            }
         }
 
         &:checked {
             & > box {
-                background: darken($color: $color3, $amount: 12);
+                background: darken($color: $color3, $amount: 5);
             }
         }
 
@@ -155,14 +158,26 @@ box.cc {
             margin-left: -16px; // This covers the checkbox space, hiding the check thing
 
             .icon {
-                font-size: 14px;
+                font-size: 15px;
                 padding-right: 5px;
             }
 
             .label {
-                font-size: 12px;
+                font-size: 12.6px;
                 font-weight: 600;
             }
         }
     }
+
+    & .network {
+        .icon {
+            margin-right: 5px;
+        }
+    }
+
+    & .dnd {
+        .icon {
+            margin-right: 4px;
+        }
+    }
 }

eww/styles/general.scss

@@ -62,19 +62,19 @@ box.vertical.button-row {
 }
 
 button,
-.button {
+.button > box {
     padding: 6px 10px;
     border-radius: 12px;
     background: none;
 }
 
 button:hover,
-.button:hover {
+.button:hover > box {
     background: darken($color: $color2, $amount: 5);
 }
 
 button:active,
-.button:active {
+.button:active > box {
     background: darken($color: $color3, $amount: 10);
 }
 

eww/styles/volume-control.scss

@@ -5,7 +5,7 @@
     border-radius: 16px;
 
     trough {
-        background: rgba(lighten($color: $background, $amount: 8), .4);
+        background: rgba(lighten($color: $background, $amount: 25), .5);
         border-radius: 6px;
     }
 

eww/widgets/bar/workspaces.yuck

@@ -1,6 +1,12 @@
+(defvar hover_workspaces false)
 
 (defwidget workspaces [] 
   (eventbox :onscroll "[[ {} == up ]] && hyprctl dispatch workspace e+1 >> /dev/null || hyprctl dispatch workspace e-1 >> /dev/null"
+            :class "workspaces-eventbox"
+            :onhover "${EWW_CMD} update hover_workspaces=true"
+            :onhoverlost "${EWW_CMD} update hover_workspaces=false"
+    (box :class "workspaces"
       (literal :content literal_workspaces)
     )
   )
+)

eww/widgets/big-media.yuck

@@ -2,7 +2,7 @@
     (box :class "big-media ${ show-album-bg ? 'album-bg' : '' } ${ show-album-image ? 'album-image' : '' }"
          :style "${ show-album-bg ? 'background-image: image(url(\"${json_media.artUrl}\"))' : '' } ${ 
                   style-background-color != '' ? 'background-color: ${style-background-color}' : '' }"
-         :visible { visible ? true : false}
+         :visible { visible == "" ? true : "${ visible ? true : false }" }
          :space-evenly false
          :orientation "vertical"
 

eww/widgets/control-center/toggles.yuck

@@ -21,7 +21,8 @@
                :enabled { notification_modes =~ "dnd" ? true : false }
                :onenable "makoctl mode -a dnd"
                :ondisable "makoctl mode -r dnd"
-               :visible true)
+               :visible true
+               :class "dnd")
     )
     (box :class "toggles toggles2"
          :visible false
@@ -39,7 +40,7 @@
   (checkbox :onchecked "${onenable}"
             :onunchecked "${ondisable}"
             :checked { enabled == true ? true : false }
-            :class "toggle-checkbox"
+            :class "toggle-checkbox ${class}"
 
     (box :class "toggle"
          :space-evenly false

eww/widgets/volume-control/output-slider.yuck

@@ -9,7 +9,8 @@
                    :orientation "horizontal"
                    :draw-value false
                    :flipped false
-                   :onchange "wpctl set-volume @DEFAULT_AUDIO_SINK@ $(awk -v n={} 'BEGIN { print (n / 100) }')")
+                   :onchange "wpctl set-volume @DEFAULT_AUDIO_SINK@ $(awk -v n={} 'BEGIN { print (n / 100) }')"
+                   :tooltip "${json_volume.output}")
 
             (label :text "󰕾"
                    :xalign 0)

eww/widgets/volume-control/source-slider.yuck

@@ -10,7 +10,8 @@
                    :draw-value false
                    :flipped false
                    :onchange "wpctl set-volume @DEFAULT_AUDIO_SOURCE@ $(awk -v n={} 'BEGIN { print (n / 100) }')"
-                   :class "output-volume-slider")
+                   :class "output-volume-slider"
+                   :tooltip "${json_volume.source}")
 
             (label :text "󰍬"
                    :xalign 0)