✨ feat(eww): a lot of stuff fixed, prettier active window and media widgets

eww/eww.yuck

@@ -3,13 +3,14 @@
 (include "./windows/control-center.yuck")
 
 ; Widgets
-(include "./widgets/workspaces.yuck")
+(include "./widgets/bar/workspaces.yuck")
-(include "./widgets/clock.yuck")
+(include "./widgets/bar/clock.yuck")
-(include "./widgets/notifications.yuck")
+(include "./widgets/bar/notifications.yuck")
-(include "./widgets/audio.yuck")
+(include "./widgets/bar/audio.yuck")
-(include "./widgets/media.yuck")
+(include "./widgets/bar/media.yuck")
-(include "./widgets/logo.yuck")
+(include "./widgets/bar/logo.yuck")
-(include "./widgets/window.yuck")
+(include "./widgets/bar/window.yuck")
+(include "./widgets/bar/network.yuck")
 
 (defwindow bar 
     :monitor 0
@@ -43,7 +44,8 @@
                  :prepend-new true
                  :class "systray"
         )
-        (audio)
+;        (audio)
+        (network)
         (notifications)
       )
     )

eww/scripts/mediaplayer.py

@@ -133,7 +133,6 @@ class PlayerManager:
             "status": player.props.status.lower(),
             "title": player.get_title(),
             "artist": player.get_artist(),
-            # "art": , somehow get album art metadata
             "player": player.props.player_name.lower()
         }
 

eww/scripts/network.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+is_connected() {
+    
+}

eww/scripts/workspaces.sh

@@ -5,7 +5,7 @@ hyprctl -j workspaces | jq -c
 
 handle() {
   case $1 in
-    workspace*) hyprctl -j workspaces | jq -c ;;
+    workspace* | destroyworkspace*) hyprctl -j workspaces | jq -c ;;
   esac
 }
 

eww/styles/bar.scss

@@ -1,7 +1,13 @@
 
+$foreground: lighten($color: $foreground, $amount: 10);
+
 .bar {
     background: transparent;
     padding: 4px;
+
+    & label {
+        font-weight: 500;
+    }
 }
 
 /* Styles .widgets-[left/center/right] */
