From 4e5ab1a9d320f52efb8a2406843ba689308fc4bd Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Thu, 15 Jun 2023 14:07:45 +0200
Subject: [PATCH] Bar update

---
 eww/.config/eww/eww.scss | 162 ++++++++-----------------
 eww/.config/eww/eww.yuck | 254 ++++++++++++++++++---------------------
 2 files changed, 165 insertions(+), 251 deletions(-)

diff --git a/eww/.config/eww/eww.scss b/eww/.config/eww/eww.scss
index 6be7e14..5a808dd 100644
--- a/eww/.config/eww/eww.scss
+++ b/eww/.config/eww/eww.scss
@@ -29,160 +29,100 @@ $anim-transition: 150ms;
 
 * {
   all: unset; //Unsets everything so you can style everything from scratch
-  font-family: "Fira Code";
-  // color: $fg-color;
+  font-family: "Lato Mono";
 }
 
 tooltip {
   color: $fg-alt-color;
   background-color: $bg-alt-color;
+  border-radius: 12px;
 }
 
 .bar-1,
 .bar-2 {
-  background-color: $bg-color;
-  color: $fg-alt-color;
-  border-right: solid 1px $border-color;
-}
-
-.segment-end {
-}
-
-// Styles on classes (see eww.yuck for more information)
-button {
-  transition-property: opacity, color;
-  transition-duration: $anim-transition;
+  background-color: rgba(0, 0, 0, 0.65);
 }
 
