feat: big bar sliders

hypr-configs/hyprland/eww/_definitions.yuck

@@ -87,7 +87,7 @@
 ;; (deflisten pside "playerctl -F metadata -f '{ \"volume\": {{volume*100}}, \"shuffle\": \"{{shuffle}}\", \"loop\": \"{{loop}}\" }'")
 
 ; Controlpanel
-(defvar revealControlpanel false)
+(defvar revealControlpanel true)
 (defvar revealWeather false)
 (defpoll hostname :initial "idk" :interval "24h" 'echo "$(whoami)"')
 (defpoll uptime :initial "idk" :interval "1m" "uptime -p")

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

@@ -42,3 +42,22 @@
     font-size: get-token(font-sizes, large);
   }
 }
+
+.big-bar-slider {
+  trough {
+    background-color: $surface1;
+    margin: 5px;
+    min-width: 60px;
+    border-radius: get-token(border-radius);
+
+    highlight {
+      background-color: $surface2;
+      border-radius: get-token(border-radius);
+    }
+  }
+
+  .icon {
+    font-size: get-token(font-sizes, extra);
+    margin-bottom: 16px;
+  }
+}

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

@@ -3,6 +3,7 @@ $design-tokens: (
     small: 16px,
     default: 18px,
     large: 20px,
+    extra: 30px,
   ),
   padding: (
     small: 8px,

hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss

@@ -48,32 +48,6 @@
   font-size: 20px;
 }
 
-.bigslide trough {
-  margin: 5px;
-  min-width: 4em;
-  border-radius: 0.8em;
-  background-color: $surface1;
-
-  slider {
-    all: unset;
-    min-width: 20px;
-    min-height: 20px;
-  }
-
-  highlight {
-    background-color: $surface2;
-    border-radius: 0.8em;
-  }
-}
-
-.slideicon {
-  min-width: 1em;
-  min-height: 1em;
-  font-family: "Symbols Nerd Font";
-  font-size: 30px;
-  margin-bottom: 15px;
-}
-
 .unbarwidget {
   padding: 5px;
   border-radius: 5px;

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

@@ -1,10 +1,31 @@
 (defwidget VerticalBarSlider [var ?onchange]
   (scale
-    :value var
+    :value {var}
-    :onchange onchange
+    :onchange {onchange}
     :class "vertical-bar-slider"
     :orientation "v"
     :tooltip "${var}%"
     :max 101
     :min 0
   :flipped true))
+
+(defwidget BigBarSlider [var ?icon ?onchange]
+  (box
+    :class "big-bar-slider"
+    
+    (overlay
+      (scale
+        :value var
+        :onchange {onchange}
+        :orientation "v"
+        :tooltip "${var}%"
+        :max 101
+        :min 0
+      :flipped true)
+      
+      (label
+        :class "icon"
+        :valign "end"
+      :text {icon}))
+  )
+)

hypr-configs/hyprland/eww/src/windows/_control-panel.yuck

@@ -18,7 +18,7 @@
       :height 180
       
       (Timer)
-      (bigslides))
+      (BigSliders))
     
     (box
       :space-evenly false
@@ -295,7 +295,6 @@
   (box
     :halign "fill"
     :valign "fill"
-    :width 320
     :vexpand true
     :space-evenly false
     :orientation "v"
@@ -321,7 +320,7 @@
             :valign "start"
             :space-evenly false
             (for notif in {notifications.notifications}
-              (singlenotif :noti notif :initial false))))
+              (SingleNotification :noti notif :initial false))))
       )
       
       (box
@@ -404,7 +403,6 @@
     :orientation "v"
     :class "panel-widget"
     :space-evenly false
-    :valign "fill"
     :width 200
     
     (label :class "timer" :valign "center" :vexpand true :text timerdis)
@@ -416,64 +414,24 @@
       (button :onclick "./scripts/python/timer.py toggle" (label :style "padding-right: 3px;" :text { !matches(timerdis, ":") ? "󱎫" : "󱫎"}))
       (button :onclick "./scripts/python/timer.py timeinc" (label :text "+")))))
 
-(defwidget bigslides []
+(defwidget BigSliders []
   (box
     :valign "fill"
     :halign "fill"
     :class "panel-widget"
     :hexpand true
     :space-evenly true
-    (bigvol)
-    (bigmic)
-    (bigbright)))
     
-(defwidget bigvol []
+    (BigBarSlider :var {volume} :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
-  (overlay
+    :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%")
-    (scale
-      :class "bigslide"
-      :value volume
-      :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%"
-      :orientation "v"
-      :tooltip "${volume}%"
-      :max 100
-      :min 0
-    :flipped true)
-    (label
-      :class "slideicon"
-      :valign "end"
-    :text {volumemute == 'false' ? "󰕾" : "󰖁"})))
     
-(defwidget bigmic []
+    (BigBarSlider :var {mic_volume} :icon {volumemute == 'false' ? "" : "󰖁"}
-  (overlay
+    :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%")
-    (scale
-      :class "bigslide"
-      :value mic_volume
-      :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%"
-      :orientation "v"
-      :tooltip "${mic_volume}%"
-      :max 100
-      :min 0
-    :flipped true)
-    (label
-      :class "slideicon"
-      :valign "end"
-    :text {volumemute == 'false' ? "" : "󰖁"})))
     
-(defwidget bigbright []
+    (BigBarSlider :var {brightness} :icon "󰃞"
-  (overlay
+    :onchange "brightnessctl set {}%")
-    (scale
+    
-      :class "bigslide"
+  ))
-      :value brightness
-      :onchange "brightnessctl set {}%"
-      :orientation "v"
-      :tooltip "${brightness}%"
-      :max 100
-      :min 0
-    :flipped true)
-    (label
-      :class "slideicon"
-      :valign "end"
-    :text "󰃞")))
 
 (defwidget quote []
   (box