init

2026-01-26 09:05:48 +08:00
commit f218a21377
20 changed files with 7774 additions and 0 deletions
--- a/ui/components/dialog.slint
+++ b/ui/components/dialog.slint
@@ -0,0 +1,116 @@
+// 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
+                    }
+                }
+            }
+        }
+    }
+}