feat: eww system tray

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

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

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

@@ -27,6 +27,10 @@
   background-color: $surface1;
 }
 
+.border {
+  border: 2px #fff solid;
+}
+
 button {
   transition-duration: 0.4s;
   border-radius: 6px;

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

@@ -1,11 +1,15 @@
 .clock {
   @extend .widget;
 
-  font-size: get-token(font-sizes);
+  font-size: get-token(font-sizes, large);
+  font-weight: 900;
 }
 
 .language {
   @extend .widget;
+
+  font-size: get-token(font-sizes);
+  font-weight: 900;
 }
 
 .logo {
@@ -18,6 +22,10 @@
   }
 }
 
+.system-tray {
+  @extend .widget;
+}
+
 .workspaces {
   @extend .widget;
 

hypr-configs/hyprland/eww/eww.yuck

@@ -1,7 +1,10 @@
 (include "./src/_definitions.yuck")
 
 (include "./src/-components/_helpers.yuck")
+(include "./src/-components/_separator.yuck")
+
 (include "./src/-modules/_language.yuck")
+(include "./src/-modules/_system-tray.yuck")
 (include "./src/-modules/_workspaces.yuck")
 (include "./src/-modules/_time.yuck")
 (include "./src/-modules/_logo.yuck")

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

@@ -26,7 +26,7 @@
         (box :class "reveal-on-hover" (children :nth 0))))
     ))
 
-(defwidget RevealOnClick [var varname ?class ?duration ?transition]
+(defwidget RevealOnClick [var varname ?class ?duration ?transition ?direction]
   (box
     :orientation "v"
     :class "widget"
@@ -36,12 +36,12 @@
       :reveal var
       :transition "slideup"
       :duration animation-duration-fast
+
       (box (children :nth 0)))
 
     (eventbox
       :cursor "pointer"
       :onclick `${EWW_CMD} update ${varname}=${!var}`
 
-      (label :angle {var ? 90 : 270} :class "reveal-on-click" :tooltip "touch control" :text "")
-      )
+      (label :angle {var ? 90 : 270} :class "reveal-on-click" :tooltip "touch control" :text ""))
     ))

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

@@ -0,0 +1,8 @@
+(defwidget Separator [orientation dots ?visible] (box
+    :orientation orientation
+    :class "separator"
+    :space-evenly false
+    :visible visible
+
+    (for dot in dots
+        (box :class "dot" :halign "center" :hexpand true :valign "center"))))

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

