バーのウィジェットとスタイルを改善し、色設定を追加

Reviewed-on: #1

bar/.yuck

@@ -0,0 +1,98 @@
+(defwindow bar
+  :monitor 1
+  :geometry (geometry
+    :x "0px"
+    :y "0px"
+    :width "100%"
+    :height "0"
+    :anchor "top center"
+  )
+  :stacking "fg"
+  :exclusive true
+  :focusable false
+  (bar)
+)
+
+(defwidget bar []
+  (box :class "bar"
+    :orientation "h"
+    :hexpand true
+    :space-evenly true
+    (left)
+    (center)
+    (right)
+  )
+)
+
+(defwidget left []
+  (box
+    :class "panel"
+    :orientation "h"
+    :halign "start"
+    :valign "fill"
+    :space-evenly false
+    (workspaces_indicator :hexpand true :valign "center")
+  )
+)
+
+(defwidget center []
+  (box
+    :class "panel"
+    :halign "center"
+    :valign "fill"
+    :space-evenly false
+    (label :text "Hareworks" :class "center")
+  )
+)
+
+(defwidget right []
+  (box
+    :class "panel"
+    :orientation "h"
+    :halign "end"
+    :valign "fill"
+    :space-evenly false
+    (system-tray)
+    (label :text time)
+  )
+)
+
+(defwidget workspaces_indicator []
+  (literal
+    :content workspaces_indicator :hexpand true :valign "center"
+  )
+)
+
+(deflisten workspaces_indicator `sh ~/.config/eww/bar/workspace.sh 1`)
+
+(defpoll time :interval "10s"
+"date '+%H:%M %b %d, %Y'")
+
+(defwidget system-tray []
+  (systray
+    :halign "center"
+    :icon-size 24
+    :height 32
+  )
+)
+
+
+(defwindow roundedEdge
+  :monitor 1
+  :geometry (geometry
+    :x "0px"
+    :y "0px"
+    :width "100%"
+    :height "15px"
+  :anchor "top center")
+  :stacking "bg"
+  :exclusive false
+  :focusable false
+  (box :class "roundededge"
+    :orientation "h"
+    :space-evenly false
+    (label :text "" :class "left" :width 15)
+    (label :text "" :class "center" :hexpand true)
+    (label :text "" :class "right" :width 15)
+  )
+)

bar/style.scss

@@ -0,0 +1,43 @@
+@import "../colors.scss";
+
+.bar {
+  font-size: 16px;
+  margin: 0px;
+  background-color: $background_color_dark;
+
+  .panel {
+    background-color: $background_color;
+    border-radius: 16px;
+    margin: 6px;
+    padding: 0 6px 0 6px;
+  }
+
+  .center {
+    padding: 0 10px 0 10px;
+  }
+
+  .workspaces {
+    > .workspace {
+      background: $background_color_dark;
+      border-radius: 50%;
+      border: 2px solid $accent-color;
+      &.focused {
+        background: $accent-color;
+      }
+    }
+    > .label {
+      color: $text-color;
+      padding: 0 26px 0 4px;
+    }
+  }
+}
+
+.roundededge {
+  >.right {
+    background-image: radial-gradient(circle at calc(100% - 15px) 15px, transparent 15px, $background_color_dark 0px);
+  }
+
+  >.left {
+    background-image: radial-gradient(circle at 15px 15px, transparent 15px, $background_color_dark 0px);
+  }
+}

bar/workspace.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+monitor_id=$1
+
+print_workspaces() {
+    buf=""
+    output=$(hyprctl -j workspaces | jq -r ".[] | select(.monitorID == $monitor_id)")
+    focused=$(hyprctl monitors -j | jq -r ".[] | select(.id == $monitor_id) | .activeWorkspace.id")
+    for w in $(echo $output | jq -r '.id'); do
+        text=$(echo $output | jq -r "select(.id == $w) | .name")
+        if [ $w -eq $focused ]; then
+            buf="$buf (button :class \"workspace focused\" :width 20 :height 20)"
+        else
+            buf="$buf (button :class \"workspace\" :width 20 :height 20)"
+        fi
+    done
+    focused=$(echo $output | jq -r "select(.id == $focused) | .name")
+
+    echo "(box :class \"workspaces\" :orientation \"h\" :space-evenly false :spacing 4 :hexpand true :valign \"center\"$buf (label :class \"label\" :text \"$focused\"))"
+}
+
+print_workspaces
+
+socat -U - UNIX-CONNECT:$XDG_RUNTIME_DIR/hypr/$HYPRLAND_INSTANCE_SIGNATURE/.socket2.sock | while read -r line; do
+  case $line in
+    workspace\>\>*)
+        echo $line
+        print_workspaces
+        ;;
+  esac
+done

colors.scss

@@ -0,0 +1,14 @@
+$primary-color: #ff4081;
+$secondary-color: #3f51b5;
+$accent-color: #caf9ff;
+
+$background-color: #3b3b3b;
+$background-color-light: #616161;
+$background-color-dark: #212121;
+$text-color: #e2e2e2;
+$text-color-black: #2c2c2c;
+
+$success-color: #4caf50;
+$error-color: #f44336;
+$warning-color: #ff9800;
+$info-color: #2196f3;

eww.scss

@@ -0,0 +1,5 @@
+* {
+  all: unset;
+}
+
+@import "./bar/style.scss";

eww.yuck

@@ -0,0 +1 @@
+(include "bar/.yuck")