From 978037d7d0bdc79278a16f2da55fc95eb38926a0 Mon Sep 17 00:00:00 2001 From: hesam-init Date: Tue, 2 Jul 2024 12:19:07 +0330 Subject: [PATCH] feat: eww vertical slider --- .vscode/settings.json | 2 +- .../hyprland/eww/assets/scss/_components.scss | 24 +++++ .../hyprland/eww/assets/scss/_native.scss | 25 ----- .../eww/assets/scss/themes/fullerene.scss | 2 +- .../eww/assets/scss/windows/_osd.scss | 10 ++ hypr-configs/hyprland/eww/eww.yuck | 2 + hypr-configs/hyprland/eww/setups.yuck | 11 +++ .../eww/src/-components/_helpers.yuck | 25 +++-- .../eww/src/-components/_sliders.yuck | 11 +++ .../hyprland/eww/src/_definitions.yuck | 3 + .../hyprland/eww/src/windows/_osd.yuck | 15 +++ .../eww/src/windows/_vertical-bar.yuck | 91 ++++++++----------- 12 files changed, 126 insertions(+), 95 deletions(-) create mode 100644 hypr-configs/hyprland/eww/assets/scss/windows/_osd.scss create mode 100644 hypr-configs/hyprland/eww/src/-components/_sliders.yuck create mode 100644 hypr-configs/hyprland/eww/src/windows/_osd.yuck diff --git a/.vscode/settings.json b/.vscode/settings.json index e362718..f190b08 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "files.associations": { - "*.yuck": "clojure" + // "*.yuck": "clojure" }, } \ No newline at end of file diff --git a/hypr-configs/hyprland/eww/assets/scss/_components.scss b/hypr-configs/hyprland/eww/assets/scss/_components.scss index 6dffc6c..fe25c49 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_components.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_components.scss @@ -18,3 +18,27 @@ background-color: $white; } } + +.vertical-bar-slider { + scale { + all: unset; + + trough { + background-color: $surface2; + border-radius: get-token(border-radius); + min-height: 80px; + min-width: 10px; + + slider { + background-color: $white2; + border-radius: get-token(border-radius, large); + margin: -10px; + } + + highlight { + background-color: $white0; + border-radius: get-token(border-radius); + } + } + } +} diff --git a/hypr-configs/hyprland/eww/assets/scss/_native.scss b/hypr-configs/hyprland/eww/assets/scss/_native.scss index c1232c9..86aac40 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_native.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_native.scss @@ -7,31 +7,6 @@ tooltip { border-color: $surface2; } -scale { - all: unset; - - trough { - background-color: $surface2; - border-radius: 24px; - min-height: 80px; - min-width: 10px; - margin: 5px; - - slider { - background-color: $white2; - border-radius: 25px; - min-height: 15px; - min-width: 15px; - margin: -10px; - } - - highlight { - background-color: $white0; - border-radius: 24px; - } - } -} - entry { padding: 5px; margin: 5px; diff --git a/hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss b/hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss index 4487057..94b1d24 100644 --- a/hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss +++ b/hypr-configs/hyprland/eww/assets/scss/themes/fullerene.scss @@ -26,7 +26,7 @@ $magenta_dark: #875fd4; $cyan: #2b9eb0; $cyan_dark: #1f7a89; -$base: $black; +$base: #0c0c0c; $surface0: $gray80; $surface1: $gray70; $surface2: $gray60; diff --git a/hypr-configs/hyprland/eww/assets/scss/windows/_osd.scss b/hypr-configs/hyprland/eww/assets/scss/windows/_osd.scss new file mode 100644 index 0000000..15ea1da --- /dev/null +++ b/hypr-configs/hyprland/eww/assets/scss/windows/_osd.scss @@ -0,0 +1,10 @@ +@mixin window { + border-radius: 1rem; + padding: 1rem; + box-shadow: 0 0 4px 2px; + margin: 1rem; +} + +.volume-osd { + @include window; +} diff --git a/hypr-configs/hyprland/eww/eww.yuck b/hypr-configs/hyprland/eww/eww.yuck index 0bd933c..1854fa9 100644 --- a/hypr-configs/hyprland/eww/eww.yuck +++ b/hypr-configs/hyprland/eww/eww.yuck @@ -2,6 +2,7 @@ (include "./src/-components/_helpers.yuck") (include "./src/-components/_separator.yuck") +(include "./src/-components/_sliders.yuck") (include "./src/-modules/_language.yuck") (include "./src/-modules/_system-tray.yuck") @@ -13,6 +14,7 @@ (include "./src/windows/_vertical-bar.yuck") (include "./src/windows/_control-panel.yuck") (include "./src/windows/_dashboard.yuck") +(include "./src/windows/_osd.yuck") (include "./setups.yuck") diff --git a/hypr-configs/hyprland/eww/setups.yuck b/hypr-configs/hyprland/eww/setups.yuck index d6cce2d..e254e54 100644 --- a/hypr-configs/hyprland/eww/setups.yuck +++ b/hypr-configs/hyprland/eww/setups.yuck @@ -33,3 +33,14 @@ :stacking "overlay" :monitor 0 (Dashboard)) + +(defwindow osd + :monitor 0 + :stacking "overlay" + :geometry (geometry + :anchor "bottom center" + :width "2px" + :height "2px" + ) + (VolumeOsd) +) \ No newline at end of file diff --git a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck index 07ef7f5..33a9960 100644 --- a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck +++ b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck @@ -13,45 +13,44 @@ (eventbox :onhover `${EWW_CMD} update ${varname}=true` :onhoverlost `${EWW_CMD} update ${varname}=false` - + (box :space-evenly false :orientation "v" (label :class "icon" :text icon) - + (revealer :reveal var :transition {transition ?:"slidedown"} - :duration animation-duration-default + :duration animation-duration-fast (box :class "reveal-on-hover" (children :nth 0)))) - )) + )) (defwidget RevealOnClick [var varname direction ?class ?duration ?transition] (box :orientation "v" :class "widget" :space-evenly false - + (eventbox :cursor "pointer" :visible {direction == "up"} :onclick `${EWW_CMD} update ${varname}=${!var}` - + (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text "")) - + (revealer :reveal var :transition {direction == "up" ? "slideup" : "slidedown"} :duration animation-duration-fast - + (box :style "padding: 6px 0px" (children :nth 0))) - - + (eventbox :cursor "pointer" :visible {direction == "down"} :onclick `${EWW_CMD} update ${varname}=${!var}` - + (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text "")) - - )) + + )) diff --git a/hypr-configs/hyprland/eww/src/-components/_sliders.yuck b/hypr-configs/hyprland/eww/src/-components/_sliders.yuck new file mode 100644 index 0000000..b230c33 --- /dev/null +++ b/hypr-configs/hyprland/eww/src/-components/_sliders.yuck @@ -0,0 +1,11 @@ +(defwidget VerticalBarSlider [var ?onchange] + (box + :class "vertical-bar-slider" + (scale + :value var + :onchange onchange + :orientation "v" + :tooltip "${var}%" + :max 101 + :min 0 + :flipped true))) diff --git a/hypr-configs/hyprland/eww/src/_definitions.yuck b/hypr-configs/hyprland/eww/src/_definitions.yuck index 84e3178..7668bf2 100644 --- a/hypr-configs/hyprland/eww/src/_definitions.yuck +++ b/hypr-configs/hyprland/eww/src/_definitions.yuck @@ -50,6 +50,9 @@ (defvar borderpixel 2) (defvar caffeine false) +; Osd +(defvar revealOsd true) + ; Sidebar (defvar revealVolume false) (defvar revealMicrophone false) diff --git a/hypr-configs/hyprland/eww/src/windows/_osd.yuck b/hypr-configs/hyprland/eww/src/windows/_osd.yuck new file mode 100644 index 0000000..096eb84 --- /dev/null +++ b/hypr-configs/hyprland/eww/src/windows/_osd.yuck @@ -0,0 +1,15 @@ +(defwidget VolumeOsd [] + (revealer :transition "slideup" :reveal revealOsd :duration "500ms" + (box :orientation "h" :class "volume-osd" :space-evenly false + (VolumeScale)))) + +(defwidget VolumeScale [] + (overlay :hexpand true + (scale :min 0 :max 100 :active {volume != "muted"} :value {volume == "muted" ? 0 : volume} :onchange "pamixer --set-volume {}" :class "volume-scale") + (label :class 'volume-icon ${volume == "muted" ? "less" : volume < 5 ? "less" : "more"}' :halign "start" :text {volume == "muted" ? "󰸈" : volume < 33 ? "" : volume < 67 ? "" : ""}))) + +(defwidget VolumeControlCenter [] + (box :orientation "h" :class "volume-control-center" :space-evenly false + (volume_scale) + (button :class "volume-mute ${volume == 'muted' ? 'active' : ''}" :onclick "pamixer -t" "󰝟") + (button :class "volume-arrow" :onclick "scripts/toggle_control_center.sh close && pavucontrol &" "󰅂"))) \ No newline at end of file diff --git a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck index 4e1cf90..14fbc6c 100644 --- a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck @@ -3,21 +3,21 @@ :orientation "h" :space-evenly false :class "vbar" - + (revealer :transition "slideleft" :reveal revealControlpanel :duration animation-duration-fast - + (ControlPanel)) - + (centerbox :orientation "v" - + (BarTop) (BarMiddle) (BarBottom) - ))) + ))) (defwidget BarTop [] (box @@ -26,59 +26,59 @@ :valign "start" :height 250 :vexpand false - + (Logo) (Workspaces) (Shortcuts) - )) + )) (defwidget BarMiddle [] (box :orientation "v" :space-evenly false :valign "center" - + (Clock) - + (Separator :orientation "h" :dots "[1, 2, 3]" :visible true) - + (PlayerCtl :cover false) - )) + )) (defwidget BarBottom [] (box :orientation "v" :space-evenly false :valign "end" - - (RevealOnClick - :var revealSystray - :varname "revealSystray" - :direction "up" - (Systemtray :orientation "v") - ) + + (RevealOnClick + :var revealSystray + :varname "revealSystray" + :direction "up" + (Systemtray :orientation "v") + ) ;; (Language) (Sliders) ;; (Clock) - )) + )) (defwidget Shortcuts [] (RevealOnClick :var revealShortcuts :varname "revealShortcuts" :direction "down" - + (box :orientation "v" :spacing spacing-default - + (button :onclick "swaymsg kill" (label :class "icon" :text "󰅙")) (button :onclick "wofi --show=drun -i -I" (label :class "icon" :text "󰀻")) (button :onclick "./scripts/touchkey.sh" (label :class "icon" :text "󰌌")))) - ) +) (defwidget Sliders [] (box @@ -87,49 +87,30 @@ :space-evenly false :spacing spacing-default :valign "end" - - (button :onclick "alacritty -e nmtui" :tooltip wifi_essid + + (button :onclick "alacritty -e nmtui" :tooltip wifi_essid (label :class "icon" :text wifi_icon)) - + (RevealOnHover :var revealVolume :varname "revealVolume" :icon {volumemute == 'false' ? "󰕾" : "󰖁"} - - (scale - :value volume - :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%" - :orientation "v" - :tooltip "${volume}%" - :max 101 - :min 0 - :flipped true)) - + + (VerticalBarSlider :var volume :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%") + ) + (RevealOnHover :var revealMicrophone :varname "revealMicrophone" :icon {volumemute == 'false' ? "" : "󰖁"} - - (scale - :value mic_volume - :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%" - :orientation "v" - :tooltip "${mic_volume}%" - :max 101 - :min 0 - :flipped true)) - + + (VerticalBarSlider :var mic_volume :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%") + ) + (RevealOnHover :var revealBrightness :varname "revealBrightness" :icon "󰃞" - - (scale - :onchange "brightnessctl set {}%" - :value brightness - :orientation "v" - :tooltip "${brightness}%" - :max 100 - :min 0 - :flipped true)) - )) + + (VerticalBarSlider :var brightness :onchange "brightnessctl set {}%")) + ))