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

@@ -1,153 +1,153 @@
 (defwidget Dashboard []
- (box
-  :class "dashboard"
-  :space-evenly false
-  :orientation "v"
-
-  (duser :name "Failed" :tag "failed.sh" :pfp "./assets/image/roundpfp.png")
-
   (box
-   :space-evenly true
+    :class "dashboard"
-   :orientation "h"
-   :vexpand true
-
-   (box
     :space-evenly false
     :orientation "v"
-
+    
-    (MediaPlayer :h 150 :permashow true)
+    (duser :name "Failed" :tag "failed.sh" :pfp "./assets/image/roundpfp.png")
-
+    
     (box
-     :space-evenly false
+      :space-evenly true
-     :orientation "h"
+      :orientation "h"
-     (box
+      :vexpand true
-      :width 130
+      
-      :space-evenly false
+      (box
-      :orientation "v"
+        :space-evenly false
-      (dbutt)
+        :orientation "v"
-      (theme))
+        
-     (dcal)
+        (MediaPlayer :height 150)
-    ))
+        
+        (box
+          :space-evenly false
+          :orientation "h"
+          (box
+            :width 130
+            :space-evenly false
+            :orientation "v"
+            (dbutt)
+            (theme))
+          (dcal)
+        ))
+      
+      (box
+        :orientation "v"
+        :space-evenly false
+        (dnotes)
+        (quote))
+    )))
 
-   (box
+(defwidget duser [name tag pfp]
-    :orientation "v"
+  (box
+    :orientation "h"
     :space-evenly false
-    (dnotes)
+    :halign "start"
-    (quote))
+    :hexpand true
-	)))
+    :class "unbarwidget"
+    :style "background-color: inherit;"
+    :spacing 15
+    (image :image-width 50 :image-height 50 :path pfp)
+    (label :text "|" :style "color: #262626; font-size: 30px;")
+    (box
+      :orientation "v"
+      :space-evenly true
+      :halign "start"
+      (label :style "font-weight: bold; font-size: 18px;" :text "Hello, ${name}")
+      (label :halign "start" :text tag))))
 
-	  (defwidget duser [name tag pfp]
+(defwidget dnotes []
-	   (box
+  (box
-	    :orientation "h"
+    :class "notes unbarwidget"
-	    :space-evenly false
+    :space-evenly false
-	    :halign "start"
+    :orientation "v"
-	    :hexpand true
+    :vexpand true
-	    :class "unbarwidget"
+    (label :class "heading" :text "Agenda")
-	    :style "background-color: inherit;"
+    (box
-	    :spacing 15
+      :vexpand true
-	    (image :image-width 50 :image-height 50 :path pfp)
+      :width 350
-	    (label :text "|" :style "color: #262626; font-size: 30px;")
+      (scroll
-	    (box
+        :hscroll true
-	     :orientation "v"
+        :vscroll true
-	     :space-evenly true
+        (label :style "font-size: 16px;" :text notesc)))))
-	     :halign "start"
-	     (label :style "font-weight: bold; font-size: 18px;" :text "Hello, ${name}")
-	     (label :halign "start" :text tag))))
 
-	  (defwidget dnotes []
+(defwidget dmpd []
-	   (box
+  (overlay
-	    :class "notes unbarwidget"
+    (box
-	    :space-evenly false
+      :class "mpdcover"
-	    :orientation "v"
+      :style "background-image: url('${pcover}')"
-	    :vexpand true
+    :height 150)
-	    (label :class "heading" :text "Agenda")
+    (box
-	    (box
+      :orientation "v"
-	     :vexpand true
+      :space-evenly false
-	     :width 350
+      :spacing 10
-	     (scroll
+      :valign "center"
-	      :hscroll true
+      (scroll
-	      :vscroll true
+        :hscroll true
-	      (label :style "font-size: 16px;" :text notesc)))))
+        :vscroll false
+        (label :style "font-size: 18px;" :text psong))
+      (scroll
+        :hscroll true
+        :vscroll false
+        (label :text partist))
+      ;; (scale
+        ;;   :hexpand false
+        ;;   :width 60
+        ;;   :class "seektime"
+        ;;   :value current
+        ;;   :orientation "h"
+        ;;   :min -5
+        ;;   :max 100
+        ;;   :onscroll "mpc -q seek +1"
+      ;;   :tooltip "${ctime}/${ttime}")
+      (box
+        :orientation "h"
+        :space-evenly false
+        :spacing 40
+        :halign "center"
+        :class "dmpdcontrol"
+        (button :onclick "./scripts/music_info --prev" (label :text "󰒮"))
+        (button :onclick "./scripts/music_info --toggle" (label :text { pstatus == "Playing" ? "" : ""}))
+        (button :onclick "./scripts/music_info --next" (label :text "󰒭"))))))
 
