124 lines
3.6 KiB
Plaintext
124 lines
3.6 KiB
Plaintext
import { ScrollView, Palette } from "std-widgets.slint";
|
|
import { Global } from "global.slint";
|
|
import { ImageBucket, Visibility, ImagePreview } from "types.slint";
|
|
|
|
export component ImagePreview inherits Rectangle {
|
|
in property <ImagePreview> preview;
|
|
in property <length> size: 32px;
|
|
callback clicked <=> touch.clicked;
|
|
|
|
width: size;
|
|
height: size;
|
|
clip: true;
|
|
|
|
Image {
|
|
width: preview.ratio < 1.0 ? size : size * preview.ratio;
|
|
height: preview.ratio > 1.0 ? size : size / preview.ratio;
|
|
source: preview.image;
|
|
}
|
|
|
|
touch := TouchArea {}
|
|
}
|
|
|
|
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: 44px;
|
|
height: title-box-height + count-y * image-size-with-margin;
|
|
|
|
y: bucket.y;
|
|
min-width: min-image-size;
|
|
alignment: start;
|
|
|
|
title-box := Rectangle {
|
|
property <bool> checked: false;
|
|
|
|
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: Palette.foreground;
|
|
opacity: 0.8;
|
|
height: title.height;
|
|
width: self.height;
|
|
}
|
|
|
|
if checked : Image {
|
|
source: @image-url("../assets/checked.svg");
|
|
colorize: Palette.accent-background;
|
|
height: title.height;
|
|
width: self.height;
|
|
}
|
|
}
|
|
|
|
title-touch := TouchArea {
|
|
clicked => {
|
|
parent.checked = !parent.checked;
|
|
}
|
|
}
|
|
}
|
|
|
|
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);
|
|
clicked => {
|
|
Global.viewed-image = preview;
|
|
Global.view-image(preview.asset-id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|