68 lines
1.8 KiB
Text
68 lines
1.8 KiB
Text
import { State, SessionStep, CountdownStatus } from "./state.slint";
|
|
import { VText, VButton, VActionButton, Svg, Palette } from "@selenite";
|
|
import { Utils } from "utils.slint";
|
|
|
|
export component CountdownView inherits VerticalLayout {
|
|
callback start-stop <=> startStopButton.clicked;
|
|
|
|
pure function format-session-step(session-step: SessionStep) -> string {
|
|
if (session-step == SessionStep.Setup) {
|
|
return "Setup";
|
|
}
|
|
if (session-step == SessionStep.Focus) {
|
|
return "Focus";
|
|
}
|
|
if (session-step == SessionStep.Break) {
|
|
return "Break";
|
|
}
|
|
if (session-step == SessionStep.Finished) {
|
|
return "Finished";
|
|
}
|
|
return "Not implemented";
|
|
}
|
|
|
|
VerticalLayout {
|
|
|
|
spacing: 32px;
|
|
alignment: center;
|
|
|
|
VerticalLayout {
|
|
VText {
|
|
font-size: 3rem;
|
|
letter-spacing: 0.2rem;
|
|
font-weight: 600;
|
|
text: "\{Utils.format-countdown(State.countdown)}";
|
|
horizontal-alignment: center;
|
|
}
|
|
VText {
|
|
color: Palette.foreground-hint;
|
|
text: format-session-step(State.sessions-step);
|
|
horizontal-alignment: center;
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: space-between;
|
|
spacing: 8px;
|
|
for step[step-index] in State.max-session-count: Rectangle {
|
|
preferred-width: 16px;
|
|
preferred-height: 16px;
|
|
border-radius: 32px;
|
|
background: step-index + 1 == State.current-session
|
|
? Palette.accent.transparentize(0.5)
|
|
: step-index + 1 < State.current-session ? Palette.accent
|
|
: Palette.control-background;
|
|
animate background {
|
|
duration: 0.5s;
|
|
}
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
startStopButton := VActionButton {
|
|
background: Palette.foreground.transparentize(1);
|
|
icon-size: 2rem;
|
|
icon-svg: State.countdown-status != CountdownStatus.Running ? Svg.play : Svg.pause;
|
|
}
|
|
}
|
|
}
|
|
}
|