-				     (defwidget dmpd []
+(defwidget dcal []
-				      (overlay
+  (box
-				       (box
+    :class "unbarwidget mincal"
-					:class "mpdcover"
+    :height 190
-					:style "background-image: url('${pcover}')"
+    :hexpand true
-					:height 150)
+    (calendar
-				       (box
+      :show-details false
-					:orientation "v"
+      :show-heading true
-					:space-evenly false
+      :show-day-names false
-					:spacing 10
+      :show-week-numbers false
-					:valign "center"
+      :day calendar_day
-					(scroll
+    :year calendar_year)))
-					 :hscroll true
-					 :vscroll false
-					 (label :style "font-size: 18px;" :text psong))
-					(scroll
-					 :hscroll true
-					 :vscroll false
-					 (label :text partist))
-					;; (scale
-						;;   :hexpand false
-						;;   :width 60
-						;;   :class "seektime"
-						;;   :value current
-						;;   :orientation "h"
-						;;   :min -5
-						;;   :max 100
-						;;   :onscroll "mpc -q seek +1"
-						;;   :tooltip "${ctime}/${ttime}")
-					(box
-					 :orientation "h"
-					 :space-evenly false
-					 :spacing 40
-					 :halign "center"
-					 :class "dmpdcontrol"
-					 (button :onclick "./scripts/music_info --prev" (label :text "󰒮"))
-					 (button :onclick "./scripts/music_info --toggle" (label :text { pstatus == "Playing" ? "" : ""}))
-					 (button :onclick "./scripts/music_info --next" (label :text "󰒭"))))))
 
-					 (defwidget dcal []
+(defwidget dbutt[]
-					  (box
+  (box
-					   :class "unbarwidget mincal"
+    :space-evenly true
-					   :height 190
+    :orientation "h"
-					   :hexpand true
+    :height 130
-					   (calendar
+    (box
-					    :show-details false
+      :space-evenly true
-					    :show-heading true
+      :orientation "v"
-					    :show-day-names false
+      (button :class "dicons unbarwidget" :onclick "notify-send 'shutdown' 'but its impractical'" (label :text ""))
-					    :show-week-numbers false
+      (button :class "dicons unbarwidget" :onclick "notify-send 'restart' 'but its impractical'" (label :text "")))
-					    :day calendar_day
+    (box
-					    :year calendar_year)))
+      :space-evenly true
+      :orientation "v"
+      (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 dbutt[]
+(defwidget theme []
-					     (box
+  (button
-					      :space-evenly true
+    :class "unbarwidget"
-					      :orientation "h"
+    :vexpand true
-					      :height 130
+    :onclick "./scripts/toggletheme toggle"
-					      (box
+    (label :style "font-size: 18px;" :text "")))
-					       :space-evenly true
-					       :orientation "v"
-					       (button :class "dicons unbarwidget" :onclick "notify-send 'shutdown' 'but its impractical'" (label :text ""))
-					       (button :class "dicons unbarwidget" :onclick "notify-send 'restart' 'but its impractical'" (label :text "")))
-					      (box
-					       :space-evenly true
-					       :orientation "v"
-					       (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 dquote []
-										     (button
+  ;;   (box
-										      :class "unbarwidget"
+    ;;     :class "unbarwidget"
-										      :vexpand true
+    ;;     :height "120"
-										      :onclick "./scripts/toggletheme toggle"
+    ;;     :valign "center"
-										      (label :style "font-size: 18px;" :text "")))
+    ;;     (literal
-
+    ;;       :content quoteliteral)))
-										       ;; (defwidget dquote []
-												       ;;   (box
-													       ;;     :class "unbarwidget"
-													       ;;     :height "120"
-													       ;;     :valign "center"
-													       ;;     (literal
-														       ;;       :content quoteliteral)))

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)