112 lines
3.2 KiB
Plaintext
112 lines
3.2 KiB
Plaintext
// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
|
|
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
|
|
// SPDX-License-Identifier: GPL-3.0-or-later
|
|
import { Palette } from "../palette.slint";
|
|
import { WindowHeader } from "window-header.slint";
|
|
struct DataItem {
|
|
label: string,
|
|
value: float,
|
|
unit: string,
|
|
}
|
|
|
|
component DataColumn {
|
|
in property <[DataItem]> data;
|
|
HorizontalLayout {
|
|
VerticalLayout {
|
|
alignment: center;
|
|
|
|
for item in data: HorizontalLayout {
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
Text {
|
|
text: item.label;
|
|
color: Palette.text-primary;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
|
|
for item in data: HorizontalLayout {
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
Text {
|
|
text: item.value + item.unit;
|
|
color: Palette.text-primary;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component DataWindow {
|
|
in property <[DataItem]> data1;
|
|
in property <[DataItem]> data2;
|
|
HorizontalLayout {
|
|
padding: 12px;
|
|
Rectangle {
|
|
area := TouchArea { }
|
|
|
|
background: Palette.bg-main;
|
|
border-radius: 8px;
|
|
drop-shadow-color: black;
|
|
drop-shadow-offset-x: 6px;
|
|
drop-shadow-offset-y: 6px;
|
|
drop-shadow-blur: 10px;
|
|
width: 500px;
|
|
vertical-stretch: 1;
|
|
VerticalLayout {
|
|
visible: true;
|
|
alignment: start;
|
|
WindowHeader {
|
|
title: "Data";
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-bottom: 10px;
|
|
alignment: space-between;
|
|
DataColumn {
|
|
width: 218px;
|
|
data: data1;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
vertical-stretch: 1;
|
|
width: 21px;
|
|
padding: 10px;
|
|
Rectangle {
|
|
width: 1px;
|
|
background: Palette.border;
|
|
}
|
|
}
|
|
|
|
DataColumn {
|
|
width: 218px;
|
|
data: data2;
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
background: transparent;
|
|
border-color: Palette.border;
|
|
border-width: 2px;
|
|
border-radius: 8px;
|
|
vertical-stretch: 1;
|
|
animate border-color { duration: 200ms; }
|
|
}
|
|
}
|
|
}
|
|
}
|