From 3ceaf2c0cab24eb212aa25c7c63c249680186805 Mon Sep 17 00:00:00 2001 From: Joakim Hulthe Date: Wed, 8 May 2024 23:51:44 +0200 Subject: [PATCH] Improve ewwbar --- tree/.config/eww/eww.scss | 55 ++++++++++++++++++------------ tree/.config/eww/eww.yuck | 71 +++++++++++++++++++++++++++++++-------- 2 files changed, 91 insertions(+), 35 deletions(-) diff --git a/tree/.config/eww/eww.scss b/tree/.config/eww/eww.scss index d3bc50f..20df234 100644 --- a/tree/.config/eww/eww.scss +++ b/tree/.config/eww/eww.scss @@ -1,9 +1,9 @@ -//$text: wheat; $text: #f6daa8; $highlight1: #4e8172; $highlight2: #679a8b; -$background: #1d2021; $background: #23231b; +$lowlight1: black; +$lowlight2: #1d1f21; *{ all: unset; @@ -20,21 +20,19 @@ window { font-size: 18px; font-weight: 300; border: solid $highlight1 1px; - background: black; + background: $lowlight1; border-radius: 30px; padding-top: 3px; padding-bottom: 5px; margin: 8px; margin-top: 3px; margin-bottom: 3px; - box-shadow: 0 0px 5px 1px #06060b; + box-shadow: 0 0px 5px 1px #06060b; transition: all 1s; } .workspace.active { - font-weight: 600; - background: $text; - color: black; + border: solid $highlight2 2px; } .workspaces { @@ -47,21 +45,29 @@ window { border-top: solid $highlight1 1px; border-bottom: dotted $highlight1 6px; color: $highlight1; - background: black; + background: $lowlight1; border-radius: 30px; padding-top: 0.5em; padding-bottom: 0.3em; - box-shadow: 0 0px 5px 1px #06060b; + margin-top: 20px; } scale trough { - all: unset; - background-color: #22242b; - box-shadow: 0 0px 5px 1px #06060b; - border-radius: 16px; - min-width: 16px; - min-height: 70px; - margin: 0px 0px 0px 0px; + all: unset; + background-color: #22242b; + box-shadow: 0 0px 5px 1px #06060b; + border-radius: 16px; + min-width: 16px; + min-height: 70px; + margin: 0px 0px 0px 0px; +} + +.volbox { + transition: all 0.5s; +} + +.volbox.active { + background-color: $lowlight2; } .volume { @@ -69,8 +75,8 @@ scale trough { } .volume trough highlight { - background-image: linear-gradient(to right, $highlight2 30%, $highlight1 50%, $highlight1 100% *50); - border-radius: 10px; + background-image: linear-gradient(to right, $highlight2 30%, $highlight1 50%, $highlight1 100% *50); + border-radius: 10px; } .battery { @@ -84,8 +90,7 @@ scale trough { border-color: green; margin: 2px; margin-top: 20px; - transition: border-color 1s; - transition: all 1s; + transition: all 0.2s; } .vpn label { @@ -94,7 +99,11 @@ scale trough { } .vpn:hover { - border-top: dotted 6px; + background-color: $lowlight2; +} + +.vpn:active { + background-color: $highlight1; } .vpn.connecting { @@ -105,6 +114,10 @@ scale trough { border-color: red; } +.calendar { + background: $lowlight2; +} + .clock { font-size: 30px; font-weight: 400; diff --git a/tree/.config/eww/eww.yuck b/tree/.config/eww/eww.yuck index a362809..de8aad9 100644 --- a/tree/.config/eww/eww.yuck +++ b/tree/.config/eww/eww.yuck @@ -7,8 +7,9 @@ :anchor "center left") :stacking "fg" :exclusive true - (box :orientation "v" + (centerbox :orientation "v" (workspaces) + (middle) (bottom) )) @@ -21,18 +22,27 @@ :anchor "center left") :stacking "fg" :exclusive true - (box :orientation "v" + (box :orientation "v" :space-evenly: false (workspaces) (bottom) )) +(defwidget middle [] + (box :orientation "v" + :space-evenly false + :valign "center" +)) + (defwidget bottom [] (box :orientation "v" :space-evenly false :valign "end" - (speaker) (vpn) + (speaker) + (temperature) (battery) + (box :class "boxed" (systray :orientation "v")) + (date) (clock) )) @@ -40,37 +50,69 @@ (box :orientation "v" :valign "start" :class "workspaces" + :space-evenly: false (for workspace in workspaces_json - (label :class 'workspace ${workspace.class}' :text '${workspace.id}') + (button :class 'workspace ${workspace.class}' (label :text '${workspace.id}')) ))) (defwidget speaker [] - (box :class "volume" - :orientation "v" - :valign "end" - (scale :orientation "v" - :flipped true - :min 0 - :max 100 - :value volume_out - :onchange "pamixer --set-volume {} && volshow") -)) + (eventbox + :onhover "${EWW_CMD} update show_volume=true" + :onhoverlost "${EWW_CMD} update show_volume=false" + (box :orientation "v" + :class "boxed volbox ${show_volume ? "active" : ""}" + :space-evenly false + (revealer :transition "slidedown" + :reveal show_volume + (scale :orientation "v" + :class "volume" + :flipped true + :min 0 + :max 100 + :value volume_out + :onchange "pamixer --set-volume {} && volshow" + )) + (label :text "VOL") + (revealer :transition "slideup" + :reveal {!show_volume} + (label :text volume_out) + ) +))) (defwidget vpn [] (button :valign "end" :class "vpn boxed ${vpn_status.class}" :onclick "${vpn_status.on_click}" + :tooltip "${vpn_status.tooltip}" (label :text "${vpn_status.icon}") )) +(defwidget temperature [] + (box :orientation "v" + :valign "end" + :class "battery boxed" + (label :text "TMP") + (label :text "99C") +)) + (defwidget battery [] (box :orientation "v" :valign "end" :class "battery boxed" + :visible {current_battery != ""} (label :text "BAT") (label :text "${current_battery}%") )) +(defwidget date [] + (tooltip :class "boxed date" :halign "fill" + (calendar :class "calendar") + + (box :orientation "v" :hexpand true + (label :text current_month) + (label :text current_day) +))) + (defwidget clock [] (box :orientation "v" :valign "end" @@ -79,6 +121,7 @@ (label :text current_minute) )) +(defvar show_volume false) (defpoll workspaces_json :interval "1s" "eww-workspaces") (defpoll volume_out :interval "1s" "pamixer --get-volume") (defpoll vpn_status :interval "1s" "mullvad-status")