hulthe/immich-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add mock timeline-block checkbox

Browse Source
This commit is contained in:
Joakim Hulthe
2026-06-03 23:42:11 +02:00
parent 39488ec094
commit 0f4391d388
3 changed files with 123 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/checked.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
class="text-primary svelte-ztbs85"
stroke="transparent"
stroke-width="2"
role="img"
version="1.1"
id="svg1"
sodipodi:docname="checked.svg"
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:zoom="13.470055"
inkscape:cx="12.583468"
inkscape:cy="5.8277418"
inkscape:window-width="1555"
inkscape:window-height="1000"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<!---->
<!---->
<path
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
fill="currentColor"
id="path1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

47
assets/unchecked.svg Normal file
View File

@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
class="text-primary svelte-ztbs85"
stroke="transparent"
stroke-width="2"
role="img"
version="1.1"
id="svg1"
sodipodi:docname="unchecked.svg"
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:zoom="11.92186"
inkscape:cx="32.922716"
inkscape:cy="21.682859"
inkscape:window-width="1555"
inkscape:window-height="1000"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<!---->
<!---->
<ellipse
style="fill:none;stroke:#000000;stroke-width:1.91177;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="path2"
cx="12"
cy="11.999998"
rx="9.0441151"
ry="9.0441122" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

42
ui/timeline.slint
View File

@@ -40,25 +40,45 @@ component TimelineBlock inherits VerticalLayout {
property <length> image-size: calc-image-size();
property <length> image-size-with-margin: image-size + Global.image-margin;
property <length> title-box-height: 36px;
height: title-box.height + count-y * image-size-with-margin;
property <length> 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 <bool> 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;
}
}
}