100 lines
2.9 KiB
Plaintext
100 lines
2.9 KiB
Plaintext
import { ScrollView } from "std-widgets.slint";
|
|
import { Global } from "global.slint";
|
|
import { ImageBucket, Visibility, ImagePreview } from "types.slint";
|
|
|
|
component ImagePreview inherits Rectangle {
|
|
in property <ImagePreview> preview;
|
|
in property <length> size: 32px;
|
|
width: size;
|
|
height: size;
|
|
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: preview.image;
|
|
}
|
|
|
|
touch := TouchArea {
|
|
clicked => {
|
|
Global.previewed-image = root.preview;
|
|
}
|
|
}
|
|
}
|
|
|
|
component TimelineBlock inherits VerticalLayout {
|
|
in property <int> index: -1;
|
|
in-out property <ImageBucket> bucket;
|
|
|
|
property <length> min-image-size: Global.min-image-size;
|
|
property <length> min-size-with-margin: min-image-size + Global.image-margin;
|
|
property <int> count-x: Math.floor(self.width / min-size-with-margin); // TODO: or is it ceil?
|
|
property <int> count-y: Math.ceil(bucket.count / count-x);
|
|
|
|
function calc-image-size() -> length {
|
|
let remaining-length = Math.mod(self.width, min-size-with-margin);
|
|
min-image-size + remaining-length / count-x
|
|
}
|
|
|
|
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;
|
|
|
|
y: bucket.y;
|
|
min-width: min-image-size;
|
|
alignment: start;
|
|
|
|
title-box := HorizontalLayout {
|
|
alignment: space-between;
|
|
height: title-box-height;
|
|
padding: 8px;
|
|
|
|
Text {
|
|
text: bucket.title;
|
|
}
|
|
|
|
// TODO: checkbox thingy
|
|
Text {
|
|
text: "O";
|
|
}
|
|
}
|
|
|
|
image-box := Rectangle {
|
|
width: 100%;
|
|
height: count-y * image-size-with-margin;
|
|
|
|
for preview[i] in bucket.previews : ImagePreview {
|
|
preview: preview;
|
|
size: image-size;
|
|
x: Global.image-margin / 2 + Math.mod(i, count-x) * (Global.image-margin + image-size);
|
|
y: Math.floor(i / count-x) * (image-size + Global.image-margin);
|
|
}
|
|
}
|
|
}
|
|
|
|
export component Timeline inherits ScrollView {
|
|
mouse-drag-pan-enabled: true;
|
|
viewport-height: rect.height;
|
|
|
|
changed viewport-y => {
|
|
Global.timeline-scrolled(-self.viewport-y);
|
|
}
|
|
|
|
rect := Rectangle {
|
|
y: 0;
|
|
x: 0;
|
|
width: root.width;
|
|
height: Global.timeline-height;
|
|
preferred-width: self.width;
|
|
preferred-height: self.height;
|
|
for bucket[i] in Global.image-buckets : Rectangle {
|
|
if bucket.visibility == Visibility.InView : TimelineBlock {
|
|
width: root.width;
|
|
index: i;
|
|
bucket: bucket;
|
|
}
|
|
}
|
|
}
|
|
}
|