@@ -1,3 +1,3 @@
 (defwidget Language []
-  (eventbox :onclick "./scripts/kb-layout/set-active"
+  (eventbox :cursor "pointer" :onclick "./scripts/kb-layout/set-active"
     (box :class "language" (label :text {kbLayout}))))

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

@@ -1,21 +1,23 @@
 (defwidget PlayerCtl [?cover]
   (eventbox
     :cursor "pointer"
+
     (box
       :class "widget"
       :orientation "v"
       :spacing spacing-default
+      :space-evenly false
 
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
         (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
 
       (button :onclick "playerctl previous"
-        (label :class "picon" :text "󰒮"))
+        (label :class "icon" :text "󰒮"))
       (button :onclick "playerctl play-pause"
-        (label :class "picon" :text  { pstatus == "Playing" ? "" : ""}))
+        (label :class "icon" :text  { pstatus == "Playing" ? "" : ""}))
       (button :onclick "playerctl next"
-        (label :class "picon" :text "󰒭")))))
+        (label :class "icon" :text "󰒭")))))
 
 (defwindow MusicPlayerPopup
   :geometry (geometry

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

@@ -0,0 +1,19 @@
+(defwidget Systemtray [?orientation ?class]
+  (box
+    :space-evenly false
+    :valign "center"
+    :halign "center"
+    :class "${class}"
+
+    (revealer
+      :reveal revealSystray
+      :transition "slideup"
+
+(systray
+        :orientation orientation
+        :icon-size 18
+        :spacing spacing-default
+        )
+
+      )
+    ))

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

@@ -6,9 +6,9 @@
       :orientation "v"
       :space-evenly false
       :class "clock"
+      :spacing spacing-small
       (label :text thour)
-      (label :text tmin)
-      (label :text tpm))))
+      (label :text tmin))))
 
 (defwindow CalendarPopup
   :geometry (geometry

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

@@ -34,7 +34,6 @@
 ; Reveals
 (defvar reveal1 false)
 (defvar reveal2 false)
-(defvar reveal3 false)
 (defvar reveal4 false)
 (defvar reveal5 false)
 (defvar reveal6 false)
@@ -55,7 +54,8 @@
 (defvar revealVolume false)
 (defvar revealMicrophone false)
 (defvar revealBrightness false)
-(defvar revealSystray true)
+(defvar revealSystray false)
+(defvar revealShortcuts false)
 
 ; Dock
 (defvar revealDock true)

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

@@ -2,17 +2,16 @@
   (box
     :orientation "h"
     :space-evenly false
-    :vexpand true
+    :class "vbar"
 
     (revealer
       :transition "slideleft"
       :reveal revealControlpanel
-      :duration animation-duration-default
+      :duration animation-duration-fast
 
       (ControlPanel))
 
     (centerbox
-      :class "vbar"
       :orientation "v"
 
       (Top)
@@ -39,6 +38,10 @@
     :space-evenly false
     :valign "center"
 
+    (Clock)
+
+    (Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
+
     (PlayerCtl)
     ))
 
@@ -48,55 +51,20 @@
     :space-evenly false
     :valign "end"
 
-    ;; (systemtray)
+  (RevealOnClick
+    :var revealSystray
+    :varname "revealSystray"
+    (Systemtray :orientation "v")
+  )
     ;; (Language)
     (Sliders)
-    (Clock)
-    ;; (battery)
+    ;; (Clock)
     ))
 
-(defwidget systemtray []
-  (box
-    :class "widget"
-    :space-evenly false
-    :valign "end"
-    :orientation "v"
-    (eventbox
-      :onclick "${EWW_CMD} update revealSystray=${!revealSystray}"
-      (label :angle {!revealSystray ? 90 : 270} :class "revealtouch" :tooltip "reveal systray" :text ""))
-    (revealer
-      :reveal revealSystray
-      :transition "slideup"
-      (systray
-        :icon_size 6
-        :prepend-new true
-        ))
-    ))
-
-(defwidget battery []
-  (box
-    :orientation "v"
-    :space-evenly false
-    :class "widget"
-    (overlay
-      (scale
-        :class "${EWW_BATTERY.BAT0.status == 'Charging' ? 'charging': bat0 < 16 ? 'dying': 'normal'} bat_scale"
-        :value "${bat0}"
-        :orientation "v"
-        :max 100
-        :min 0
-        :active false
-        :flipped true)
-      (label
-        :class "lightning"
-        :visible {EWW_BATTERY.BAT0.status == "Charging"}
-        :text "󱐋"))
-    (label :text "${EWW_BATTERY.BAT0.capacity}%" :limit-width 3 :show-truncated false)))
-
 (defwidget Shortcuts []
   (RevealOnClick
-    :var reveal3
-    :varname "reveal3"
+    :var revealShortcuts
+    :varname "revealShortcuts"
 
     (box
       :class "touch"
@@ -128,7 +96,6 @@
       :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
 
       (scale
-        :class "volslide"
         :value volume
         :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%"
         :orientation "v"
@@ -143,7 +110,6 @@
       :icon {volumemute == 'false' ? "" : "󰖁"}
 
       (scale
-        :class "volslide"
         :value mic_volume
         :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%"
         :orientation "v"
@@ -158,7 +124,6 @@
       :icon "󰃞"
 
       (scale
-        :class "brislide"
         :onchange "brightnessctl set {}%"
         :value brightness
         :orientation "v"