1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
2 | // SPDX-License-Identifier: MIT |
3 | |
4 | import { Theme } from "../theme.slint" ; |
5 | |
6 | component ValueDelegate { |
7 | in property <bool> active; |
8 | in property <string> title <=> i-title.text; |
9 | in property <string> unit <=> i-unit.text; |
10 | in property <float> value; |
11 | in property <bool> alternative-colors; |
12 | |
13 | private property <float> display-value; |
14 | |
15 | states [ |
16 | active when active : { |
17 | display-value: value; |
18 | |
19 | in { |
20 | animate display-value { duration: Theme.durations.slow; } |
21 | } |
22 | } |
23 | ] |
24 | |
25 | HorizontalLayout { |
26 | spacing: 15px; |
27 | |
28 | Rectangle { |
29 | min_width: 1px; |
30 | background: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green; |
31 | horizontal-stretch: 0; |
32 | } |
33 | |
34 | VerticalLayout { |
35 | alignment: center; |
36 | horizontal-stretch: 1; |
37 | |
38 | i-title := Text { |
39 | color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green; |
40 | font-size: Theme.typo.label.size; |
41 | font-weight: Theme.typo.label.weight; |
42 | } |
43 | |
44 | HorizontalLayout { |
45 | alignment: start; |
46 | spacing: 5px; |
47 | |
48 | Text { |
49 | color: Theme.palette.white; |
50 | text: round(display-value * 100) / 100; |
51 | font-size: Theme.typo.value.size; |
52 | font-weight: Theme.typo.value.weight; |
53 | vertical-alignment: center; |
54 | } |
55 | |
56 | i-unit := Text { |
57 | y: Theme.spaces.small; |
58 | vertical-alignment: center; |
59 | color: alternative-colors ? Theme.palette.slint-blue-300 : Theme.palette.lemon-green; |
60 | font-size: Theme.typo.label-light.size; |
61 | font-weight: Theme.typo.label-light.weight; |
62 | } |
63 | } |
64 | } |
65 | } |
66 | } |
67 | |
68 | export struct Value { |
69 | title: string, |
70 | value: float, |
71 | unit: string, |
72 | } |
73 | |
74 | export component ValueDisplay { |
75 | in property <bool> alternative-colors; |
76 | in property <[Value]> model; |
77 | in property <bool> active; |
78 | in property <bool> transparent-background; |
79 | in property <bool> vertical; |
80 | |
81 | min-height: 70px; |
82 | |
83 | i-container := Rectangle { |
84 | visible: !transparent-background; |
85 | width: 100%; |
86 | height: 100%; |
87 | border-radius: 4px; |
88 | background: alternative-colors ? Theme.palette.slint-blue-gradient : Theme.palette.lemon-green-gradient; |
89 | } |
90 | |
91 | if(model.length > 0 && !vertical) : HorizontalLayout { |
92 | x: 15px; |
93 | width: parent.width - 30px; |
94 | height: 100%; |
95 | padding-top: 12px; |
96 | padding-bottom: 12px; |
97 | |
98 | for value in root.model : ValueDelegate { |
99 | width: parent.width / model.length; |
100 | horizontal-stretch: 1; |
101 | alternative-colors: root.alternative-colors; |
102 | title: value.title; |
103 | value: value.value; |
104 | unit: value.unit; |
105 | active: root.active; |
106 | } |
107 | } |
108 | |
109 | if(model.length > 0 && vertical) : VerticalLayout { |
110 | for value in root.model : ValueDelegate { |
111 | vertical-stretch: 1; |
112 | alternative-colors: root.alternative-colors; |
113 | title: value.title; |
114 | value: value.value; |
115 | unit: value.unit; |
116 | active: root.active; |
117 | } |
118 | } |
119 | } |
120 | |