diff --git a/assets/checked.svg b/assets/checked.svg
new file mode 100644
index 0000000..ae61331
--- /dev/null
+++ b/assets/checked.svg
@@ -0,0 +1,44 @@
+
+
diff --git a/assets/unchecked.svg b/assets/unchecked.svg
new file mode 100644
index 0000000..1e103f8
--- /dev/null
+++ b/assets/unchecked.svg
@@ -0,0 +1,47 @@
+
+
diff --git a/ui/timeline.slint b/ui/timeline.slint
index 281fd99..86f831a 100644
--- a/ui/timeline.slint
+++ b/ui/timeline.slint
@@ -40,25 +40,45 @@ component TimelineBlock inherits VerticalLayout {
property image-size: calc-image-size();
property image-size-with-margin: image-size + Global.image-margin;
- property title-box-height: 36px;
- height: title-box.height + count-y * image-size-with-margin;
+ property title-box-height: 44px;
+ height: title-box-height + count-y * image-size-with-margin;
y: bucket.y;
min-width: min-image-size;
alignment: start;
- title-box := HorizontalLayout {
- alignment: space-between;
- height: title-box-height;
- padding: 8px;
+ title-box := Rectangle {
+ property checked: false;
- Text {
- text: bucket.title;
+ HorizontalLayout {
+ alignment: space-between;
+ height: title-box-height;
+ padding: 8px;
+
+ title := Text {
+ text: bucket.title;
+ font-size: 20px;
+ }
+
+ if !checked : Image {
+ source: @image-url("../assets/unchecked.svg");
+ colorize: #aaa;
+ height: title.height;
+ width: self.height;
+ }
+
+ if checked : Image {
+ source: @image-url("../assets/checked.svg");
+ colorize: #accbfa;
+ height: title.height;
+ width: self.height;
+ }
}
-
- // TODO: checkbox thingy
- Text {
- text: "O";
+
+ title-touch := TouchArea {
+ clicked => {
+ parent.checked = !parent.checked;
+ }
}
}