From 8368678c3f04814d2278cf7c4ae4ca40182f3c7c Mon Sep 17 00:00:00 2001 From: hesam-init Date: Wed, 3 Jul 2024 17:02:28 +0330 Subject: [PATCH] refactor: eww styles and widgets --- hypr-configs/hyprland/eww/_definitions.yuck | 2 +- .../hyprland/eww/assets/scss/_components.scss | 10 +- .../hyprland/eww/assets/scss/_global.scss | 2 +- .../hyprland/eww/assets/scss/_modules.scss | 12 +- .../assets/scss/windows/_control-panel.scss | 2 +- .../eww/src/-components/_sliders.yuck | 6 +- .../hyprland/eww/src/-components/_stats.yuck | 3 +- .../hyprland/eww/src/-modules/_media.yuck | 7 +- .../eww/src/windows/_control-panel.yuck | 32 +- .../hyprland/eww/src/windows/_dashboard.yuck | 280 +++++++++--------- .../eww/src/windows/_vertical-bar.yuck | 3 +- 11 files changed, 175 insertions(+), 184 deletions(-) diff --git a/hypr-configs/hyprland/eww/_definitions.yuck b/hypr-configs/hyprland/eww/_definitions.yuck index 7e71a80..7f07e0a 100644 --- a/hypr-configs/hyprland/eww/_definitions.yuck +++ b/hypr-configs/hyprland/eww/_definitions.yuck @@ -80,7 +80,7 @@ ;; (deflisten pside "playerctl -F metadata -f '{ \"volume\": {{volume*100}}, \"shuffle\": \"{{shuffle}}\", \"loop\": \"{{loop}}\" }'") ; Controlpanel -(defvar revealControlpanel false) +(defvar revealControlpanel true) (defvar revealWeather false) (defpoll hostname :initial "idk" :interval "24h" 'echo "$(whoami)"') (defpoll uptime :initial "idk" :interval "1m" "uptime -p") diff --git a/hypr-configs/hyprland/eww/assets/scss/_components.scss b/hypr-configs/hyprland/eww/assets/scss/_components.scss index c8a2041..6b3bbde 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_components.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_components.scss @@ -6,18 +6,16 @@ @extend .widget; label { - @extend .icon; - color: $surface2; padding: 4px 0px; } } .separator { - padding: get-token(padding, small); + padding: 4px 8px; .dot { - padding: 2px; + padding: 3px; border-radius: 100%; @@ -51,9 +49,9 @@ .big-bar-slider { trough { - background-color: $surface1; - margin: 5px; min-width: 60px; + background-color: $surface1; + margin: get-token(margin); border-radius: get-token(border-radius); highlight { diff --git a/hypr-configs/hyprland/eww/assets/scss/_global.scss b/hypr-configs/hyprland/eww/assets/scss/_global.scss index 1961c8e..9404fa2 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_global.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_global.scss @@ -4,7 +4,7 @@ .widget { padding: get-token(padding, small); - margin: get-token(margin); + margin: get-token(margin, small); 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 730393e..46cd9df 100644 --- a/hypr-configs/hyprland/eww/assets/scss/_modules.scss +++ b/hypr-configs/hyprland/eww/assets/scss/_modules.scss @@ -2,7 +2,7 @@ @extend .widget; label { - font-size: get-token(font-sizes, large); + font-size: 20px; font-weight: bold; } } @@ -11,7 +11,7 @@ @extend .widget; label { - font-size: get-token(font-sizes); + font-size: get-token(font-sizes, small); font-weight: bold; } } @@ -36,10 +36,10 @@ padding: 12px; .workspace { - @extend .animation; min-height: 16px; background-color: $surface2; border-radius: get-token(border-radius); + transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; &.current { min-height: 42px; @@ -51,16 +51,12 @@ .bar-media-player { @extend .widget; - - label { - font-size: get-token(font-sizes, large); - } } .media-player { @extend .panel-widget; - padding: 0px; + padding: 8px; .player-cover { transition: 600ms ease; diff --git a/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss b/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss index 8262588..b6c897e 100644 --- a/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss +++ b/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss @@ -1,6 +1,6 @@ .control-panel { - padding: get-token(padding, small); background-color: $base; + padding: get-token(padding, small); } .userinfo label { diff --git a/hypr-configs/hyprland/eww/src/-components/_sliders.yuck b/hypr-configs/hyprland/eww/src/-components/_sliders.yuck index e950994..d6986d8 100644 --- a/hypr-configs/hyprland/eww/src/-components/_sliders.yuck +++ b/hypr-configs/hyprland/eww/src/-components/_sliders.yuck @@ -1,17 +1,19 @@ -(defwidget VerticalBarSlider [var ?onchange] +(defwidget VerticalBarSlider [var ?onchange ?visible] (scale :value {var} :onchange {onchange} :class "vertical-bar-slider" + :visible {visible} :orientation "v" :tooltip "${var}%" :max 101 :min 0 :flipped true)) -(defwidget BigBarSlider [var ?icon ?onchange] +(defwidget BigBarSlider [var ?icon ?onchange ?visible] (box :class "big-bar-slider" + :visible {visible} (overlay (scale diff --git a/hypr-configs/hyprland/eww/src/-components/_stats.yuck b/hypr-configs/hyprland/eww/src/-components/_stats.yuck index 1d51fb6..96391e5 100644 --- a/hypr-configs/hyprland/eww/src/-components/_stats.yuck +++ b/hypr-configs/hyprland/eww/src/-components/_stats.yuck @@ -1,6 +1,7 @@ -(defwidget SystemStatus [icon val] +(defwidget SystemStatus [icon val ?visible] (box :class "system-status" + :visible {visible} (overlay (circular-progress diff --git a/hypr-configs/hyprland/eww/src/-modules/_media.yuck b/hypr-configs/hyprland/eww/src/-modules/_media.yuck index 64c080f..caadc80 100644 --- a/hypr-configs/hyprland/eww/src/-modules/_media.yuck +++ b/hypr-configs/hyprland/eww/src/-modules/_media.yuck @@ -22,17 +22,16 @@ (button :onclick "playerctl next" (label :class "icon" :text "󰒭"))))) -(defwidget MediaPlayer [h permashow] +(defwidget MediaPlayer [height] (box :class "media-player" (overlay (box :orientation "v" :halign "fill" - :height h + :height {height} :class { pcover != "" ? "player-cover" : ""} - :style "background-image: url('${pcover}')" - :visible {permashow ? true : pcover != "" }) + :style "background-image: url('${pcover}')") (box :orientation "h" diff --git a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck index d1f0b80..be7d062 100644 --- a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck @@ -1,19 +1,17 @@ (defwidget ControlPanel [] (box - :class "control-panel" - :space-evenly false :orientation "v" - :valign "fill" - :vexpand true + :space-evenly false + :class "control-panel" + :width 420 (User) (SystemMonitor) - ; (MediaPlayer :h 160 :permashow true) + ; (MediaPlayer :height 140) (box :orientation "h" - :space-evenly false :height 180 (Timer) @@ -46,14 +44,14 @@ :orientation "h" :class "panel-widget" :height 140 + (SystemStatus :icon "󰻠" :val { EWW_CPU.avg }) (SystemStatus :icon "󰍛" :val { EWW_RAM.used_mem_perc }) (SystemStatus :icon "󰈐" :val { gpu }) - (SystemStatus :icon "" :val { EWW_BATTERY.BAT0.capacity }) + (SystemStatus :icon "" :val { EWW_BATTERY.BAT0.capacity } :visible false) )) (defwidget User [] - (box :orientation "h" :space-evenly false @@ -63,7 +61,8 @@ :valign "start" :halign "fill" :hexpand true - (image :style "margin: 10px;" :image-width 80 :image-height 80 :path "./assets/image/fieshidle.gif") + + (image :image-width 80 :image-height 80 :path "./assets/image/fieshidle.gif") (scroll :hscroll true :vscroll false @@ -220,7 +219,8 @@ :orientation "v" :space-evenly false :valign "center" - :spacing 10 + :spacing spacing-default + (label :halign "start" :text "${hour.FeelsLikeC}°C") (label :halign "start" :text "rain: ${hour.chanceofrain}%")))) @@ -256,7 +256,6 @@ :orientation "v" :class "panel-widget" :space-evenly false - :width 200 (label :class "timer" :valign "center" :vexpand true :text timerdis) (box @@ -269,19 +268,16 @@ (defwidget BigSliders [] (box - :valign "fill" - :halign "fill" :class "panel-widget" - :hexpand true - :space-evenly true + :spacing spacing-small - (BigBarSlider :var {volume} :icon {volumemute == 'false' ? "󰕾" : "󰖁"} + (BigBarSlider :var { volume } :icon {volumemute == 'false' ? "󰕾" : "󰖁"} :onchange "pactl set-sink-volume @DEFAULT_SINK@ {}%") - (BigBarSlider :var {mic_volume} :icon {volumemute == 'false' ? "" : "󰖁"} + (BigBarSlider :var { mic_volume } :icon {volumemute == 'false' ? "" : "󰖁"} :onchange "pactl set-source-volume @DEFAULT_SOURCE@ {}%") - (BigBarSlider :var {brightness} :icon "󰃞" + (BigBarSlider :visible false :var { brightness } :icon "󰃞" :onchange "brightnessctl set {}%") )) diff --git a/hypr-configs/hyprland/eww/src/windows/_dashboard.yuck b/hypr-configs/hyprland/eww/src/windows/_dashboard.yuck index 699be7e..7822dad 100644 --- a/hypr-configs/hyprland/eww/src/windows/_dashboard.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_dashboard.yuck @@ -1,153 +1,153 @@ (defwidget Dashboard [] - (box - :class "dashboard" - :space-evenly false - :orientation "v" - - (duser :name "Failed" :tag "failed.sh" :pfp "./assets/image/roundpfp.png") - (box - :space-evenly true - :orientation "h" - :vexpand true - - (box + :class "dashboard" :space-evenly false :orientation "v" - - (MediaPlayer :h 150 :permashow true) - + + (duser :name "Failed" :tag "failed.sh" :pfp "./assets/image/roundpfp.png") + (box - :space-evenly false - :orientation "h" - (box - :width 130 - :space-evenly false - :orientation "v" - (dbutt) - (theme)) - (dcal) - )) + :space-evenly true + :orientation "h" + :vexpand true + + (box + :space-evenly false + :orientation "v" + + (MediaPlayer :height 150) + + (box + :space-evenly false + :orientation "h" + (box + :width 130 + :space-evenly false + :orientation "v" + (dbutt) + (theme)) + (dcal) + )) + + (box + :orientation "v" + :space-evenly false + (dnotes) + (quote)) + ))) - (box - :orientation "v" +(defwidget duser [name tag pfp] + (box + :orientation "h" :space-evenly false - (dnotes) - (quote)) - ))) + :halign "start" + :hexpand true + :class "unbarwidget" + :style "background-color: inherit;" + :spacing 15 + (image :image-width 50 :image-height 50 :path pfp) + (label :text "|" :style "color: #262626; font-size: 30px;") + (box + :orientation "v" + :space-evenly true + :halign "start" + (label :style "font-weight: bold; font-size: 18px;" :text "Hello, ${name}") + (label :halign "start" :text tag)))) - (defwidget duser [name tag pfp] - (box - :orientation "h" - :space-evenly false - :halign "start" - :hexpand true - :class "unbarwidget" - :style "background-color: inherit;" - :spacing 15 - (image :image-width 50 :image-height 50 :path pfp) - (label :text "|" :style "color: #262626; font-size: 30px;") - (box - :orientation "v" - :space-evenly true - :halign "start" - (label :style "font-weight: bold; font-size: 18px;" :text "Hello, ${name}") - (label :halign "start" :text tag)))) +(defwidget dnotes [] + (box + :class "notes unbarwidget" + :space-evenly false + :orientation "v" + :vexpand true + (label :class "heading" :text "Agenda") + (box + :vexpand true + :width 350 + (scroll + :hscroll true + :vscroll true + (label :style "font-size: 16px;" :text notesc))))) - (defwidget dnotes [] - (box - :class "notes unbarwidget" - :space-evenly false - :orientation "v" - :vexpand true - (label :class "heading" :text "Agenda") - (box - :vexpand true - :width 350 - (scroll - :hscroll true - :vscroll true - (label :style "font-size: 16px;" :text notesc))))) +(defwidget dmpd [] + (overlay + (box + :class "mpdcover" + :style "background-image: url('${pcover}')" + :height 150) + (box + :orientation "v" + :space-evenly false + :spacing 10 + :valign "center" + (scroll + :hscroll true + :vscroll false + (label :style "font-size: 18px;" :text psong)) + (scroll + :hscroll true + :vscroll false + (label :text partist)) + ;; (scale + ;; :hexpand false + ;; :width 60 + ;; :class "seektime" + ;; :value current + ;; :orientation "h" + ;; :min -5 + ;; :max 100 + ;; :onscroll "mpc -q seek +1" + ;; :tooltip "${ctime}/${ttime}") + (box + :orientation "h" + :space-evenly false + :spacing 40 + :halign "center" + :class "dmpdcontrol" + (button :onclick "./scripts/music_info --prev" (label :text "󰒮")) + (button :onclick "./scripts/music_info --toggle" (label :text { pstatus == "Playing" ? "" : ""})) + (button :onclick "./scripts/music_info --next" (label :text "󰒭")))))) - (defwidget dmpd [] - (overlay - (box - :class "mpdcover" - :style "background-image: url('${pcover}')" - :height 150) - (box - :orientation "v" - :space-evenly false - :spacing 10 - :valign "center" - (scroll - :hscroll true - :vscroll false - (label :style "font-size: 18px;" :text psong)) - (scroll - :hscroll true - :vscroll false - (label :text partist)) - ;; (scale - ;; :hexpand false - ;; :width 60 - ;; :class "seektime" - ;; :value current - ;; :orientation "h" - ;; :min -5 - ;; :max 100 - ;; :onscroll "mpc -q seek +1" - ;; :tooltip "${ctime}/${ttime}") - (box - :orientation "h" - :space-evenly false - :spacing 40 - :halign "center" - :class "dmpdcontrol" - (button :onclick "./scripts/music_info --prev" (label :text "󰒮")) - (button :onclick "./scripts/music_info --toggle" (label :text { pstatus == "Playing" ? "" : ""})) - (button :onclick "./scripts/music_info --next" (label :text "󰒭")))))) +(defwidget dcal [] + (box + :class "unbarwidget mincal" + :height 190 + :hexpand true + (calendar + :show-details false + :show-heading true + :show-day-names false + :show-week-numbers false + :day calendar_day + :year calendar_year))) - (defwidget dcal [] - (box - :class "unbarwidget mincal" - :height 190 - :hexpand true - (calendar - :show-details false - :show-heading true - :show-day-names false - :show-week-numbers false - :day calendar_day - :year calendar_year))) +(defwidget dbutt[] + (box + :space-evenly true + :orientation "h" + :height 130 + (box + :space-evenly true + :orientation "v" + (button :class "dicons unbarwidget" :onclick "notify-send 'shutdown' 'but its impractical'" (label :text "")) + (button :class "dicons unbarwidget" :onclick "notify-send 'restart' 'but its impractical'" (label :text ""))) + (box + :space-evenly true + :orientation "v" + (button :class "dicons unbarwidget" :onclick "notify-send 'lock' 'but its impractical'" (label :text "")) + (button :class "dicons unbarwidget" :onclick "notify-send 'log out' 'but its impractical'" (label :text "󰍃"))))) - (defwidget dbutt[] - (box - :space-evenly true - :orientation "h" - :height 130 - (box - :space-evenly true - :orientation "v" - (button :class "dicons unbarwidget" :onclick "notify-send 'shutdown' 'but its impractical'" (label :text "")) - (button :class "dicons unbarwidget" :onclick "notify-send 'restart' 'but its impractical'" (label :text ""))) - (box - :space-evenly true - :orientation "v" - (button :class "dicons unbarwidget" :onclick "notify-send 'lock' 'but its impractical'" (label :text "")) - (button :class "dicons unbarwidget" :onclick "notify-send 'log out' 'but its impractical'" (label :text "󰍃"))))) +(defwidget theme [] + (button + :class "unbarwidget" + :vexpand true + :onclick "./scripts/toggletheme toggle" + (label :style "font-size: 18px;" :text ""))) - (defwidget theme [] - (button - :class "unbarwidget" - :vexpand true - :onclick "./scripts/toggletheme toggle" - (label :style "font-size: 18px;" :text ""))) - - ;; (defwidget dquote [] - ;; (box - ;; :class "unbarwidget" - ;; :height "120" - ;; :valign "center" - ;; (literal - ;; :content quoteliteral))) +;; (defwidget dquote [] + ;; (box + ;; :class "unbarwidget" + ;; :height "120" + ;; :valign "center" + ;; (literal + ;; :content quoteliteral))) diff --git a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck index 55745e0..f6d6c3f 100644 --- a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck +++ b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck @@ -5,7 +5,7 @@ :class "vbar" (revealer - :transition "slideleft" + :transition "slideright" :reveal revealControlpanel :duration animation-duration-fast @@ -24,7 +24,6 @@ :orientation "v" :space-evenly false :valign "start" - :height 250 :vexpand false (Logo)