From 6de642f4a2ebba000715218a89b92df915b460e0 Mon Sep 17 00:00:00 2001 From: GaspardCulis Date: Wed, 7 Feb 2024 15:53:39 +0100 Subject: [PATCH] eww: Created Grind timer widget --- bar/eww/eww.scss | 1 + bar/eww/eww.yuck | 1 + bar/eww/timer.scss | 65 ++++++++++++++++++++++++++++++++++++ bar/eww/timer.yuck | 83 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 150 insertions(+) create mode 100644 bar/eww/timer.scss create mode 100644 bar/eww/timer.yuck diff --git a/bar/eww/eww.scss b/bar/eww/eww.scss index c7f3d14..2e1dee8 100644 --- a/bar/eww/eww.scss +++ b/bar/eww/eww.scss @@ -1,5 +1,6 @@ @import "./theme.scss"; @import "./bar.scss"; +@import "./timer.scss"; * { all: unset; diff --git a/bar/eww/eww.yuck b/bar/eww/eww.yuck index bc5358a..21de905 100644 --- a/bar/eww/eww.yuck +++ b/bar/eww/eww.yuck @@ -1,4 +1,5 @@ (include "./bar.yuck") +(include "./timer.yuck") (defpoll bots :initial `[]` diff --git a/bar/eww/timer.scss b/bar/eww/timer.scss new file mode 100644 index 0000000..972dbcb --- /dev/null +++ b/bar/eww/timer.scss @@ -0,0 +1,65 @@ +.timer { + padding-left: 60px; + padding-right: 60px; + + background-color: $background; + border-radius: 20px; + + .timer-title { + color: $text; + margin-top: 20px; + font-size: 24px; + } + + .start-button { + .circle-progress { + color: $green; + + transition: color 500ms; + } + + .start-icon { + color: $green; + font-size: 28px; + + transition: color 500ms; + } + } + + .timer-text { + font-size: 32px; + padding-bottom: 30px; + } + + &.work { + .start-button { + .circle-progress { + color: $red; + + transition: color 500ms; + } + + .start-icon { + color: $red; + + transition: color 500ms; + } + } + } + + &.pause { + .start-button { + .circle-progress { + color: $yellow; + + transition: color 500ms; + } + + .start-icon { + color: $yellow; + + transition: color 500ms; + } + } + } +} diff --git a/bar/eww/timer.yuck b/bar/eww/timer.yuck new file mode 100644 index 0000000..16ffa17 --- /dev/null +++ b/bar/eww/timer.yuck @@ -0,0 +1,83 @@ +(defvar WORK_TIME_SEC 1200) +(defvar PAUSE_TIME_SEC 300) + +(defvar timer-state "inactive") +(defvar timer-start-time 0) + +(defpoll timer-time + :interval "1s" + :run-while {timer-state != "inactive"} + `date +%s`) + +(defpoll timer-work-period + :interval "20m" + :initial "first" + :run-while {timer-state == "work"} + `if [ "$(eww get timer-work-period)" == "first" ]; then + eww update timer-start-time=$(date +%s) + echo next + else + notify-send -i ~/Images/Icons/moai.jpg "Work period over" "You can take a little nap now." + eww update timer-state=pause + echo first + fi`) ; TODO: Put in a separate script + +(defpoll timer-pause-period + :interval "5m" + :initial "first" + :run-while {timer-state == "pause"} + `if [ "$(eww get timer-pause-period)" == "first" ]; then + eww update timer-start-time=$(date +%s) + echo next + else + notify-send -i ~/Images/Icons/moai.jpg "Pause period over" "Back to grinding we go." + eww update timer-state=work + echo first + fi`) ; TODO: Put in a separate script + +(defwidget start-button [] + (button + :class "start-button" + :vexpand true + :onclick "eww update timer-state=${timer-state == "inactive" ? "work" : "inactive"} timer-work-period=first timer-pause-period=first" + (overlay + (circular-progress + :class "circle-progress" + :value 100 + :thickness 6 + :clockwise true) + (label :class "start-icon" :text "${timer-state == "inactive" ? 'Start' : (timer-state == "work" ? "Working" : "Pause")}") + ) + ) +) + +(defwidget timer [] + (box + :orientation "v" + :space-evenly false + :class "timer ${timer-state}" + (label :class "timer-title" :text "Grind timer") + (start-button :valign "center" :vexpand true) + (revealer + :transition "slideup" + :reveal {timer-state != "inactive"} + (label :class "timer-text" :text "${timer-state != "inactive" ? formattime(timer-start-time - (3600 - (timer-state == "work" ? WORK_TIME_SEC : PAUSE_TIME_SEC)) - timer-time, "%H:%M:%S") : "00:20:00"}") + ) + ) +) + + +(defwindow timer + :namespace "eww.timer" + :monitor 0 + :geometry (geometry + :x "6%" + :y "10%" + :width "300px" + :height "350px" + :anchor "top left") + :stacking "bg" + :focusable false + :exclusive true + (timer) +)