From ed4d37e5dcbaa997b2899f09f3fc6d8d59a463b5 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Tue, 24 Dec 2024 12:54:47 -0300 Subject: [PATCH] :sparkles: eww: better user experience with volume menu and control center --- eww/scripts/workspaces.sh | 3 +-- eww/styles/bar.scss | 2 +- eww/styles/control-center.scss | 21 ++++++++++++++++--- eww/styles/general.scss | 6 +++--- eww/styles/volume-control.scss | 2 +- eww/widgets/bar/workspaces.yuck | 8 ++++++- eww/widgets/big-media.yuck | 2 +- eww/widgets/control-center/toggles.yuck | 5 +++-- eww/widgets/volume-control/output-slider.yuck | 3 ++- eww/widgets/volume-control/source-slider.yuck | 3 ++- 10 files changed, 39 insertions(+), 16 deletions(-) diff --git a/eww/scripts/workspaces.sh b/eww/scripts/workspaces.sh index c5c3b0f..48c7bad 100644 --- a/eww/scripts/workspaces.sh +++ b/eww/scripts/workspaces.sh @@ -5,8 +5,7 @@ print_workspaces_literal() { existing_workspaces=$(hyprctl -j workspaces | jq .[].id | xargs) output=" - (box :class \"workspaces\" - :space-evenly false + (box :space-evenly false :orientation \"horizontal\"" for i in {1..10}; do diff --git a/eww/styles/bar.scss b/eww/styles/bar.scss index 1e10301..b693414 100644 --- a/eww/styles/bar.scss +++ b/eww/styles/bar.scss @@ -38,7 +38,7 @@ padding: 2px 0px; border-radius: 50%; - & > button { + & button { $padding-block: 5px; border-radius: 16px; diff --git a/eww/styles/control-center.scss b/eww/styles/control-center.scss index 7122a37..8f71fe0 100644 --- a/eww/styles/control-center.scss +++ b/eww/styles/control-center.scss @@ -136,11 +136,14 @@ box.cc { & > box { background: darken($color: $color2, $amount: 15); } + &:checked > box { + background: $color3; + } } &:checked { & > box { - background: darken($color: $color3, $amount: 12); + background: darken($color: $color3, $amount: 5); } } @@ -155,14 +158,26 @@ box.cc { margin-left: -16px; // This covers the checkbox space, hiding the check thing .icon { - font-size: 14px; + font-size: 15px; padding-right: 5px; } .label { - font-size: 12px; + font-size: 12.6px; font-weight: 600; } } } + + & .network { + .icon { + margin-right: 5px; + } + } + + & .dnd { + .icon { + margin-right: 4px; + } + } } diff --git a/eww/styles/general.scss b/eww/styles/general.scss index bea1c8d..4ee2fdb 100644 --- a/eww/styles/general.scss +++ b/eww/styles/general.scss @@ -62,19 +62,19 @@ box.vertical.button-row { } button, -.button { +.button > box { padding: 6px 10px; border-radius: 12px; background: none; } button:hover, -.button:hover { +.button:hover > box { background: darken($color: $color2, $amount: 5); } button:active, -.button:active { +.button:active > box { background: darken($color: $color3, $amount: 10); } diff --git a/eww/styles/volume-control.scss b/eww/styles/volume-control.scss index b7e402e..b5e4b5c 100644 --- a/eww/styles/volume-control.scss +++ b/eww/styles/volume-control.scss @@ -5,7 +5,7 @@ border-radius: 16px; trough { - background: rgba(lighten($color: $background, $amount: 8), .4); + background: rgba(lighten($color: $background, $amount: 25), .5); border-radius: 6px; } diff --git a/eww/widgets/bar/workspaces.yuck b/eww/widgets/bar/workspaces.yuck index 5f92a87..794c187 100644 --- a/eww/widgets/bar/workspaces.yuck +++ b/eww/widgets/bar/workspaces.yuck @@ -1,6 +1,12 @@ +(defvar hover_workspaces false) (defwidget workspaces [] - (eventbox :onscroll "[[ {} == up ]] && hyprctl dispatch workspace e+1 >> /dev/null || hyprctl dispatch workspace e-1 >> /dev/null" + (eventbox :onscroll "[[ {} == up ]] && hyprctl dispatch workspace e+1 >> /dev/null || hyprctl dispatch workspace e-1 >> /dev/null" + :class "workspaces-eventbox" + :onhover "${EWW_CMD} update hover_workspaces=true" + :onhoverlost "${EWW_CMD} update hover_workspaces=false" + (box :class "workspaces" (literal :content literal_workspaces) ) + ) ) diff --git a/eww/widgets/big-media.yuck b/eww/widgets/big-media.yuck index 5f1ae3b..b737193 100644 --- a/eww/widgets/big-media.yuck +++ b/eww/widgets/big-media.yuck @@ -2,7 +2,7 @@ (box :class "big-media ${ show-album-bg ? 'album-bg' : '' } ${ show-album-image ? 'album-image' : '' }" :style "${ show-album-bg ? 'background-image: image(url(\"${json_media.artUrl}\"))' : '' } ${ style-background-color != '' ? 'background-color: ${style-background-color}' : '' }" - :visible { visible ? true : false} + :visible { visible == "" ? true : "${ visible ? true : false }" } :space-evenly false :orientation "vertical" diff --git a/eww/widgets/control-center/toggles.yuck b/eww/widgets/control-center/toggles.yuck index a328a54..998e971 100644 --- a/eww/widgets/control-center/toggles.yuck +++ b/eww/widgets/control-center/toggles.yuck @@ -21,7 +21,8 @@ :enabled { notification_modes =~ "dnd" ? true : false } :onenable "makoctl mode -a dnd" :ondisable "makoctl mode -r dnd" - :visible true) + :visible true + :class "dnd") ) (box :class "toggles toggles2" :visible false @@ -39,7 +40,7 @@ (checkbox :onchecked "${onenable}" :onunchecked "${ondisable}" :checked { enabled == true ? true : false } - :class "toggle-checkbox" + :class "toggle-checkbox ${class}" (box :class "toggle" :space-evenly false diff --git a/eww/widgets/volume-control/output-slider.yuck b/eww/widgets/volume-control/output-slider.yuck index 4a1290f..b02c627 100644 --- a/eww/widgets/volume-control/output-slider.yuck +++ b/eww/widgets/volume-control/output-slider.yuck @@ -9,7 +9,8 @@ :orientation "horizontal" :draw-value false :flipped false - :onchange "wpctl set-volume @DEFAULT_AUDIO_SINK@ $(awk -v n={} 'BEGIN { print (n / 100) }')") + :onchange "wpctl set-volume @DEFAULT_AUDIO_SINK@ $(awk -v n={} 'BEGIN { print (n / 100) }')" + :tooltip "${json_volume.output}") (label :text "󰕾" :xalign 0) diff --git a/eww/widgets/volume-control/source-slider.yuck b/eww/widgets/volume-control/source-slider.yuck index bd12a04..1e9e01d 100644 --- a/eww/widgets/volume-control/source-slider.yuck +++ b/eww/widgets/volume-control/source-slider.yuck @@ -10,7 +10,8 @@ :draw-value false :flipped false :onchange "wpctl set-volume @DEFAULT_AUDIO_SOURCE@ $(awk -v n={} 'BEGIN { print (n / 100) }')" - :class "output-volume-slider") + :class "output-volume-slider" + :tooltip "${json_volume.source}") (label :text "󰍬" :xalign 0)