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

Reviewed-on: #1

bar/.yuck

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

@@ -1,19 +1,43 @@
+@import "../colors.scss";
+
 .bar {
-  font-size: 18px;
+  font-size: 16px;
   margin: 0px;
+  background-color: $background_color_dark;
 
   .panel {
-    background: rgba(89, 89, 89, 0.667);
-    border-radius: 15px;
+    background-color: $background_color;
+    border-radius: 16px;
+    margin: 6px;
+    padding: 0 6px 0 6px;
+  }
+
+  .center {
     padding: 0 10px 0 10px;
   }
 
-  .workspace {
-    background: rgba(89, 89, 89, 0.667);
-    border-radius: 15px;
-    padding: 0 10px 0 10px;
-    &.focused {
-      background: rgba(255, 255, 255, 0.667);
+  .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

@@ -8,13 +8,14 @@ print_workspaces() {
     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 (label :class \"workspace focused\" :text \"$text\")"
+            buf="$buf (button :class \"workspace focused\" :width 20 :height 20)"
         else
-            buf="$buf (label :class \"workspace\" :text \"$text\")"
+            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\" :valign \"start\"$buf)"
+    echo "(box :class \"workspaces\" :orientation \"h\" :space-evenly false :spacing 4 :hexpand true :valign \"center\"$buf (label :class \"label\" :text \"$focused\"))"
 }
 
 print_workspaces

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;