feat: eww popup's

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

@@ -11,16 +11,6 @@ button {
   }
 }
 
-.popup {
-  background-color: $base;
-  padding: 5px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: $surface2;
-  border-width: 2px;
-  margin: 10px;
-}
-
 .mainentry {
   background-color: $surface1;
   padding: 5px;

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

@@ -23,3 +23,15 @@
 .icon {
   @include icon;
 }
+
+@mixin popup() {
+  background-color: $base;
+  padding: 8px;
+  border-radius: 12px;
+  border-style: solid;
+  margin: 10px;
+}
+
+.popup {
+  @include popup;
+}

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

@@ -33,7 +33,6 @@ scale {
 }
 
 entry {
-  // image: url('./assets/image/screenshot.png');
   padding: 5px;
   margin: 5px;
   border-radius: 5px;
@@ -46,23 +45,23 @@ entry {
 calendar {
   all: unset;
   background-color: $surface0;
-  font-size: 20;
+  font-size: 20px;
   color: $white0;
-}
 
-calendar:selected {
+  .header {
-  color: $base;
+    color: $accent;
-  background-color: $accent;
+    font-weight: bold;
-  border-radius: 25px;
+  }
-}
 
-calendar.header {
+  &:selected {
-  color: $accent;
+    color: $base;
-  font-weight: bold;
+    background-color: $accent;
-}
+    border-radius: 8px;
+  }
 
-calendar:indeterminate {
+  &:indeterminate {
-  color: $surface2;
+    color: $surface2;
+  }
 }
 
 checkbutton {
@@ -74,11 +73,11 @@ checkbutton {
     min-width: 15px;
     color: $white0;
   }
-}
 
-checkbutton:checked {
+  &:checked {
-  check {
+    check {
-    border-radius: 24px;
+      border-radius: 24px;
-    background-color: $white0;
+      background-color: $white0;
+    }
   }
 }

hypr-configs/hyprland/eww/eww.yuck

@@ -3,11 +3,15 @@
 (include "./src/-components/_helpers.yuck")
 (include "./src/-modules/_language.yuck")
 (include "./src/-modules/_workspaces.yuck")
-(include "./src/-modules/_clock.yuck")
+(include "./src/-modules/_time.yuck")
 (include "./src/-modules/_logo.yuck")
+(include "./src/-modules/_media.yuck")
+
+(include "./src/windows/_vertical-bar.yuck")
+(include "./src/windows/panel/main.yuck")
+
+(include "./setups.yuck")
 
-(include "./setups/sidebar.yuck")
-(include "./setups/panel.yuck")
 (include "./src/wallpapers/main.yuck")
 (include "./src/dashboard/main.yuck")
 (include "./src/dock/main.yuck")

hypr-configs/hyprland/eww/setups.yuck

@@ -1,5 +1,3 @@
-(include "./src/windows/panel/main.yuck")
-
 (defwindow control_panel
   :geometry
   (geometry
@@ -12,3 +10,15 @@
   :monitor 0
 
   (control_widget))
+
+(defwindow bar
+  :geometry
+  (geometry
+  :anchor "center left"
+  :height "100%")
+
+  :monitor 0
+  :exclusive true
+  :wm-ignore false
+
+  (VerticalBar))

hypr-configs/hyprland/eww/setups/sidebar.yuck

@@ -1,11 +0,0 @@
-(include "./src/windows/vbar/main.yuck")
-
-(defwindow bar
-  :geometry (geometry
-    :x "0%"
-    :y "0%"
-  :anchor "center left")
-  :exclusive true
-  :monitor 0
-  :wm-ignore false
-  (vbar))

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

@@ -1,11 +0,0 @@
-(defwidget Clock []
-  (eventbox
-    :cursor "pointer"
-    :onclick "${EWW_CMD} open calendar --toggle"
-    (box
-      :orientation "v"
-      :space-evenly false
-      :class "clock"
-      (label :text thour)
-      (label :text tmin)
-      (label :text tpm))))

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

@@ -0,0 +1,64 @@
+(defwidget PlayerCtl [?cover]
+  (eventbox
+    :cursor "pointer"
+    (box
+      :class "widget"
+      :orientation "v"
+      :spacing 6
+
+      (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 "󰒮"))
+      (button :onclick "playerctl play-pause"
+        (label :class "picon" :text  { pstatus == "Playing" ? "" : ""}))
+      (button :onclick "playerctl next"
+        (label :class "picon" :text "󰒭")))))
+
+(defwindow MusicPlayerPopup
+  :geometry (geometry
+              :width "440"
+              :height "200"
+              :anchor "center left")
+  :stacking "overlay"
+  :monitor 0
+  (box
+    :class "popup"
+    (box
+      :orientation "h"
+      :class "widget"
+      :space-evenly false
+      :spacing 20
+      (image :style "margin: 5px;" :image-height 190 :image-width 190 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover})
+      (box
+        :orientation "v"
+        :space-evenly false
+        :width 210
+        :height 200
+        (scroll
+          :hscroll true
+          :vscroll false
+          (label :class "mtitle" :text psong))
+        (scroll
+          :hscroll true
+          :vscroll false
+          (label :class "mauthor" :text partist))
+        (box
+          :orientation "h"
+          :class "mpd_controls"
+          :style "margin-top: 10px;"
+          (button :onclick "playerctl previous"
+            (label :text "󰒮"))
+          (button :style "padding-right: 3px;" :onclick "playerctl play-pause" 
+            (label :text { pstatus == "Playing" ? "" : ""}))
+          (button :onclick "playerctl next" (label :text "󰒭")))
+        (scale 
+          :class "seektime"
+          :value { ptime.position}
+          :orientation "h"
+          ;; :onchange "playerctl position {}"
+          :min 0
+          :max { ptime.duration}
+          :tooltip { ptime.readable})))))

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

@@ -0,0 +1,25 @@
+(defwidget Clock []
+  (eventbox
+    :cursor "pointer"
+    :onclick "${EWW_CMD} open CalendarPopup --toggle"
+    (box
+      :orientation "v"
+      :space-evenly false
+      :class "clock"
+      (label :text thour)
+      (label :text tmin)
+      (label :text tpm))))
+
+(defwindow CalendarPopup
+  :geometry (geometry
+              :width "100"
+              :height "35"
+              :anchor "bottom left")
+  :stacking "overlay"
+  :monitor 0
+
+  (box
+    :class "popup"
+    (box
+      :class "widget"
+      (calendar :day calendar_day :year calendar_year))))

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

@@ -1,9 +1,8 @@
-(defwidget vbar []
+(defwidget VerticalBar []
   (box
     :orientation "h"
     :space-evenly false
     :vexpand true
-    :height "1080"
 
     (revealer
       :transition "slideleft"
@@ -13,43 +12,40 @@
     (centerbox
       :class "vbar"
       :orientation "v"
-      (top)
+
-      (middle)
+      (Top)
-      (bottom)
+      (Middle)
+      (Bottom)
       )))
 
-(defwidget top []
+(defwidget Top []
   (box
     :orientation "v"
     :space-evenly false
     :valign "start"
-    :vexpand false
+
     (Logo)
     (Workspaces)
     (hiddenctl)
     ))
 
-(defwidget middle []
+(defwidget Middle []
   (box
     :orientation "v"
     :space-evenly false
     :valign "center"
-    :vexpand false
+    :height 240
-    :class "center_modules"
-    :height "180"
 
-    (playerctl)
+    (PlayerCtl)
     ))
 
-(defwidget bottom []
+(defwidget Bottom []
   (box
     :orientation "v"
     :space-evenly false
     :valign "end"
-    :class "bottom_modules"
+
-    :vexpand false
+    ;; (systemtray)
-    :hexpand false
-    ; (systemtray)
     (Language)
     (sliders)
     (Clock)
@@ -122,27 +118,6 @@
         :transition "slidedown"
         ))))
 
-(defwidget playerctl [?cover]
-  (eventbox
-    :cursor "pointer"
-    (box
-      :class "widget"
-      :orientation "v"
-      :space-evenly true
-      :spacing 6
-
-      (eventbox
-        :onclick "${EWW_CMD} open music --toggle"
-        (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
-
-      (button :onclick "playerctl previous"
-        (label :class "picon" :text "󰒮"))
-      (button :onclick "playerctl play-pause" 
-        (label :class "picon" :text  { pstatus == "Playing" ? "" : "" }))
-      (button :onclick "playerctl next"
-        (label :class "picon" :text "󰒭"))
-      )))
-
 (defwidget sliders []
   (box
     :class "widget"
@@ -208,65 +183,3 @@
         :min 0
         :flipped true))
     ))
-
-(defwindow calendar
-  :geometry (geometry 
-              :x "0"
-              :y "0"
-              :width "100"
-              :height "35"
-              :anchor "bottom left")
-  :stacking "overlay"
-  :monitor 0
-  (box
-    :class "popup"
-    (box
-      :class "unbarwidget"
-      (calendar :day calendar_day :year calendar_year :class "cal"))))
-(defwindow music 
-  :geometry (geometry :x "0"
-              :y "0"
-              :width "440"
-              :height "200"
-              :anchor "center left")
-  :stacking "overlay"
-  :monitor 0
-  (box 
-    :class "popup"
-    (box
-      :orientation "h"
-      :class "unbarwidget"
-      :space-evenly false 
-      :spacing 20
-      (image :style "margin: 5px;" :image-height 190 :image-width 190 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover })
-      (box
-        :orientation "v"
-        :space-evenly false 
-        :width 210
-        :height 200
-        (scroll
-          :hscroll true
-          :vscroll false
-          (label :class "mtitle" :text psong))
-        (scroll
-          :hscroll true
-          :vscroll false
-          (label :class "mauthor" :text partist))
-        (box 
-          :orientation "h"
-          :class "mpd_controls"
-          :style "margin-top: 10px;"
-          (button :onclick "playerctl previous" 
-            (label :text "󰒮"))
-          (button :style "padding-right: 3px;" :onclick "playerctl play-pause" 
-            (label :text { pstatus == "Playing" ? "" : ""} ))
-          (button :onclick "playerctl next" (label :text "󰒭")))
-        (scale 
-          :class "seektime"
-          :value { ptime.position }
-          :orientation "h"
-          ;; :onchange "playerctl position {}"
-          :min 0
-          :max { ptime.duration }
-          :tooltip { ptime.readable }))
-      )))