From f3830fc2dbece19bbc72d43e3fe14be47ac4a5a9 Mon Sep 17 00:00:00 2001 From: hesam-init Date: Tue, 2 Jul 2024 09:33:22 +0330 Subject: [PATCH] refactor: eww design token --- .../hyprland/eww/assets/scss/_components.scss | 6 ++--- .../hyprland/eww/assets/scss/_global.scss | 4 +++ .../hyprland/eww/assets/scss/_tokens.scss | 2 +- hypr-configs/hyprland/eww/setups.yuck | 2 +- .../eww/src/-components/_helpers.yuck | 18 ++++++++++--- .../hyprland/eww/src/-modules/_media.yuck | 3 ++- .../eww/src/-modules/_system-tray.yuck | 2 +- .../eww/src/windows/_control-panel.yuck | 25 +++++++++---------- .../eww/src/windows/_vertical-bar.yuck | 17 +++++++------ 9 files changed, 47 insertions(+), 32 deletions(-) diff --git a/hypr-configs/hyprland/eww/assets/scss/_components.scss b/hypr-configs/hyprland/eww/assets/scss/_components.scss index 269a9de..6dffc6c 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_components.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_components.scss @@ -8,12 +8,12 @@ } .separator { - padding: 6px; + padding: 4px 6px; .dot { - padding: 2px; + padding: 3px; - border-radius: 100; + border-radius: 100%; background-color: $white; } diff --git a/hypr-configs/hyprland/eww/assets/scss/_global.scss b/hypr-configs/hyprland/eww/assets/scss/_global.scss index 06fcc88..b489697 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_global.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_global.scss @@ -1,5 +1,9 @@ @import "tokens"; +.animation { + transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1); +} + .widget { padding: get-token(padding, small); margin: get-token(margin, small); diff --git a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss index 19daa62..e481ce9 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss @@ -17,7 +17,7 @@ $design-tokens: ( border-radius: ( small: 6px, default: 8px, - large: 12px, + large: 16px, ), ); diff --git a/hypr-configs/hyprland/eww/setups.yuck b/hypr-configs/hyprland/eww/setups.yuck index 0201997..547715f 100644 --- a/hypr-configs/hyprland/eww/setups.yuck +++ b/hypr-configs/hyprland/eww/setups.yuck @@ -21,4 +21,4 @@ :exclusive true :wm-ignore false - (VerticalBar)) + (VerticalBar)) \ 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 388f939..07ef7f5 100644 --- a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck +++ b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck @@ -26,22 +26,32 @@ (box :class "reveal-on-hover" (children :nth 0)))) )) -(defwidget RevealOnClick [var varname ?class ?duration ?transition ?direction] +(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 "slideup" + :transition {direction == "up" ? "slideup" : "slidedown"} :duration animation-duration-fast - (box (children :nth 0))) + (box :style "padding: 6px 0px" (children :nth 0))) + (eventbox :cursor "pointer" + :visible {direction == "down"} :onclick `${EWW_CMD} update ${varname}=${!var}` - (label :angle {var ? 90 : 270} :class "reveal-on-click" :tooltip "touch control" :text "")) + (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/-modules/_media.yuck b/hypr-configs/hyprland/eww/src/-modules/_media.yuck index 4c9a07f..4096a4c 100644 --- a/hypr-configs/hyprland/eww/src/-modules/_media.yuck +++ b/hypr-configs/hyprland/eww/src/-modules/_media.yuck @@ -3,13 +3,14 @@ :cursor "pointer" (box - :class "widget" + :class "widget player-ctl" :orientation "v" :spacing spacing-default :space-evenly false (eventbox :onclick "${EWW_CMD} open MusicPlayerPopup --toggle" + :visible cover (image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20)) (button :onclick "playerctl previous" diff --git a/hypr-configs/hyprland/eww/src/-modules/_system-tray.yuck b/hypr-configs/hyprland/eww/src/-modules/_system-tray.yuck index d586ae8..1d4294c 100644 --- a/hypr-configs/hyprland/eww/src/-modules/_system-tray.yuck +++ b/hypr-configs/hyprland/eww/src/-modules/_system-tray.yuck @@ -11,7 +11,7 @@ (systray :orientation orientation - :icon-size 18 + :icon-size 20 :spacing spacing-default ) diff --git a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck index 3b71dbf..b3ba48f 100644 --- a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck @@ -10,14 +10,14 @@ (chooser) ; (weather) - ; (coolmpd :h 150 :permashow true) + (coolmpd :h 160 :permashow true) (box :orientation "h" :space-evenly false :height 180 - :halign "fill" - (timer) + + (Timer) (bigslides)) (box @@ -25,11 +25,12 @@ :orientation "v" :vexpand true :visible true - (toolbox) - (notifications_weather_box)) + + (Toolbox) + (NotificationsWeatherBox)) )) -(defwidget toolbox [] +(defwidget Toolbox [] (eventbox :cursor "pointer" @@ -44,10 +45,10 @@ (defwidget chooser [] (box :orientation "v" - :halign "fill" :height 60 :class "panel-widget" :space-evenly false + (box :orientation "h" @@ -223,7 +224,7 @@ (label :halign "start" :text "${datehour < 12 ? 'Good morning' : datehour < 18 ? 'Good afternoon' : datehour < 22 ? 'Good evening' : 'Good night'} ${hostname}") (label :halign "start" :text uptime :style "font-size: 12px;")))))) -(defwidget notifications_weather_box [] +(defwidget NotificationsWeatherBox [] (box :orientation "v" :halign "fill" @@ -339,13 +340,14 @@ ;; (label :halign "start" :text "${weatherjson.precipMM} mm") )))) -(defwidget timer[] +(defwidget Timer [] (box :orientation "v" :class "panel-widget" :space-evenly false - :width 180 :valign "fill" + :width 200 + (label :class "timer" :valign "center" :vexpand true :text timerdis) (box :orientation "h" @@ -369,7 +371,6 @@ (defwidget bigvol [] (overlay (scale - :width 50 :class "bigslide" :value volume :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%" @@ -386,7 +387,6 @@ (defwidget bigmic [] (overlay (scale - :width 50 :class "bigslide" :value mic_volume :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%" @@ -403,7 +403,6 @@ (defwidget bigbright [] (overlay (scale - :width 50 :class "bigslide" :value brightness :onchange "brightnessctl set {}%" diff --git a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck index 39a3b82..4e1cf90 100644 --- a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck @@ -14,12 +14,12 @@ (centerbox :orientation "v" - (Top) - (Middle) - (Bottom) + (BarTop) + (BarMiddle) + (BarBottom) ))) -(defwidget Top [] +(defwidget BarTop [] (box :orientation "v" :space-evenly false @@ -32,7 +32,7 @@ (Shortcuts) )) -(defwidget Middle [] +(defwidget BarMiddle [] (box :orientation "v" :space-evenly false @@ -42,10 +42,10 @@ (Separator :orientation "h" :dots "[1, 2, 3]" :visible true) - (PlayerCtl) + (PlayerCtl :cover false) )) -(defwidget Bottom [] +(defwidget BarBottom [] (box :orientation "v" :space-evenly false @@ -54,6 +54,7 @@ (RevealOnClick :var revealSystray :varname "revealSystray" + :direction "up" (Systemtray :orientation "v") ) ;; (Language) @@ -65,9 +66,9 @@ (RevealOnClick :var revealShortcuts :varname "revealShortcuts" + :direction "down" (box - :class "touch" :orientation "v" :spacing spacing-default