refactor: modules of eww

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

@@ -1,19 +1,3 @@
-@mixin widget() {
-  padding: 6px;
-  margin: 4px 2px;
-  border-radius: 8px;
-  background-color: $surface0;
-}
-
-.widget {
-  @include widget;
-}
-
-.controlpanel-widget {
-  @include widget;
-  margin: 6px;
-}
-
 .border {
   border: 2px white solid;
 }
@@ -21,10 +5,10 @@
 button {
   transition-duration: 0.4s;
   border-radius: 6px;
-}
 
-button:hover {
+  &:hover {
-  background-color: $surface2;
+    background-color: $surface2;
+  }
 }
 
 .popup {

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

@@ -0,0 +1,25 @@
+@mixin widget() {
+  padding: 6px;
+  margin: 4px 2px;
+  border-radius: 8px;
+  background-color: $surface0;
+}
+
+.widget {
+  @include widget;
+}
+
+.controlpanel-widget {
+  @include widget;
+  margin: 6px;
+}
+
+@mixin icon() {
+  font-size: 20px;
+  padding: 2px 0px;
+  font-family: "Symbols Nerd Font";
+}
+
+.icon {
+  @include icon;
+}

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

@@ -0,0 +1,46 @@
+.clock {
+  @include widget;
+
+  label {
+    font-size: 20px;
+  }
+}
+
+.language {
+  @include widget;
+
+  label {
+    font-size: 18px;
+  }
+}
+
+.logo {
+  @include widget;
+
+  label {
+    @include icon;
+
+    color: $accent;
+  }
+}
+
+.workspaces {
+  @include widget;
+
+  * {
+    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
+  }
+
+  .workspace {
+    margin: 4px 8px;
+    border-radius: 4px;
+  }
+
+  .workspacething {
+    background-color: $surface2;
+  }
+
+  .workspacethingactive {
+    background-color: $accent;
+  }
+}

hypr-configs/hyprland/eww/assets/scss/windows/vbar.scss

@@ -2,35 +2,6 @@
   min-width: 2.6em;
   padding: 0.4em;
   background-color: $base;
-
-  .workspaces {
-    @include widget;
-
-    * {
-      transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
-    }
-
-    .workspace {
-      margin: 4px 8px;
-      border-radius: 4px;
-    }
-
-    .workspacething {
-      background-color: $surface2;
-    }
-
-    .workspacethingactive {
-      background-color: $accent;
-    }
-  }
-}
-
-.icon {
-  font-size: 20px;
-  min-width: 1em;
-  min-height: 1em;
-  font-family: "Symbols Nerd Font";
-  padding: 2px 0px;
 }
 
 .revealtouch {
@@ -39,10 +10,6 @@
   color: $surface2;
 }
 
-.clock label {
-  font-size: 20px;
-}
-
 .bat_scale trough {
   min-height: 50px;
   min-width: 18px;
@@ -131,11 +98,6 @@
   margin-top: 30px;
 }
 
-.launchicon {
-  @extend .icon;
-  color: $accent;
-}
-
 .picon {
   @extend .icon;
 }

hypr-configs/hyprland/eww/eww.scss

@@ -1,6 +1,8 @@
 @import "./assets/scss/themes/fullerene.scss";
-@import "./assets/scss/global.scss";
+@import "./assets/scss/mixin";
-@import "./assets/scss/native.scss";
+@import "./assets/scss/native";
+@import "./assets/scss/global";
+@import "./assets/scss/modules";
 
 @import "./assets/scss/widgets/revealer.scss";
 
@@ -13,6 +15,5 @@
 
 * {
   all: unset;
-  color: $white;
   font-family: "Iosevka Nerd Font";
 }

hypr-configs/hyprland/eww/eww.yuck

@@ -3,6 +3,8 @@
 (include "./src/-components/_helpers.yuck")
 (include "./src/-modules/_language.yuck")
 (include "./src/-modules/_workspaces.yuck")
+(include "./src/-modules/_clock.yuck")
+(include "./src/-modules/_logo.yuck")
 
 (include "./setups/sidebar.yuck")
 (include "./setups/panel.yuck")

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

@@ -5,7 +5,7 @@
     (box
       :orientation "v"
       :space-evenly false
-      :class "widget clock"
+      :class "clock"
       (label :text thour)
       (label :text tmin)
       (label :text tpm))))

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

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

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

@@ -0,0 +1,7 @@
+(defwidget Logo []
+  (eventbox
+    :cursor "pointer"
+    :onclick "${EWW_CMD} update revealControlpanel=${ !revealControlpanel }"
+    :onrightclick "${EWW_CMD} open wallpaperselect --toggle"
+    (box :class "logo"
+      (label :text ""))))

hypr-configs/hyprland/eww/src/windows/vbar/main.yuck

@@ -9,6 +9,7 @@
       :transition "slideleft"
       :reveal revealControlpanel
       (control_widget))
+
     (centerbox
       :class "vbar"
       :orientation "v"
@@ -23,7 +24,7 @@
     :space-evenly false
     :valign "start"
     :vexpand false
-    (home)
+    (Logo)
     (Workspaces)
     (hiddenctl)
     ))
@@ -51,25 +52,10 @@
     ; (systemtray)
     (Language)
     (sliders)
-    (clock)
+    (Clock)
-    ; (battery)
+    ;; (battery)
     ))
 
-(defwidget home []
-  (box
-    :class "widget"
-    :hexpand false
-    :vexpand false
-    (eventbox
-      ;; :onclick "~/.config/eww/meowidgets/scripts/launch"
-      ;; :onclick "~/.config/eww/meowayland/scripts/launch"
-      ;; :onclick "./scripts/pop control"
-      :onclick "${EWW_CMD} update revealControlpanel=${ !revealControlpanel }"
-      :onrightclick "${EWW_CMD} open wallpaperselect --toggle"
-      :cursor "pointer"
-
-      (label :text "" :halign "center" :class "launchicon" :style "padding: 2px 0px;"))))
-
 (defwidget systemtray []
   (box 
     :class "widget"
@@ -88,18 +74,6 @@
         ))
     ))
 
-(defwidget clock [] 
-  (eventbox
-    :cursor "pointer"
-    :onclick "${EWW_CMD} open calendar --toggle"
-    (box 
-      :orientation "v"
-      :space-evenly false
-      :class "widget clock"
-      (label :text thour)
-      (label :text tmin)
-      (label :text tpm))))
-
 (defwidget battery [] 
   (box
     :orientation "v"