feat: eww vertical slider

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
     "files.associations": {
-        "*.yuck": "clojure"
+        // "*.yuck": "clojure"
     },
 }

hypr-configs/hyprland/eww/assets/scss/_components.scss

@@ -18,3 +18,27 @@
     background-color: $white;
   }
 }
+
+.vertical-bar-slider {
+  scale {
+    all: unset;
+
+    trough {
+      background-color: $surface2;
+      border-radius: get-token(border-radius);
+      min-height: 80px;
+      min-width: 10px;
+
+      slider {
+        background-color: $white2;
+        border-radius: get-token(border-radius, large);
+        margin: -10px;
+      }
+
+      highlight {
+        background-color: $white0;
+        border-radius: get-token(border-radius);
+      }
+    }
+  }
+}

hypr-configs/hyprland/eww/assets/scss/_native.scss

@@ -7,31 +7,6 @@ tooltip {
   border-color: $surface2;
 }
 
-scale {
-  all: unset;
-
-  trough {
-    background-color: $surface2;
-    border-radius: 24px;
-    min-height: 80px;
-    min-width: 10px;
-    margin: 5px;
-
-    slider {
-      background-color: $white2;
-      border-radius: 25px;
-      min-height: 15px;
-      min-width: 15px;
-      margin: -10px;
-    }
-
-    highlight {
-      background-color: $white0;
-      border-radius: 24px;
-    }
-  }
-}
-
 entry {
   padding: 5px;
   margin: 5px;

hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss

@@ -26,7 +26,7 @@ $magenta_dark: #875fd4;
 $cyan: #2b9eb0;
 $cyan_dark: #1f7a89;
 
-$base: $black;
+$base: #0c0c0c;
 $surface0: $gray80;
 $surface1: $gray70;
 $surface2: $gray60;

hypr-configs/hyprland/eww/assets/scss/windows/_osd.scss

@@ -0,0 +1,10 @@
+@mixin window {
+  border-radius: 1rem;
+  padding: 1rem;
+  box-shadow: 0 0 4px 2px;
+  margin: 1rem;
+}
+
+.volume-osd {
+  @include window;
+}

hypr-configs/hyprland/eww/eww.yuck

@@ -2,6 +2,7 @@
 
 (include "./src/-components/_helpers.yuck")
 (include "./src/-components/_separator.yuck")
+(include "./src/-components/_sliders.yuck")
 
 (include "./src/-modules/_language.yuck")
 (include "./src/-modules/_system-tray.yuck")
@@ -13,6 +14,7 @@
 (include "./src/windows/_vertical-bar.yuck")
 (include "./src/windows/_control-panel.yuck")
 (include "./src/windows/_dashboard.yuck")
+(include "./src/windows/_osd.yuck")
 
 (include "./setups.yuck")
 

hypr-configs/hyprland/eww/setups.yuck

@@ -33,3 +33,14 @@
  :stacking "overlay"
  :monitor 0
  (Dashboard))
+
+(defwindow osd
+    :monitor 0
+    :stacking "overlay"
+    :geometry (geometry
+                    :anchor "bottom center"
+                    :width "2px"
+                    :height "2px"
+                )
+    (VolumeOsd)
+)

hypr-configs/hyprland/eww/src/-components/_helpers.yuck

