72 lines
1.7 KiB
Plaintext
72 lines
1.7 KiB
Plaintext
import { AlbumCover } from "types.slint";
|
|
import { Global } from "global.slint";
|
|
import { ScrollView, HorizontalBox, Palette } from "std-widgets.slint";
|
|
import { ImagePreview } from "timeline.slint";
|
|
|
|
component AlbumCover {
|
|
in property <AlbumCover> album;
|
|
|
|
states [
|
|
pressed when touch.pressed: {
|
|
click-effect.opacity: 0.2;
|
|
}
|
|
default: {
|
|
click-effect.opacity: 0;
|
|
}
|
|
]
|
|
|
|
Rectangle {
|
|
background: Palette.alternate-background;
|
|
border-radius: 24px;
|
|
clip: true;
|
|
|
|
HorizontalLayout {
|
|
spacing: 20px;
|
|
|
|
ImagePreview {
|
|
preview: album.thumbnail;
|
|
size: 100px;
|
|
}
|
|
|
|
Text {
|
|
text: album.name;
|
|
horizontal-alignment: left;
|
|
vertical-alignment: center;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
click_effect := Rectangle {
|
|
background: Palette.accent-foreground;
|
|
opacity: 0;
|
|
}
|
|
|
|
touch := TouchArea {}
|
|
}
|
|
}
|
|
|
|
export component Albums {
|
|
private property <[AlbumCover]> albums: Global.albums;
|
|
|
|
property <length> min-image-size: Global.min-image-size;
|
|
property <length> min-size-with-margin: min-image-size + Global.image-margin;
|
|
|
|
ScrollView {
|
|
mouse-drag-pan-enabled: true;
|
|
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
VerticalLayout {
|
|
min-width: min-image-size;
|
|
alignment: start;
|
|
spacing: 10px;
|
|
|
|
for album[i] in albums : AlbumCover {
|
|
album: album;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|