Dummy widget: Time widget

- Time widget module
- Configure layout and callback
- Dummy: Not real time yet

build.rs

@@ -1,3 +1,7 @@
 fn main() {
-    slint_build::compile("ui/topbar.slint").unwrap();
+    slint_build::compile_with_config(
+        "ui/topbar.slint",
+        slint_build::CompilerConfiguration::new().with_style("fluent-dark".to_string()),
+    )
+    .unwrap();
 }

src/main.rs

@@ -24,7 +24,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
     slint::platform::set_platform(Box::new(backend))?;
 
     // Bar dimensions.
-    let bar_height = 25;
+    let bar_height = 27;
     let bar_width = 1366;
 
     // Create the Slint UI component.
@@ -33,6 +33,13 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
     ui.set_bar_width(bar_width);
     ui.set_bar_height(bar_height);
 
+    let weak = ui.as_weak();
+    ui.on_open_program(move || {
+        if let Some(_ui) = weak.upgrade() {
+            // Launch a program on click
+            std::process::Command::new("xclock").spawn().ok();
+        }
+    });
     // Size the window to match the bar.
     #[allow(clippy::cast_precision_loss)]
     ui.window()

ui/time-widget.slint

@@ -0,0 +1,28 @@
+export component TimeWidget {
+    in-out property <string> time_text;
+
+    callback open_program();    // Callback to execute things from Rust, because Slint can't
+    
+    Rectangle {
+        background: touch_area.pressed ? #555 : touch_area.has-hover ? #444 : #333; // Bg color based on click & hover  
+        border-radius: 3px;
+
+        HorizontalLayout {
+            padding-right: 3px;
+            padding-left: 3px;
+            
+            Text {
+                text: time_text;
+                color: white;
+                vertical-alignment: center;
+            }
+        }
+
+        // Area to sense click and hover
+        touch_area:= TouchArea {
+            clicked => {
+                open_program();
+            }
+        }
+    }
+}

ui/topbar.slint

@@ -1,16 +1,21 @@
+import { TimeWidget } from "time-widget.slint";
+
 export component TopBar inherits Window {
 
     in property<int> bar_width;
     in property<int> bar_height;
 
+    callback open_program();
+
     title: "chocobar";
     width: bar_width *1px;
     height: bar_height *1px;
     always-on-top: true;
     no-frame: true;
-    //background: #999898a6;
     x: 0px;
     y: 0px;
+    default-font-family: "IosevkaTermSlab Nerd Font Mono";
+    default-font-size: 14px;
 
     Rectangle {
         x: 0px;
@@ -25,17 +30,32 @@ export component TopBar inherits Window {
             y: 0px;
             width: 100%;
             height: 100%;
+            alignment: space-between;
             
+            // Left side
             Rectangle {
                 background: #79a9af7b;
+                width: parent.width/3;
             }  
             
+            // Middle
             Rectangle {
                 background: #779e5c7a;
             }  
             
+            // Right side
             Rectangle {
                 background: #c2779a7a;
+                width: parent.width/3;
+
+                HorizontalLayout {
+                    alignment: end; // RIght-align
+
+                    TimeWidget {
+                        time_text: "11:43 AM";  // Fix this: Replace with time value
+                        open_program => root.open_program();    // Forward the widget's callback to the root's to access from Rust  
+                    }
+                }
             }
         }
     }