Introduce properties and basic layout

Cargo.toml

@@ -11,6 +11,7 @@ slint = "1.14.1"
 smithay-client-toolkit = { version = "0.20.0", features = ["calloop"] }
 wayland-client = "0.31.11"
 winit = "0.30.12"
+x11rb = "0.13.2"
 
 [build-dependencies]
 slint-build = "1.14.1"

src/main.rs

@@ -1,10 +1,17 @@
+use slint::{LogicalPosition, LogicalSize};
+
 slint::include_modules!();
 
 fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let bar_height = 25;
+    let bar_width = 1366;
 
     let ui = TopBar::new()?;
-    ui.window().set_size(slint::LogicalSize::new(1000.0, 25.0));
-    ui.window().set_position(slint::LogicalPosition::new(0.0,0.0));
+    ui.set_bar_width(bar_width);
+    ui.set_bar_height(bar_height);
+    ui.window()
+        .set_size(LogicalSize::new(bar_width as f32, bar_height as f32));
+    ui.window().set_position(LogicalPosition::new(0.0, 0.0));
     ui.run()?;
 
     Ok(())

ui/topbar.slint

@@ -1,17 +1,42 @@
 export component TopBar inherits Window {
+
+    in property<int> bar_width;
+    in property<int> bar_height;
+
     title: "chocobar";
-    width: 1000px;
-    height: 25px;
+    width: bar_width *1px;
+    height: bar_height *1px;
     always-on-top: true;
     no-frame: true;
-    background: #999898a6;
+    //background: #999898a6;
+    x: 0px;
+    y: 0px;
 
-    topbar := Rectangle {
+    Rectangle {
+        x: 0px;
+        y: 0px;
         width: 100%;
         height: 100%;
-        border-radius: 4px;
+        background: #999898a6;
+        border-radius: 0px;
+
+        HorizontalLayout {
+            x: 0px;
+            y: 0px;
+            width: 100%;
+            height: 100%;
+            
+            Rectangle {
                 background: #79a9af7b;
-        drop-shadow-blur: 15px;
-        drop-shadow-color: #00000066;
+            }
+            
+            Rectangle {
+                background: #779e5c7a;
+            }
+            
+            Rectangle {
+                background: #c2779a7a;
+            }
+        }
     }
 }