From caf64be4bf37896d53fe70c787b87493404c8b41 Mon Sep 17 00:00:00 2001 From: hesam-init Date: Wed, 3 Jul 2024 01:52:27 +0330 Subject: [PATCH] feat: eww style changes --- .../hyprland/eww/assets/scss/_components.scss | 14 +- .../hyprland/eww/assets/scss/_global.scss | 4 +- .../hyprland/eww/assets/scss/_modules.scss | 24 +++- .../hyprland/eww/assets/scss/_tokens.scss | 4 +- .../eww/src/-components/_helpers.yuck | 5 +- .../hyprland/eww/src/-modules/_media.yuck | 126 +++++++++--------- .../hyprland/eww/src/-modules/_time.yuck | 11 +- .../eww/src/windows/_vertical-bar.yuck | 4 +- 8 files changed, 106 insertions(+), 86 deletions(-) diff --git a/hypr-configs/hyprland/eww/assets/scss/_components.scss b/hypr-configs/hyprland/eww/assets/scss/_components.scss index c66bb2b..c8a2041 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_components.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_components.scss @@ -1,17 +1,23 @@ .reveal-on-hover { - padding: 6px 0px; + padding: 12px 0px; } .reveal-on-click { - color: $surface2; - padding: 4px 0px; + @extend .widget; + + label { + @extend .icon; + + color: $surface2; + padding: 4px 0px; + } } .separator { padding: get-token(padding, small); .dot { - padding: 3px; + padding: 2px; border-radius: 100%; diff --git a/hypr-configs/hyprland/eww/assets/scss/_global.scss b/hypr-configs/hyprland/eww/assets/scss/_global.scss index e10b808..1961c8e 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_global.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_global.scss @@ -4,8 +4,8 @@ .widget { padding: get-token(padding, small); - margin: get-token(margin, small); - border-radius: get-token(border-radius); + margin: get-token(margin); + border-radius: get-token(border-radius, small); background-color: $surface0; } diff --git a/hypr-configs/hyprland/eww/assets/scss/_modules.scss b/hypr-configs/hyprland/eww/assets/scss/_modules.scss index 1e125d1..730393e 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_modules.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_modules.scss @@ -1,15 +1,19 @@ .clock { @extend .widget; - font-size: get-token(font-sizes, large); - font-weight: bolder; + label { + font-size: get-token(font-sizes, large); + font-weight: bold; + } } .language { @extend .widget; - font-size: get-token(font-sizes, small); - font-weight: bolder; + label { + font-size: get-token(font-sizes); + font-weight: bold; + } } .logo { @@ -33,18 +37,26 @@ .workspace { @extend .animation; - border-radius: get-token(border-radius); min-height: 16px; background-color: $surface2; + border-radius: get-token(border-radius); &.current { - min-height: 48px; + min-height: 42px; background-color: $accent; } } } +.bar-media-player { + @extend .widget; + + label { + font-size: get-token(font-sizes, large); + } +} + .media-player { @extend .panel-widget; diff --git a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss index d8b87b3..932e4df 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss @@ -16,8 +16,8 @@ $design-tokens: ( large: 6px, ), border-radius: ( - small: 6px, - default: 8px, + small: 8px, + default: 10px, large: 16px, ), ); diff --git a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck index ffdbfc1..e255ae4 100644 --- a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck +++ b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck @@ -32,13 +32,14 @@ :orientation "v" :class "widget" :space-evenly false + :class "reveal-on-click" (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 "")) + (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text "")) (revealer :reveal var @@ -52,6 +53,6 @@ :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 "")) + (label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :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 1b50052..64c080f 100644 --- a/hypr-configs/hyprland/eww/src/-modules/_media.yuck +++ b/hypr-configs/hyprland/eww/src/-modules/_media.yuck @@ -1,18 +1,20 @@ -(defwidget PlayerCtl [?cover] +(defwidget BarMediaPlayer [?cover] (eventbox :cursor "pointer" - + (box - :class "widget player-ctl" + :class "bar-media-player" :orientation "v" - :spacing spacing-default :space-evenly false - + :spacing spacing-default + + (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" (label :class "icon" :text "󰒮")) (button :onclick "playerctl play-pause" @@ -21,70 +23,70 @@ (label :class "icon" :text "󰒭"))))) (defwidget MediaPlayer [h permashow] -(box -:class "media-player" -(overlay - (box - :orientation "v" - :halign "fill" - :height h - :class { pcover != "" ? "player-cover" : ""} - :style "background-image: url('${pcover}')" - :visible {permashow ? true : pcover != "" }) - - (box - :orientation "h" - :space-evenly false - :halign "center" - :valign "center" - :spacing spacing-large - - (image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover }) - + (box + :class "media-player" + (overlay (box :orientation "v" + :halign "fill" + :height h + :class { pcover != "" ? "player-cover" : ""} + :style "background-image: url('${pcover}')" + :visible {permashow ? true : pcover != "" }) + + (box + :orientation "h" :space-evenly false - :width 200 :halign "center" :valign "center" - :class "player-info" - :spacing spacing-small - -(box - :orientation "v" - :space-evenly false - :visible true - - (scroll - :hscroll true - :vscroll false - (label :text psong)) - - (scroll - :hscroll true - :vscroll false - (label :text partist)) -) - + :spacing spacing-large + + (image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover }) + (box - :orientation "h" - :class "player-controls" - (button :onclick "playerctl previous" - (label :text "󰒮")) - (button :onclick "playerctl play-pause" - (label :text { pstatus == "Playing" ? "" : ""} )) - (button :onclick "playerctl next" - (label :text "󰒭")))))) -) - + :orientation "v" + :space-evenly false + :width 200 + :halign "center" + :valign "center" + :class "player-info" + :spacing spacing-small + + (box + :orientation "v" + :space-evenly false + :visible true + + (scroll + :hscroll true + :vscroll false + (label :text psong)) + + (scroll + :hscroll true + :vscroll false + (label :text partist)) + ) + + (box + :orientation "h" + :class "player-controls" + (button :onclick "playerctl previous" + (label :text "󰒮")) + (button :onclick "playerctl play-pause" + (label :text { pstatus == "Playing" ? "" : ""} )) + (button :onclick "playerctl next" + (label :text "󰒭")))))) + ) + ) (defwindow MusicPlayerPopup :geometry (geometry - :width "440" - :height "200" - :anchor "center left") + :width "440" + :height "200" + :anchor "center left") :stacking "overlay" :monitor 0 (box @@ -114,14 +116,14 @@ :style "margin-top: 10px;" (button :onclick "playerctl previous" (label :text "󰒮")) - (button :style "padding-right: 3px;" :onclick "playerctl play-pause" + (button :style "padding-right: 3px;" :onclick "playerctl play-pause" (label :text { pstatus == "Playing" ? "" : ""})) (button :onclick "playerctl next" (label :text "󰒭"))) - (scale + (scale :class "seektime" :value { ptime.position} :orientation "h" ;; :onchange "playerctl position {}" :min 0 :max { ptime.duration} - :tooltip { ptime.readable}))))) + :tooltip { ptime.readable}))))) diff --git a/hypr-configs/hyprland/eww/src/-modules/_time.yuck b/hypr-configs/hyprland/eww/src/-modules/_time.yuck index 6ce2292..ea818f5 100644 --- a/hypr-configs/hyprland/eww/src/-modules/_time.yuck +++ b/hypr-configs/hyprland/eww/src/-modules/_time.yuck @@ -6,20 +6,21 @@ :orientation "v" :space-evenly false :class "clock" - :spacing spacing-small + (label :text thour) (label :text tmin)))) (defwindow CalendarPopup :geometry (geometry - :width "100" - :height "35" - :anchor "bottom left") + :width "100" + :height "35" + :anchor "bottom left") :stacking "overlay" :monitor 0 - + (box :class "popup" + (box :class "widget" (calendar :day calendar_day :year calendar_year)))) diff --git a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck index 14e7e17..55745e0 100644 --- a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck @@ -48,7 +48,7 @@ (Separator :orientation "h" :dots "[1, 2, 3]" :visible true) - (PlayerCtl :cover false) + (BarMediaPlayer :cover false) )) (defwidget BarBottom [] @@ -57,7 +57,6 @@ :space-evenly false :valign "end" - (Sliders) (Language) )) @@ -86,7 +85,6 @@ :orientation "v" :space-evenly false :spacing spacing-default - :valign "end" (RevealOnHover :var {revealWifiEssid}