-// Workspaces
-.workspaces {
-	  padding: .3rem;
+.main-cont {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 0;
+  padding-top: 4px;
 }
 
-.workspaces > button {
-  font-size: $font-size;
-  margin: 4px;
+.segment-start,
+.segment-middle,
+.segment-end {
 }
 
-.workspaces > button:hover {
-  color: $fg-sel-color;
-  opacity: 0.8;
+.icon {
+  opacity: 1;
+  transition: opacity $anim-transition;
 }
 
-button.active {
-  // font-weight: bold;
-  color: $fg-sel-color;
+.icon:hover {
+  opacity: 0.6;
 }
 
-button.inactive {
-  color: $fg-desel-color;
+.inactive,
+.active {
+  font-size: 1.28rem;
 }
 
-// Generic stuff
-scale trough {
-  all: unset;
-  background-color: $bg-alt-color;
-  border-radius: 5px;
-  min-height: 60px;
-  min-width: 4px;
-  margin: 0.3rem 0 0.3rem 0;
-}
-
-// Menu
-.powermenu {
+.inactive {
+  color: $fg-color;
   transition: color $anim-transition;
-  // border-right: solid 1px $border-color;
-  padding: 0.5rem 0.2rem 0.3rem 0.2rem;
+  color: $fg-color;
 }
-
-.quit,
-.lock,
-.reboot,
-.poweroff {
-  // padding: .5rem .2rem .3rem .2rem;
+.active {
+  color: $fg-color;
 }
 
-// Colors for the buttons
-.lock:hover {
-  color: $blue;
-}
-.quit:hover {
-  color: $green;
-}
-.reboot:hover {
-  color: $yellow;
-}
-.poweroff:hover {
-  color: $red;
+.pm-inner {
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.pm-active {
-  // background-color: $bg-alt-color;
-  // border-radius: 5px;
+.icon {
+  font-size: 1.2rem;
+  padding-left: 6px;
+  padding-right: 6px;
 }
 
-.pm-inner {
-  padding: 0.2rem 0;
+.logo {
+  font-weight: 600;
 }
 
-// Control
-.control {
-  margin-bottom: $logo-size;
-  margin-bottom: 0.5rem;
-  font-family: Material Icons;
-  font-size: 1.6em;
+.logo-seperator {
+  border-left: 2px solid $fg-color;
 }
 
-.icon {
-  margin: 0 0.2rem;
-  font-size: $icon-size;
-  font-family: Material Icons;
-  padding: 0 1px;
+.time {
+  font-size: 1rem;
+  font-weight: 600;
 }
 
-.icon:hover {
-  opacity: 0.6;
+// Volume stuff
+.vol {
+ padding-left: 0;
 }
 
-// Volume stuff
 .volbar trough highlight {
   background-color: $fg-accent;
-  border-radius: 5px;
-}
-
-// Time
-.time {
-  // color: $fg-alt-color;
-  font-size: 11px;
-  font-weight: bold;
-  border-top: solid 2px $fg-alt-color;
-  padding-top: 1rem;
-  margin-bottom: 0.5rem;
+  border-radius: 8px;
 }
 
-// Logo button
-.logo {
-  margin: 0 0.8rem;
-  margin-top: 6px;
-  font-size: $logo-size;
-}
-
-.logo-seperator {
-  border-bottom: 2px solid $border-color;
-  padding-bottom: 0.4rem;
+scale trough {
+  all: unset;
+  background-color: $bg-alt-color;
+  border-radius: 8px;
+  min-height: 6px;
+  min-width: 70px;
+  margin: 0px 8px 0px 0px;
 }
 
-// Color overrides
 .red {
   color: $red;
-  opacity: 0.8;
-}
-
-// Music widget
-.musicmenu {
-  // background-color: $bg-alt-color;
-}
-
-.mm-inner {
-  color: $blue;
 }
diff --git a/eww/.config/eww/eww.yuck b/eww/.config/eww/eww.yuck
index 597360a..4a7c8b8 100644
--- a/eww/.config/eww/eww.yuck
+++ b/eww/.config/eww/eww.yuck
@@ -1,81 +1,63 @@
-(defwidget bar [screen]
-  (box :orientation "v"
-       :vexpand "false"
-       :hexpand "false"
-    (box :class "segment-start"
-         :valign "start"
-         :halign "center"
-         :space-evenly false
-         :orientation "v"
-         :space-evenly false
-      (power :screen screen)
-    )
-    (box :class "segment-mid"
-         :valign "center"
-         :halign "center"
-         :orientation "v"
-         :space-evenly false
-      (workspaces :wsp workspaces-data :screen screen)
-    )
-    (box :class "segment-end"
-         :valign "end"
-         :halign "center"
-         :orientation "v"
-         :space-evenly true
-      (control :screen screen)
-    )
-  )
+(defwidget bar-1 [screen]
+	(box :class "main-cont"
+		 :orientation "h"
+		(box :class "segment-start"
+			:halign "start"
+			:valign "center"
+			(start-control :screen screen)
+		)
+		(box :class "segment-middle"
+			:halign "center"
+			:valign "center"
+			:space-evenly true
+			(mid-control)
+		)
+		(box :class "segment-end"
+			:halign "end"
+			:valign "center"
+			(end-control)
+		)
+	)
 )
 
 (defwidget bar-2 [screen]
-  (box :orientation "v"
-       :vexpand "false"
-       :hexpand "false"
-    (box :class "segment-start"
-         :valign "start"
-         :halign "center"
-         :space-evenly false
-         :orientation "v"
-         :space-evenly false
-      ;; (power :screen screen)
-    )
-    (box :class "segment-mid"
-         :valign "center"
-         :halign "center"
-         :orientation "v"
-         :space-evenly false
-      (workspaces :wsp workspaces-data :screen screen)
-    )
-    (box :class "segment-end"
-         :valign "end"
-         :halign "center"
-         :orientation "v"
-         :space-evenly true
-        (control-2 :screen screen)
-    )
-  )
+	(box :class "main-cont"
+		 :orientation "h"
+		(box :class "segment-start"
+			:halign "start"
+			:valign "center"
+			(start-control :screen screen)
+		)
+		(box :class "segment-middle"
+			:halign "center"
+			:valign "center"
+			:space-evenly true
+			(mid-control)
+		)
+		(box :class "segment-end"
+			:halign "end"
+			:valign "center"
+		)
+	)
 )
 
 ;; Powermenu widget
 (defwidget power []
   (eventbox  ;;:onhover "${EWW_CMD} update power=true"
              :onhoverlost "${EWW_CMD} update power=false"
-    (box     :orientation "v"
+    (box     :orientation "h"
              :space-evenly "false"
              :vexpand "false"
              :class "powermenu ${power ? 'pm-active' : ''}"
       ;; Open menu button
-      (button    :class "icon logo ${power ? 'logo-seperator' : ''}"
-                 :tooltip "Open menu"
-                 :onclick "${EWW_CMD} update power=true"  "Λ")
-      (revealer  :transition "slidedown"
+      (revealer  :transition "slideleft"
                  :reveal power
                  :duration "450ms"
-        (box     :orientation "v"
+        (box     :orientation "h"
                  :class "pm-inner"
                  :space-evenly true
-                 :halign "middle"
-                 :spacing 6
+                 :valign "middle"
+                 :spacing 16
 
           ;; Lock screen
           (button    :class "icon lock"
@@ -98,72 +80,64 @@
                      :onclick "poweroff"  "")
 
         ))
+	  (button    :class "icon logo ${power ? 'logo-seperator' : ''}"
+				   :tooltip "Open menu"
+				   :onclick "${EWW_CMD} update power=true"  "Λ")
         )))
 (defvar power false)
 
 ;; Control widget (container)
-(defwidget control []
-  (box :class "control" :spacing 12 :space-evenly false :orientation "v"
-    ;; (wifi)
-    ;; (bat)
-    (music)
-    (volume)
-    (time)
+(defwidget start-control [screen]
+  (box :class "control" :spacing 16 :space-evenly false :orientation "h"
+	(workspaces :wsp workspaces-data :screen screen)
     )
   )
-
-(defwidget control-2 []
-  (box :class "control" :spacing 12 :space-evenly false :orientation "v"
-    ;; (wifi)
-    ;; (bat)
-    ;; (music)
-    ;; (volume)
+(defwidget mid-control []
+  (box :class "control" :spacing 16 :space-evenly false :orientation "h"
     (time)
     )
   )
+(defwidget end-control []
+  (box :class "control" :spacing 16 :space-evenly false :orientation "h"
+    (music)
+    (volume)
+    (power)
+    )
+  )
 
 ;; Clock Widget
 (defwidget time []
-  (box  :orientation "v"
+  (box  :orientation "h"
       :class "time"
-      :valign "end"
-  (button  :onclick "scripts/popup calendar"
-      :class "hour" hour)
-  (button  :onclick "scripts/popup calendar"
-      :class "min"  min)
+	  :space-evenly "false"
+      :halign "middle"
   (button  :onclick "scripts/popup calendar"
-      :class "sec"  sec)
+      :class "day" full-time)
   ))
-(defpoll hour  :interval "1s"  "date '+%H'")
-(defpoll min  :interval "1s"  "date '+%M'")
-(defpoll sec :interval "1s"  "date '+%S'")
+(defpoll full-time :interval "1s"  "date +'%d %B (%m), %Y - %A %H:%M:%S'")
 
 ;; Volume widget
 (defwidget volume []
-  (eventbox     :onhover "${EWW_CMD} update volume=true"
-                :onhoverlost "${EWW_CMD} update volume=false"
-    (box        :orientation "v"
-                :space-evenly "false"
-                :spacing 2
-      (revealer :transition "slideup"
-                :reveal volume
-                :duration "450ms"
-        (scale  :class "volbar"
-                :value current-volume
-                :orientation "v"
-                :flipped true
-                :tooltip "Volume: ${current-volume}%"
-                :max 101
-                :min 0
-                :onchange "amixer -D pulse sset Master {}%"
-          )
-        )
-      (button   :onclick "amixer -D pulse set Master 1+ toggle"
-                :class "icon volume + ${muted-volume != 'on' ? 'red' : ''}"
-                :tooltip "Volume: ${current-volume}%"
-                {muted-volume != "on" ? "󰝟" : "󰕾"}
-      )
-  )))
+  (eventbox :onhover "${EWW_CMD} update volume=true"
+			  :onhoverlost "${EWW_CMD} update volume=false"
+	  (box :class "" :space-evenly "false" :orientation "h" :spacing "4" 
+		(revealer :transition "slideleft"
+				  :reveal volume
+				  :duration "350ms"
+			(scale    :class "volbar"
+					  :value current-volume
+					  :flipped true
+					  :orientation "h"
+					  :max 100
+					  :min 0
+					  :onchange "amixer -D pulse sset Master {}%" )
+			)
+		(button   :onclick "amixer -D pulse set Master 1+ toggle"
+				  :class "icon vol" {muted-volume != "on" ? "󰝟" : "󰕾"}
+				  )
+	   )
+  )
+)
 (defvar volume false)
 (defpoll current-volume :interval "1ms" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
 (defpoll muted-volume :interval "1ms" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $4 }' | tr -d '%'")
@@ -191,7 +165,7 @@
 
 ;; Workspaces container
 (defwidget workspaces [wsp]
-  (box :space-evenly true :spacing 4 :orientation "v" :class "workspaces"
+  (box :space-evenly true :spacing 16 :orientation "h" :class "workspaces"
    (for ws in wsp
         (workspace :data ws)
     )))
@@ -200,48 +174,47 @@
 (defwidget workspace [data]
    (button :onclick "wmctrl -s ${data['index']}"
            :class {data["iscurrent"] == true ? "active" : "inactive"}
-           "${data['name']}"
+           ;; "${data['name']}"
+		   :tooltip "Switch to workspace ${data['name']}"
+		   {data["iscurrent"] == true ? "" : ""}
            ))
 (deflisten workspaces-data "scripts/workspace.py")
 
 ;; Music widget
 (defwidget music []
-  (revealer      :reveal {music-active == "true"}
-    (eventbox    :onhover "${EWW_CMD} update music=true"
-                 :onhoverlost "${EWW_CMD} update music=false"
-        (box     :orientation "v"
+  (revealer     :reveal {music-active == "true"}
+    (eventbox   :onhover "${EWW_CMD} update music=true"
+                :onhoverlost "${EWW_CMD} update music=false"
+        (box    :orientation "h"
                 :space-evenly "false"
-                :vexpand "false"
                 :class "musicmenu ${music ? 'mm-active' : ''}"
-        (revealer  :transition "slideup"
+        (revealer   :transition "slideleft"
                     :reveal music
                     :flipped true
                     :duration "450ms"
-            (box     :orientation "v"
+            (box    :orientation "h"
                     :class "mm-inner"
                     :space-evenly true
-                    :halign "middle"
-                    :spacing 4
+                    :valign "center"
+                    :spacing 8
 
-                ;; Next
-                (button    :class "icon next"
+                ;; Pause
+                (button    :class "icon prev"
                             :tooltip "Pause/play"
-                            :onclick "playerctl next" "")
+                            :onclick "playerctl previous" "")
                 ;; Pause
                 (button    :class "icon pause"
                             :tooltip "Pause/play"
-                            :onclick "playerctl play-pause" {music-status == "Playing" ? "󰏤" : ""})
-
-                ;; Pause
-                (button    :class "icon prev"
+                            :onclick "playerctl play-pause" {music-status == "Playing" ? "󰏤" : "󰐊"})
+                ;; Next
+                (button    :class "icon next"
                             :tooltip "Pause/play"
-                            :onclick "playerctl previous" "")
-
+                            :onclick "playerctl next" "")
             ))
         ;; Open menu button
         (button     :class "icon"
-                    :tooltip "${title} - ${artist}"
-                    :onclick "${EWW_CMD} update music=true"  "")
+                    :tooltip "Music"
+                    :onclick "${EWW_CMD} update music=true"  "󰎈")
 
             )
     )))
@@ -261,23 +234,24 @@
   :windowtype "dock"
   :geometry (geometry :x "0%"
                       :y "0%"
-                      :width "42px"
-                      :height "100%"
-                      :anchor "left center")
-  :reserve (struts :side "left" :distance "42px")
+                      :width "100%"
+                      :height "32px"
+                      :anchor "top center")
+  :reserve (struts :side "top" :distance "32px")
   :hexpand "false"
   :vexpand "false"
-  (bar :screen 1))
+  (bar-1 :screen 1))
 
 (defwindow bar-2
   :monitor 1
   :windowtype "dock"
   :geometry (geometry :x "0%"
                       :y "0%"
-                      :width "42px"
-                      :height "100%"
-                      :anchor "left center")
-  :reserve (struts :side "left" :distance "42px")
+                      :width "100%"
+                      :height "32px"
+                      :anchor "top center")
+  :reserve (struts :side "top" :distance "32px")
   :hexpand "false"
   :vexpand "false"
   (bar-2 :screen 2))
+