132 lines
3.9 KiB
Plaintext
132 lines
3.9 KiB
Plaintext
import { Theme, SpacingSystem, Typography } from "../theme/theme.slint";
|
|
|
|
export struct Connection {
|
|
source: string,
|
|
destination: string,
|
|
protocol: string,
|
|
upload: string,
|
|
download: string,
|
|
duration: string,
|
|
}
|
|
|
|
export component ConnectionsPage {
|
|
in property <[Connection]> connections: [];
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
// Header
|
|
Text {
|
|
text: "Connections";
|
|
color: Theme.colors.foreground;
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
}
|
|
|
|
// Connections List
|
|
ScrollView {
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
for connection in root.connections: ConnectionItem {
|
|
connection-data: connection;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component ConnectionItem {
|
|
in property <Connection> connection-data;
|
|
|
|
private property <bool> hovered: false;
|
|
|
|
height: 60px;
|
|
|
|
states [
|
|
hovered when root.hovered: {
|
|
container.background: Theme.colors.muted.transparentize(0.5);
|
|
}
|
|
]
|
|
|
|
container := Rectangle {
|
|
background: transparent;
|
|
border-radius: SpacingSystem.radius.md;
|
|
border-width: 1px;
|
|
border-color: Theme.colors.border;
|
|
|
|
animate background { duration: 150ms; }
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: space-between;
|
|
|
|
// Icon
|
|
Rectangle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: SpacingSystem.radius.md;
|
|
background: Theme.colors.primary.transparentize(0.9);
|
|
|
|
Text {
|
|
text: "🔗";
|
|
font-size: Typography.sizes.lg;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Connection Info
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
|
|
Text {
|
|
text: root.connection-data.source + " → " + root.connection-data.destination;
|
|
color: Theme.colors.foreground;
|
|
font-size: Typography.sizes.sm;
|
|
font-weight: Typography.weights.medium;
|
|
overflow: elide;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s3;
|
|
|
|
Text {
|
|
text: root.connection-data.protocol;
|
|
color: Theme.colors.muted-foreground;
|
|
font-size: Typography.sizes.xs;
|
|
}
|
|
|
|
Text {
|
|
text: "↑ " + root.connection-data.upload;
|
|
color: Theme.colors.primary;
|
|
font-size: Typography.sizes.xs;
|
|
}
|
|
|
|
Text {
|
|
text: "↓ " + root.connection-data.download;
|
|
color: Theme.colors.secondary;
|
|
font-size: Typography.sizes.xs;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Duration
|
|
Text {
|
|
text: root.connection-data.duration;
|
|
color: Theme.colmuted-foreground;
|
|
font-size: Typography.sizes.xs;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
touch := TouchArea {
|
|
moved => {
|
|
root.hovered = self.has-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|