@@ -28,14 +34,15 @@
 button {
     padding: 6px 10px;
     border-radius: 12px;
+    background: none;
 }
 
 button:hover {
-    background: darken($color: $color1, $amount: 5);
+    background: $color3;
 }
 
 button:active {
-    background: darken($color: $color1, $amount: 20)
+    background: darken($color: $color3, $amount: 10);
 }
 
 button label {
@@ -103,12 +110,9 @@ menu {
 }
 
 .distro-logo {
-    padding: 0 14px;
+    padding: 0;
-
+    padding-left: 12px;
-    & > button {
+    padding-right: 6px;
-        padding: 0;
-        margin: 0;
-    }
 
     & > label {
         font-size: 15px;
@@ -124,25 +128,72 @@ menu {
     }
 }
 
+
 .mediaplayer {
     border-radius: 12px;
     box-shadow: inset 0 0 0px 2px $color3;
     padding: 0 4px;
+    padding-right: 0px;
 
-    & > label {
+    & label.media-title,
+    & label.media-artist {
         margin: 0 4px;
         padding-right: 5px;
+        color: $foreground;
+        font-size: inherit;
+
+        &.media-title {
+            margin-top: 6px;
+            margin-bottom: 6px;
+            border-right: .5px solid darken($color: $foreground, $amount: 20);
+        }
+    }
+
+    &.revealed label.media-artist {
         border-right: 2px solid $color3;
     }
 
-    & > button {
+    & button {
         padding: 0 7px;
-        border-radius: 4px;
+        border-radius: 0px;
-        margin: 2px 2px;
     }
 }
 
+.window {
+    padding: 0 4px;
+    padding-right: 6px;
+
+    & > .window-icon {
+        padding-right: 24px;
+        margin-right: 4px;
+        background-position: center;
+        background-size: 24px;
+        background-repeat: no-repeat;
+    }
+
+    & > label.window-class {
+        font-size: 10px;
+        font-family: monospace;
+        color: darken($color: $foreground, $amount: 20);
+    }
+
+    & > label.window-title {
+        margin-top: -2px;
+        font-size: inherit;
+        color: $foreground;
+    }
+}
+
+.network {
+    padding-left: 10px;
+    padding-right: 7px;
+}
+
 .notifications button {
-    padding-left: 11px;
+    padding-left: 12px;
-    padding-right: 11px;
+    padding-right: 10px;
+
+    &.open, &:hover {
+        background: $color3;
+    }
 }

eww/styles/calendar.scss

@@ -1,9 +1,30 @@
-.widget-calendar {
+
-    padding: 24px;
+.calendar-box {
+    padding: 12px;
     background: rgba($background, 0.6);
     border-radius: 16px;
 
-    & > .title {
+    & > label.calendar-header {
-        background: $color1;
+        font-size: 15px;
+        font-weight: 700;
+    }
+
+    .month-calendar {
+        transition: all 120ms linear;
+        border-radius: 8px;
+        padding: 6px;
+        font-weight: 600;
+
+        & > .header {
+            border-radius: 6px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom: solid .5px gray;
+        }
+
+        // Selected day / Current day
+        &:selected {
+            background: darken($color: $color3, $amount: 20);
+        }
     }
 }

eww/styles/control-center.scss

@@ -1,5 +1,9 @@
 
-.control-center {
+// window.control-center {}
-    background: green;
+
+box.cc {
+    margin: 16px;
+    background: rgba($background, .85);
     border-radius: 16px;
+    border: 2px solid darken($color: $color3, $amount: 20);
 }

eww/widgets/bar/audio.yuck

@@ -1,10 +1,10 @@
 
-(deflisten volume_out :initial '{ "volume": "100%" }'
+;(deflisten volume_out :initial '{ "volume": "100%" }'
-`sh -c "source './scripts/volume.sh'; get_json_loop"`)
+;`sh -c "source './scripts/volume.sh'; get_json_loop"`)
 
 (defwidget audio []
     (eventbox
         :onscroll `[[ {} == "up" ]]; sh -c "source './scripts/volume.sh'; increase_vol" || sh -c "source './scripts/volume.sh'; decrease_vol"`
-        (button "󰕾 ${volume_out.volume}")
+        (button "󰕾 ")
     )
 )

eww/widgets/bar/clock.yuck

@@ -1,10 +1,10 @@
 
 (defpoll datetime :interval "10s"
-"date +'%A %d, %H:%M'")
+`date +"%A %d, %H:%M"`)
 
 (defwidget clock []
     (box :class "clock"
-      (button :onclick "eww open calendar --toggle"
+      (button :onclick "eww open calendar-window --toggle"
       "${datetime}")
     )
 )

eww/widgets/bar/logo.yuck

@@ -0,0 +1,5 @@
+(defwidget logo []
+    (button :class "distro-logo"
+            :onclick "hyprctl dispatch exec anyrun"
+    " ")
+)

eww/widgets/bar/media.yuck

@@ -0,0 +1,40 @@
+
+(defvar media_reveal_controls false)
+
+(deflisten media :initial "{}"
+`python3 ./scripts/mediaplayer.py`)
+
+(defwidget media [] 
+    (eventbox :onhover "eww update media_reveal_controls=true"
+              :onhoverlost "eww update media_reveal_controls=false"
+        (box :class "mediaplayer ${ media_reveal_controls ? 'revealed' : '' }"
+             :space-evenly false
+             :visible { media.title == "null" && media.artist == "null" ?
+                    false 
+                : 
+                    "${ active_window.class =~ media.player || active_window.title =~ media.title ? false : true }" 
+                }
+
+          (label :class "media-title" 
+                 :text "${media.title}")
+          (label :class "media-artist"
+                 :text "${media.artist}")
+          (revealer :class "media-controls-revealer"
+                    :reveal { media_reveal_controls ? true : false }
+                    :transition "slideright"
+                    :duration "180ms"
+              (box
+                  (button :class "previous"
+                          :onclick "playerctl previous --player=${media.player}"
+                  "󰒮")
+                  (button :class "toggle play-pause"
+                          :onclick "playerctl play-pause --player=${media.player}"
+                  { media.status == "playing" ? "󰏤" : "󰐊" })
+                  (button :class "next"
+                          :onclick "playerctl next --player=${media.player}"
+                  "󰒭")
+              )
+          )
+        )
+    )
+)

eww/widgets/bar/network.yuck

@@ -0,0 +1,9 @@
+(defpoll connection_status :interval "2s"
+`nmcli n c`)
+
+(defwidget network []
+    (box
+        (button :class "network"
+        { connection_status == "full" || connection_status == "partial" ? " " : "󰤭 " })
+    )
+)

eww/widgets/bar/notifications.yuck

@@ -0,0 +1,10 @@
+(deflisten json_notifications :initial "{ \"text\": 0, \"class\": [\"notification\"] }"
+`swaync-client -swb`)
+
+(defwidget notifications []
+    (box :class "notifications"
+      (button :onclick "swaync-client -t" 
+              :class { json_notifications.class =~ "cc-open" ? 'open' : '' }
+      { json_notifications.alt == "dnd-notification" ? " " : '${ json_notifications.text == 0 ? " " : " " }' })
+    )
+)

eww/widgets/bar/window.yuck

@@ -0,0 +1,19 @@
+
+(deflisten active_window :initial `{ "title": "null", "class": "null" }`
+`sh ./scripts/active-window.sh`)
+
+(defwidget window []
+    (eventbox
+        (box :class "window"
+                :visible { active_window.class == "null" ? false : true }
+                :vexpand false
+                :space-evenly false
+                :orientation { active_window.title == "" ? "horizontal" : "vertical" }
+            (label :class "window-class"
+                   :text "${active_window.class}")
+            (label :class "window-title"
+                   :text "${active_window.title}"
+                   :visible { active_window.title != "" ? true : false })
+        )
+    )
+)

eww/widgets/control-center/quickactions.yuck

@@ -0,0 +1,10 @@
+(defpoll uptime_info :interval "25s"
+`echo "$(cat /etc/hostname), Uptime: $( uptime -p | sed -e 's/^up //')"`)
+
+
+(defwidget quickactions []
+    (box :orientation "horizontal"
+        (label :xalign 0
+               :text "${uptime_info}")
+    )
+)

eww/widgets/logo.yuck

@@ -1,4 +0,0 @@
-(defwidget logo []
-    (button :class "distro-logo"
-    "")
-)

eww/widgets/media.yuck

@@ -1,21 +0,0 @@
-
-(deflisten media :initial "{}"
-`python3 ./scripts/mediaplayer.py`)
-
-(defwidget media [] 
-    (box :class "mediaplayer"
-         :space-evenly false
-         :visible true
-
-      (label :text "${media.title} - ${media.artist}")
-      (button :class "previous"
-              :onclick "playerctl previous --player=${media.player}"
-      "󰒮")
-      (button :class "toggle play-pause"
-              :onclick "playerctl play-pause --player=${media.player}"
-      { media.status == "playing" ? "󰏤" : "󰐊" })
-      (button :class "next"
-              :onclick "playerctl next --player=${media.player}"
-      "󰒭")
-    )
-)

eww/widgets/notifications.yuck

@@ -1,5 +0,0 @@
-(defwidget notifications []
-    (box :class "notifications"
-      (button :onclick "swaync-client -t" "")
-    )
-)

eww/widgets/window.yuck

@@ -1,8 +0,0 @@
-
-(deflisten active_window :initial ""
-`sh ./scripts/active-window.sh`)
-
-(defwidget window []
-    (button :visible { active_window.class == "null" ? false : true }
-    "${active_window.class}: ${active_window.title}")
-)