refactor: eww styles and widgets

hypr-configs/hyprland/eww/_definitions.yuck

@@ -80,7 +80,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

@@ -6,18 +6,16 @@
   @extend .widget;
 
   label {
-    @extend .icon;
-
     color: $surface2;
     padding: 4px 0px;
   }
 }
 
 .separator {
-  padding: get-token(padding, small);
+  padding: 4px 8px;
 
   .dot {
-    padding: 2px;
+    padding: 3px;
 
     border-radius: 100%;
 
@@ -51,9 +49,9 @@
 
 .big-bar-slider {
   trough {
-    background-color: $surface1;
-    margin: 5px;
     min-width: 60px;
+    background-color: $surface1;
+    margin: get-token(margin);
     border-radius: get-token(border-radius);
 
     highlight {

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

@@ -4,7 +4,7 @@
 
 .widget {
   padding: get-token(padding, small);
-  margin: get-token(margin);
+  margin: get-token(margin, small);
   border-radius: get-token(border-radius, small);
   background-color: $surface0;
 }

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

@@ -2,7 +2,7 @@
   @extend .widget;
 
   label {
-    font-size: get-token(font-sizes, large);
+    font-size: 20px;
     font-weight: bold;
   }
 }
@@ -11,7 +11,7 @@
   @extend .widget;
 
   label {
-    font-size: get-token(font-sizes);
+    font-size: get-token(font-sizes, small);
     font-weight: bold;
   }
 }
@@ -36,10 +36,10 @@
   padding: 12px;
 
   .workspace {
-    @extend .animation;
     min-height: 16px;
     background-color: $surface2;
     border-radius: get-token(border-radius);
+    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms;
 
     &.current {
       min-height: 42px;
@@ -51,16 +51,12 @@
 
 .bar-media-player {
   @extend .widget;
-
-  label {
-    font-size: get-token(font-sizes, large);
-  }
 }
 
 .media-player {
   @extend .panel-widget;
 
-  padding: 0px;
+  padding: 8px;
 
   .player-cover {
     transition: 600ms ease;

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

@@ -1,6 +1,6 @@
 .control-panel {
-  padding: get-token(padding, small);
   background-color: $base;
+  padding: get-token(padding, small);
 }
 
 .userinfo label {

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

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

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

@@ -1,6 +1,7 @@
-(defwidget SystemStatus [icon val]
+(defwidget SystemStatus [icon val ?visible]
   (box
     :class "system-status"
+    :visible {visible}
     
     (overlay
       (circular-progress

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

@@ -22,17 +22,16 @@
       (button :onclick "playerctl next"
         (label :class "icon" :text "󰒭")))))
 
-(defwidget MediaPlayer [h permashow]
+(defwidget MediaPlayer [height]
   (box
     :class "media-player"
     (overlay
       (box
         :orientation "v"
         :halign "fill"
-        :height h
+        :height {height}
         :class { pcover != "" ? "player-cover" : ""}
-        :style "background-image: url('${pcover}')"
+        :style "background-image: url('${pcover}')")
-      :visible {permashow ? true : pcover != "" })
       
       (box
         :orientation "h"

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

@@ -1,19 +1,17 @@
 (defwidget ControlPanel []
   (box
-    :class "control-panel"
-    :space-evenly false
     :orientation "v"
-    :valign "fill"
+    :space-evenly false
-    :vexpand true
+    :class "control-panel"
+    :width 420
     
     (User)
     (SystemMonitor)
     
-    ; (MediaPlayer :h 160 :permashow true)
+    ; (MediaPlayer :height 140)
     
     (box
       :orientation "h"
-      :space-evenly false
       :height 180
       
       (Timer)
@@ -46,14 +44,14 @@
     :orientation "h"
     :class "panel-widget"
     :height 140
+    
     (SystemStatus :icon "󰻠" :val { EWW_CPU.avg })
     (SystemStatus :icon "󰍛" :val { EWW_RAM.used_mem_perc })
     (SystemStatus :icon "󰈐" :val { gpu })
-    (SystemStatus :icon "" :val { EWW_BATTERY.BAT0.capacity })
+    (SystemStatus :icon "" :val { EWW_BATTERY.BAT0.capacity } :visible false)
   ))
 
 (defwidget User []
-  
   (box
     :orientation "h"
     :space-evenly false
@@ -63,7 +61,8 @@
     :valign "start"
     :halign "fill"
     :hexpand true
-    (image :style "margin: 10px;" :image-width 80 :image-height 80 :path "./assets/image/fieshidle.gif")
+    
+    (image  :image-width 80 :image-height 80 :path "./assets/image/fieshidle.gif")
     (scroll
       :hscroll true
       :vscroll false
@@ -220,7 +219,8 @@
       :orientation "v"
       :space-evenly false
       :valign "center"
-      :spacing 10
+      :spacing spacing-default
+      
       (label :halign "start" :text "${hour.FeelsLikeC}°C")
       (label :halign "start" :text "rain: ${hour.chanceofrain}%"))))
 
@@ -256,7 +256,6 @@
     :orientation "v"
     :class "panel-widget"
     :space-evenly false
-    :width 200
     
     (label :class "timer" :valign "center" :vexpand true :text timerdis)
     (box
@@ -269,19 +268,16 @@
 
 (defwidget BigSliders []
   (box
-    :valign "fill"
-    :halign "fill"
     :class "panel-widget"
-    :hexpand true
+    :spacing spacing-small
-    :space-evenly true
     
-    (BigBarSlider :var {volume} :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
+    (BigBarSlider :var { volume } :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
     :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%")
     
-    (BigBarSlider :var {mic_volume} :icon {volumemute == 'false' ? "" : "󰖁"}
+    (BigBarSlider :var { mic_volume } :icon {volumemute == 'false' ? "" : "󰖁"}
     :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%")
     
-    (BigBarSlider :var {brightness} :icon "󰃞"
+    (BigBarSlider :visible false :var { brightness } :icon "󰃞"
     :onchange "brightnessctl set {}%")
     
   ))

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

@@ -15,7 +15,7 @@
         :space-evenly false
         :orientation "v"
         
-    (MediaPlayer :h 150 :permashow true)
+        (MediaPlayer :height 150)
         
         (box
           :space-evenly false
@@ -36,7 +36,7 @@
         (quote))
     )))
 
-	  (defwidget duser [name tag pfp]
+(defwidget duser [name tag pfp]
   (box
     :orientation "h"
     :space-evenly false
@@ -54,7 +54,7 @@
       (label :style "font-weight: bold; font-size: 18px;" :text "Hello, ${name}")
       (label :halign "start" :text tag))))
 
-	  (defwidget dnotes []
+(defwidget dnotes []
   (box
     :class "notes unbarwidget"
     :space-evenly false
@@ -69,7 +69,7 @@
         :vscroll true
         (label :style "font-size: 16px;" :text notesc)))))
 
-				     (defwidget dmpd []
+(defwidget dmpd []
   (overlay
     (box
       :class "mpdcover"
@@ -108,7 +108,7 @@
         (button :onclick "./scripts/music_info --toggle" (label :text { pstatus == "Playing" ? "" : ""}))
         (button :onclick "./scripts/music_info --next" (label :text "󰒭"))))))
 
-					 (defwidget dcal []
+(defwidget dcal []
   (box
     :class "unbarwidget mincal"
     :height 190
@@ -121,7 +121,7 @@
       :day calendar_day
     :year calendar_year)))
 
-					    (defwidget dbutt[]
+(defwidget dbutt[]
   (box
     :space-evenly true
     :orientation "h"
@@ -137,14 +137,14 @@
       (button :class "dicons unbarwidget" :onclick "notify-send 'lock' 'but its impractical'" (label :text ""))
       (button :class "dicons unbarwidget" :onclick "notify-send 'log out' 'but its impractical'" (label :text "󰍃")))))
 
-										    (defwidget theme []
+(defwidget theme []
   (button
     :class "unbarwidget"
     :vexpand true
     :onclick "./scripts/toggletheme toggle"
     (label :style "font-size: 18px;" :text "")))
 
-										       ;; (defwidget dquote []
+;; (defwidget dquote []
   ;;   (box
     ;;     :class "unbarwidget"
     ;;     :height "120"

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

@@ -5,7 +5,7 @@
     :class "vbar"
     
     (revealer
-      :transition "slideleft"
+      :transition "slideright"
       :reveal revealControlpanel
       :duration animation-duration-fast
       
@@ -24,7 +24,6 @@
     :orientation "v"
     :space-evenly false
     :valign "start"
-    :height 250
     :vexpand false
     
     (Logo)