117 lines
4.4 KiB
Plaintext
117 lines
4.4 KiB
Plaintext
// Dialog Component - Simplified version
|
|
// Modal dialog with backdrop and smooth animations
|
|
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Animations } from "../utils/animations.slint";
|
|
|
|
export component Dialog {
|
|
// Public properties
|
|
in-out property <bool> open: false;
|
|
in property <string> title: "";
|
|
in property <string> description: "";
|
|
|
|
// Callbacks
|
|
callback close();
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// Only show when open
|
|
if open: Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #00000080;
|
|
|
|
// Close on backdrop click
|
|
TouchArea {
|
|
clicked => {
|
|
root.close();
|
|
}
|
|
}
|
|
|
|
// Dialog content container (centered)
|
|
VerticalLayout {
|
|
alignment: center;
|
|
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
|
|
// Dialog card
|
|
Rectangle {
|
|
width: 500px;
|
|
background: Theme.colors.card;
|
|
border-radius: SpacingSystem.radius.lg;
|
|
border-width: 1px;
|
|
border-color: Theme.colors.border;
|
|
drop-shadow-blur: 20px;
|
|
drop-shadow-color: #00000040;
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s6;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
// Header
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s4;
|
|
alignment: space-between;
|
|
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
// Title
|
|
Text {
|
|
text: title;
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.card-foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
|
|
// Description
|
|
Text {
|
|
text: description;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
|
|
// Close button
|
|
Rectangle {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: SpacingSystem.radius.md;
|
|
background: close-touch.has-hover ? Theme.colors.muted : Colors.transparent;
|
|
|
|
animate background {
|
|
duration: Animations.durations.fast;
|
|
easing: Animations.ease-in-out;
|
|
}
|
|
|
|
Text {
|
|
text: "✕";
|
|
font-size: Typography.sizes.lg;
|
|
color: Theme.colors.muted-foreground;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
|
|
close-touch := TouchArea {
|
|
clicked => {
|
|
root.close();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Prevent backdrop click from closing
|
|
TouchArea {
|
|
// Consume clicks to prevent backdrop from receiving them
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|