@@ -13,45 +13,44 @@
   (eventbox
     :onhover `${EWW_CMD} update ${varname}=true`
     :onhoverlost `${EWW_CMD} update ${varname}=false`
-
+    
     (box
       :space-evenly false
       :orientation "v"
       (label :class "icon" :text icon)
-
+      
       (revealer
         :reveal var
         :transition {transition ?:"slidedown"}
-        :duration animation-duration-default
+        :duration animation-duration-fast
         (box :class "reveal-on-hover" (children :nth 0))))
-    ))
+  ))
 
 (defwidget RevealOnClick [var varname direction ?class ?duration ?transition]
   (box
     :orientation "v"
     :class "widget"
     :space-evenly false
-
+    
     (eventbox
       :cursor "pointer"
       :visible {direction == "up"}
       :onclick `${EWW_CMD} update ${varname}=${!var}`
-
+      
       (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
-
+    
     (revealer
       :reveal var
       :transition {direction == "up" ? "slideup" : "slidedown"}
       :duration animation-duration-fast
-
+      
       (box :style "padding: 6px 0px" (children :nth 0)))
-
-
+    
     (eventbox
       :cursor "pointer"
       :visible {direction == "down"}
       :onclick `${EWW_CMD} update ${varname}=${!var}`
-
+      
       (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
-
-    ))
+    
+  ))

hypr-configs/hyprland/eww/src/-components/_sliders.yuck

@@ -0,0 +1,11 @@
+(defwidget VerticalBarSlider [var ?onchange]
+  (box
+    :class "vertical-bar-slider"
+    (scale
+      :value var
+      :onchange onchange
+      :orientation "v"
+      :tooltip "${var}%"
+      :max 101
+      :min 0
+    :flipped true)))

hypr-configs/hyprland/eww/src/_definitions.yuck

@@ -50,6 +50,9 @@
 (defvar borderpixel 2)
 (defvar caffeine false)
 
+; Osd
+(defvar revealOsd true)
+
 ; Sidebar
 (defvar revealVolume false)
 (defvar revealMicrophone false)

hypr-configs/hyprland/eww/src/windows/_osd.yuck

@@ -0,0 +1,15 @@
+(defwidget VolumeOsd []
+    (revealer :transition "slideup" :reveal revealOsd :duration "500ms"
+        (box :orientation "h" :class "volume-osd" :space-evenly false
+            (VolumeScale))))
+
+(defwidget VolumeScale []
+    (overlay :hexpand true
+        (scale :min 0 :max 100 :active {volume != "muted"} :value {volume == "muted" ? 0 : volume} :onchange "pamixer --set-volume {}" :class "volume-scale")
+        (label :class 'volume-icon ${volume == "muted" ? "less" : volume < 5 ? "less" : "more"}' :halign "start" :text {volume == "muted" ? "󰸈" : volume < 33 ? "" : volume < 67 ? "" : ""})))
+
+(defwidget VolumeControlCenter []
+    (box :orientation "h" :class "volume-control-center" :space-evenly false
+        (volume_scale)
+        (button :class "volume-mute ${volume == 'muted' ? 'active' : ''}" :onclick "pamixer -t" "󰝟")
+        (button :class "volume-arrow" :onclick "scripts/toggle_control_center.sh close && pavucontrol &" "󰅂")))

hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck

@@ -3,21 +3,21 @@
     :orientation "h"
     :space-evenly false
     :class "vbar"
-
+    
     (revealer
       :transition "slideleft"
       :reveal revealControlpanel
       :duration animation-duration-fast
-
+      
       (ControlPanel))
-
+    
     (centerbox
       :orientation "v"
-
+      
       (BarTop)
       (BarMiddle)
       (BarBottom)
-      )))
+    )))
 
 (defwidget BarTop []
   (box
@@ -26,59 +26,59 @@
     :valign "start"
     :height 250
     :vexpand false
-
+    
     (Logo)
     (Workspaces)
     (Shortcuts)
-    ))
+  ))
 
 (defwidget BarMiddle []
   (box
     :orientation "v"
     :space-evenly false
     :valign "center"
-
+    
     (Clock)
-
+    
     (Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
-
+    
     (PlayerCtl :cover false)
-    ))
+  ))
 
 (defwidget BarBottom []
   (box
     :orientation "v"
     :space-evenly false
     :valign "end"
-
-  (RevealOnClick
-    :var revealSystray
-    :varname "revealSystray"
-    :direction "up"
-    (Systemtray :orientation "v")
-  )
+    
+    (RevealOnClick
+      :var revealSystray
+      :varname "revealSystray"
+      :direction "up"
+      (Systemtray :orientation "v")
+    )
     ;; (Language)
     (Sliders)
     ;; (Clock)
-    ))
+  ))
 
 (defwidget Shortcuts []
   (RevealOnClick
     :var revealShortcuts
     :varname "revealShortcuts"
     :direction "down"
-
+    
     (box
       :orientation "v"
       :spacing spacing-default
-
+      
       (button :onclick "swaymsg kill"
         (label :class "icon" :text "󰅙"))
       (button :onclick "wofi --show=drun -i -I"
         (label :class "icon" :text "󰀻"))
       (button :onclick "./scripts/touchkey.sh"
         (label :class "icon" :text "󰌌"))))
-  )
+)
 
 (defwidget Sliders []
   (box
@@ -87,49 +87,30 @@
     :space-evenly false
     :spacing spacing-default
     :valign "end"
-
-    (button :onclick "alacritty -e nmtui" :tooltip wifi_essid 
+    
+    (button :onclick "alacritty -e nmtui" :tooltip wifi_essid
       (label :class "icon" :text wifi_icon))
-
+    
     (RevealOnHover
       :var revealVolume
       :varname "revealVolume"
       :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
-
-      (scale
-        :value volume
-        :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%"
-        :orientation "v"
-        :tooltip "${volume}%"
-        :max 101
-        :min 0
-        :flipped true))
-
+      
+      (VerticalBarSlider :var volume :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%")
+    )
+    
     (RevealOnHover
       :var revealMicrophone
       :varname "revealMicrophone"
       :icon {volumemute == 'false' ? "" : "󰖁"}
-
-      (scale
-        :value mic_volume
-        :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%"
-        :orientation "v"
-        :tooltip "${mic_volume}%"
-        :max 101
-        :min 0
-        :flipped true))
-
+      
+      (VerticalBarSlider :var mic_volume :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%")
+    )
+    
     (RevealOnHover
       :var revealBrightness
       :varname "revealBrightness"
       :icon "󰃞"
-
-      (scale
-        :onchange "brightnessctl set {}%"
-        :value brightness
-        :orientation "v"
-        :tooltip "${brightness}%"
-        :max 100
-        :min 0
-        :flipped true))
-    ))
+      
+      (VerticalBarSlider :var brightness :onchange "brightnessctl set {}%"))
+  ))