From 5df38a8b633c273a922e99979ecfb7caef276c33 Mon Sep 17 00:00:00 2001 From: Candifloss Date: Wed, 26 Nov 2025 22:38:38 +0530 Subject: [PATCH] Change layout - Change to grid layout with rows --- widget/src/show_popup.rs | 2 +- widget/ui/widget-popup.slint | 201 ++++++++++++++++------------------- 2 files changed, 95 insertions(+), 108 deletions(-) diff --git a/widget/src/show_popup.rs b/widget/src/show_popup.rs index eb1e50b..5ae4435 100644 --- a/widget/src/show_popup.rs +++ b/widget/src/show_popup.rs @@ -74,7 +74,7 @@ fn set_ui_props(ui: &MainWindow, resp: &WeatherResponse, cfg: &Config) { ui.window().set_size(LogicalSize::new(300.0, 124.0)); // Window position (x,y): pixels - ui.window().set_position(LogicalPosition::new(1610.0, 32.0)); + ui.window().set_position(LogicalPosition::new(1055.0, 32.0)); } /// Create and show the Window UI diff --git a/widget/ui/widget-popup.slint b/widget/ui/widget-popup.slint index e1ce605..a9754b2 100644 --- a/widget/ui/widget-popup.slint +++ b/widget/ui/widget-popup.slint @@ -15,7 +15,7 @@ export component MainWindow inherits Window { background: transparent; default-font-family: "IosevkaTermSlab Nerd Font Mono"; - weather_popup := Rectangle { + Rectangle { width: 100%; height: 100%; border-radius: 12px; @@ -23,117 +23,104 @@ export component MainWindow inherits Window { drop-shadow-blur: 15px; drop-shadow-color: #00000066; - VerticalLayout { - spacing: 2px; // Consistent vertical spacing - horizontal-stretch: 1.0; - padding: 12px; // Consistent padding throughout - - /* Top: City */ - Text { - text: city + ", " + country; - font-size: 14px; - color: #fff; - //font-family: - horizontal-alignment: TextHorizontalAlignment.left; - height: 18px; // Fixed height for consistent spacing - font-weight: 600; - } - - /* Middle: icon on left, temp on right */ - HorizontalLayout { - horizontal-stretch: 1.0; - height: 50px; // Fixed height for main content area - padding: 0px; - - /* Icon */ - Text { - text: weather_icon; - font-size: 40px; - horizontal-alignment: TextHorizontalAlignment.left; - color: #fff; - vertical-alignment: TextVerticalAlignment.center; - width: 46px; // Fixed width for consistent alignment - } - - /* Flexible spacer to help with alignment */ - Rectangle { - horizontal-stretch: 1.0; - background: transparent; - } - - /* Temperature group */ - HorizontalLayout { - spacing: 4px; // Tighter spacing for temperature elements - padding: 0px; - //height: 50px; - - Text { - text: temperature; - font-size: 40px; - color: #fff; - vertical-alignment: TextVerticalAlignment.center; - font-weight: 900; - } - - VerticalLayout { - height: 50px; // Match temperature text height - padding: 0px; - spacing: 0px; - - Text { - text: "o"; - font-size: 16px; - color: #fff; - horizontal-alignment: TextHorizontalAlignment.left; - vertical-alignment: TextVerticalAlignment.center; - height: 25px; - font-weight: 800; - } - Text { - text: unit; - font-size: 16px; - color: #fff; - horizontal-alignment: TextHorizontalAlignment.left; - vertical-alignment: TextVerticalAlignment.center; - height: 20px; - width: 20px; - font-weight: 800; - } - } - } - } - - /* Bottom: summary + description */ + GridLayout { + padding: 12px; + // Top row + Row { HorizontalLayout { - spacing: 8px; - horizontal-stretch: 1.0; - height: 32px; - padding: 0px; - - /* Summary */ - Text { - text: weather_main; - font-size: 18px; - color: #fff; - vertical-alignment: TextVerticalAlignment.top; - horizontal-alignment: TextHorizontalAlignment.left; - width: 40%; // Fixed percentage width for consistent layout - font-weight: 800; + // Left column - weather icon + Rectangle { + width: 80px; + Text { + text: weather_icon; + font-size: 80px; + color: #ffffff; + horizontal-alignment: center; + vertical-alignment: center; + } } - /* Description */ - Text { - text: weather_description; - font-size: 12px; - color: #ffffffcc; - horizontal-alignment: TextHorizontalAlignment.right; - vertical-alignment: TextVerticalAlignment.top; - horizontal-stretch: 1.0; - wrap: word-wrap; - height: 100%; - font-weight: 600; + // Right column + Rectangle { + VerticalLayout { + alignment: end; + // City name + Text { + text: city + "," + country; + font-size: 14px; + color: #fff; + horizontal-alignment: right; + height: 18px; + font-weight: 600; + } + // Temperature block + HorizontalLayout { + // Temperatur value + Rectangle { + Text { + text: temperature; + color: #ffffff; + font-size: 40px; + horizontal-alignment: right; + } + } + // Temperature unit + Rectangle { + VerticalLayout { + // The degree symbol + Text { + text: "o"; + font-size: 16px; + color: #fff; + horizontal-alignment: left; + vertical-alignment: center; + height: 25px; + font-weight: 800; + } + // Unit symbol + Text { + text: unit; + font-size: 16px; + color: #fff; + horizontal-alignment: left; + vertical-alignment: center; + height: 20px; + width: 20px; + font-weight: 800; + } + } + } + } + } } } } + + // Bottom row + Row { + /* Summary */ + Text { + text: weather_main; + font-size: 18px; + color: #fff; + vertical-alignment: top; + horizontal-alignment: left; + width: 40%; // Fixed percentage width for consistent layout + font-weight: 800; + } + /* Description */ + Text { + text: weather_description; + font-size: 12px; + color: #ffffffcc; + horizontal-alignment: TextHorizontalAlignment.right; + vertical-alignment: TextVerticalAlignment.top; + horizontal-stretch: 1.0; + wrap: word-wrap; + height: 100%; + font-weight: 600; + } + } + } } } \ No newline at end of file