1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3import { Palette } from "../../common.slint";
4import { AppState } from "../../appState.slint";
5import { HaText } from "../general/haText.slint";
6
7export component ViewButton inherits Rectangle {
8 in property <int> target-page;
9 in property <string> text <=> t.text;
10 in property <brush> active-color: Palette.selection-foreground;
11 in property <brush> inactive-color: Palette.foreground;
12 in property <length> font-size: 1.5rem;
13 property <bool> is-active: target-page == AppState.target-page;
14 TouchArea {
15 clicked => {
16 AppState.target-page = target-page;
17 AppState.first-run = false;
18 }
19 }
20
21 Rectangle {
22 background: is-active ? Palette.accent-background : Palette.accent-background.transparentize(0.9);
23 animate background {
24 duration: 200ms;
25 easing: ease-in-out-sine;
26 }
27 border-radius: self.height / 2;
28 width: is-active ? t.width : t.width * 0.8;
29 animate width {
30 duration: 500ms;
31 easing: ease-in-out-sine;
32 }
33 height: 1.5px;
34 y: parent.height - 15px;
35 }
36
37 t := HaText {
38 x: (parent.width - self.width) / 2;
39 y: (parent.height - self.height) / 2;
40 font-size: root.font-size;
41 color: is-active ? root.active-color : root.inactive-color;
42 }
43}
44