refactor: eww design token

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

@@ -8,12 +8,12 @@
 }
 
 .separator {
-  padding: 6px;
+  padding: 4px 6px;
 
   .dot {
-    padding: 2px;
+    padding: 3px;
 
-    border-radius: 100;
+    border-radius: 100%;
 
     background-color: $white;
   }

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

@@ -1,5 +1,9 @@
 @import "tokens";
 
+.animation {
+  transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
 .widget {
   padding: get-token(padding, small);
   margin: get-token(margin, small);

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

@@ -17,7 +17,7 @@ $design-tokens: (
   border-radius: (
     small: 6px,
     default: 8px,
-    large: 12px,
+    large: 16px,
   ),
 );
 

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

@@ -26,22 +26,32 @@
         (box :class "reveal-on-hover" (children :nth 0))))
     ))
 
-(defwidget RevealOnClick [var varname ?class ?duration ?transition ?direction]
+(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 "slideup"
+      :transition {direction == "up" ? "slideup" : "slidedown"}
       :duration animation-duration-fast
 
-      (box (children :nth 0)))
+      (box :style "padding: 6px 0px" (children :nth 0)))
+
 
     (eventbox
       :cursor "pointer"
+      :visible {direction == "down"}
       :onclick `${EWW_CMD} update ${varname}=${!var}`
 
-      (label :angle {var ? 90 : 270} :class "reveal-on-click" :tooltip "touch control" :text ""))
+      (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
+
     ))

hypr-configs/hyprland/eww/src/-modules/_media.yuck

@@ -3,13 +3,14 @@
     :cursor "pointer"
 
     (box
-      :class "widget"
+      :class "widget player-ctl"
       :orientation "v"
       :spacing spacing-default
       :space-evenly false
 
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
+        :visible cover
         (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
 
       (button :onclick "playerctl previous"

hypr-configs/hyprland/eww/src/-modules/_system-tray.yuck

@@ -11,7 +11,7 @@
 
 (systray
         :orientation orientation
-        :icon-size 18
+        :icon-size 20
         :spacing spacing-default
         )
 

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

@@ -10,14 +10,14 @@
     (chooser)
     ; (weather)
 
-    ; (coolmpd :h 150 :permashow true)
+ (coolmpd :h 160 :permashow true)
 
     (box
       :orientation "h"
       :space-evenly false
       :height 180
-      :halign "fill"
+
-      (timer)
+      (Timer)
       (bigslides))
 
     (box
@@ -25,11 +25,12 @@
       :orientation "v"
       :vexpand true
       :visible true
-      (toolbox)
+
-      (notifications_weather_box))
+      (Toolbox)
+      (NotificationsWeatherBox))
     ))
 
-(defwidget toolbox []
+(defwidget Toolbox []
   (eventbox
     :cursor "pointer"
 
@@ -44,10 +45,10 @@
 (defwidget chooser []
   (box
     :orientation "v"
-    :halign "fill"
     :height 60
     :class "panel-widget"
     :space-evenly false
+
     (box
       :orientation "h"
 
@@ -223,7 +224,7 @@
           (label :halign "start" :text "${datehour < 12 ? 'Good morning' : datehour < 18 ? 'Good afternoon' : datehour < 22 ? 'Good evening' : 'Good night'} ${hostname}")
           (label :halign "start" :text uptime :style "font-size: 12px;"))))))
 
-(defwidget notifications_weather_box []
+(defwidget NotificationsWeatherBox []
   (box
     :orientation "v"
     :halign "fill"
@@ -339,13 +340,14 @@
         ;; (label :halign "start" :text "${weatherjson.precipMM} mm")
         ))))
 
-(defwidget timer[]
+(defwidget Timer []
   (box
     :orientation "v"
     :class "panel-widget"
     :space-evenly false
-    :width 180
     :valign "fill"
+    :width 200
+
     (label :class "timer" :valign "center" :vexpand true :text timerdis)
     (box
       :orientation "h"
@@ -369,7 +371,6 @@
 (defwidget bigvol []
   (overlay
     (scale
-      :width 50
       :class "bigslide"
       :value volume
       :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%"
@@ -386,7 +387,6 @@
 (defwidget bigmic []
   (overlay
     (scale
-      :width 50
       :class "bigslide"
       :value mic_volume
       :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%"
@@ -403,7 +403,6 @@
 (defwidget bigbright []
   (overlay
     (scale
-      :width 50
       :class "bigslide"
       :value brightness
       :onchange "brightnessctl set {}%"

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

@@ -14,12 +14,12 @@
     (centerbox
       :orientation "v"
 
-      (Top)
+      (BarTop)
-      (Middle)
+      (BarMiddle)
-      (Bottom)
+      (BarBottom)
       )))
 
-(defwidget Top []
+(defwidget BarTop []
   (box
     :orientation "v"
     :space-evenly false
@@ -32,7 +32,7 @@
     (Shortcuts)
     ))
 
-(defwidget Middle []
+(defwidget BarMiddle []
   (box
     :orientation "v"
     :space-evenly false
@@ -42,10 +42,10 @@
 
     (Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
 
-    (PlayerCtl)
+    (PlayerCtl :cover false)
     ))
 
-(defwidget Bottom []
+(defwidget BarBottom []
   (box
     :orientation "v"
     :space-evenly false
@@ -54,6 +54,7 @@
   (RevealOnClick
     :var revealSystray
     :varname "revealSystray"
+    :direction "up"
     (Systemtray :orientation "v")
   )
     ;; (Language)
@@ -65,9 +66,9 @@
   (RevealOnClick
     :var revealShortcuts
     :varname "revealShortcuts"
+    :direction "down"
 
     (box
-      :class "touch"
       :orientation "v"
       :spacing spacing-default