1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "theme.slint";
5import { TitleLabel } from "title_label.slint";
6
7export component Card inherits Rectangle {
8 in property <string> title: "title";
9 in property <bool> is-selected: false;
10 in property <image> image-source <=> image.source;
11
12 callback clicked <=> touch-area.clicked;
13
14 private property <length> spacing: Theme.spacing-medium;
15 private property <length> title-spacing: Theme.spacing-medium;
16 private property <length> title-area-height: Theme.size-small;
17
18 border-radius: Theme.radius-regular;
19 background: Theme.background-regular;
20 width: Theme.size-medium;
21 height: Theme.size-medium;
22 clip: false;
23
24 states [
25 pressed-selected when touch-area.pressed && root.is-selected : {
26 background: Theme.background-selected-pressed;
27 image.colorize: Theme.foreground-selected-pressed;
28 width: Theme.size-big;
29 height: Theme.size-big;
30 title-label.visible: true;
31 }
32 hover-selected when touch-area.has-hover && root.is-selected : {
33 background: Theme.background-selected-hover;
34 image.colorize: Theme.foreground-selected-hover;
35 width: Theme.size-big;
36 height: Theme.size-big;
37 title-label.visible: true;
38 }
39 pressed when touch-area.pressed : {
40 background: Theme.background-pressed;
41 image.colorize: Theme.foreground-pressed;
42 }
43
44 hover when touch-area.has-hover: {
45 background: Theme.background-hover;
46 image.colorize: Theme.foreground-hover;
47 }
48 selected when root.is-selected : {
49 background: Theme.background-selected;
50 image.colorize: Theme.foreground-selected;
51 width: Theme.size-big;
52 height: Theme.size-big;
53 title-label.visible: true;
54 }
55 ]
56
57 animate width { duration: Theme.duration-regular; easing: ease-in; }
58 animate height { duration: Theme.duration-regular; easing: ease-in; }
59 animate background { duration: Theme.duration-fast; }
60
61 touch-area := TouchArea {}
62
63 image := Image {
64 x: (parent.width - self.width) / 2;
65 y: (parent.height - self.height) / 2;
66 width: 80%;
67 height: 80%;
68 colorize: Theme.foreground;
69
70 animate colorize { duration: Theme.duration-fast; }
71 }
72
73 // Selection text
74 title-label := TitleLabel {
75 x: (parent.width - self.width) / 2;
76 y: parent.height;
77 text <=> root.title;
78 visible: false;
79 color: Theme.foreground;
80 }
81}