60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
import { Data } from "data.slint";
|
|
|
|
export component LoginOptionTile inherits Rectangle {
|
|
in property <image> icon;
|
|
in property <string> label;
|
|
in property <int> index;
|
|
in property <bool> has_focus;
|
|
|
|
callback on_click();
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
Image {
|
|
width: Data.selected_index == index ? root.width * 0.65: root.width * 0.5;
|
|
height: Data.selected_index == index ? root.height * 0.65: root.height * 0.5;
|
|
|
|
animate width, height {
|
|
duration: 150ms;
|
|
}
|
|
|
|
source: icon;
|
|
}
|
|
|
|
area := TouchArea {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
z: 1;
|
|
|
|
clicked => {
|
|
root.on_click()
|
|
}
|
|
}
|
|
|
|
hover_rect := Rectangle {
|
|
width: parent.width - parent.width * 0.05;
|
|
height: parent.height - parent.width * 0.05;
|
|
background: rgba(0, 0, 0, area.has-hover || (has_focus && Data.selected_index == parent.index) ? 0.5 : 0.0);
|
|
|
|
opacity: area.has-hover || Data.selected_index == parent.index ? 1.0 : 0.0;
|
|
animate opacity { duration: 250ms; }
|
|
animate background { duration: 250ms; }
|
|
Text {
|
|
height: parent.height;
|
|
vertical-alignment: TextVerticalAlignment.bottom;
|
|
color: rgba(240, 240, 240, 1);
|
|
text: label;
|
|
font-size: max(1rem, parent.height * 0.125);
|
|
font-family: "monospace";
|
|
max-width: parent.width;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
|
|
border-width: self.width * 0.025;
|
|
border-radius: self.width * 0.025;
|
|
border-color: Data.selected_index == self.index ? rgba(120, 120, 220, 0.5) : rgba(0, 0, 0, 0);
|
|
|
|
animate border-color { duration: 250ms; }
|
|
}
|