From 8c1af56e8a476f98b56389ee92588935a244f312 Mon Sep 17 00:00:00 2001 From: Candifloss Date: Mon, 1 Dec 2025 22:54:26 +0530 Subject: [PATCH] Refactor Slint layout code - Change to `GridLayout` --- widget/ui/widget-popup.slint | 247 +++++++++++++++++++++-------------- 1 file changed, 147 insertions(+), 100 deletions(-) diff --git a/widget/ui/widget-popup.slint b/widget/ui/widget-popup.slint index e9f9779..56886f9 100644 --- a/widget/ui/widget-popup.slint +++ b/widget/ui/widget-popup.slint @@ -1,19 +1,22 @@ export component MainWindow inherits Window { - in property city; - in property country; - in property weather_main; - in property weather_description; - in property weather_icon; - in property temperature; - in property unit; + in property city: "Unknown City"; + in property country: "UK"; + in property weather_main: "Clouds"; + in property weather_description: "broken clouds with heavy rain"; + in property weather_icon: ""; + in property temperature: "23.1"; + in property unit: "C"; + in property popup_width: 300; + in property popup_height: 124; + in property default_font: "IosevkaTermSlab Nerd Font Mono"; always-on-top: true; no-frame: true; - width: 300px; - height: 124px; + width: popup_width *1px; + height: popup_height *1px; background: transparent; - default-font-family: "IosevkaTermSlab Nerd Font Mono"; + default-font-family: default_font; Rectangle { width: 100%; @@ -24,82 +27,112 @@ export component MainWindow inherits Window { drop-shadow-color: #00000066; GridLayout { - padding: 12px; - width: 100%; - // Top row - Row { - HorizontalLayout { - // Left column - weather icon - Rectangle { - width: 80px; - height: 80px; - Text { - text: weather_icon; - font-size: 80px; - color: #ffffff; - horizontal-alignment: center; - vertical-alignment: center; - } - } + padding: 12px; + width: 100%; - // Right column - Rectangle { - width: 196px; - background: #000; - VerticalLayout { - alignment: end; - // City name + // Top row + Rectangle { + row: 0; + //background: #232323; + height: 65px; + width: 276px; + + GridLayout { + // Left - weather icon + Rectangle { + height: 65px; + width: 65px; + //background: #316481; + row: 0; + col:0; Text { - text: city + "," + country; - font-size: 14px; - color: #fff; - horizontal-alignment: right; + width: 100%; + height: 100%; + text: root.weather_icon; + font-size: 65px; vertical-alignment: center; - height: 18px; - font-weight: 600; + horizontal-alignment: center; } - // Temperature block - HorizontalLayout { - padding: 0px; - // Temperatur value + } + // Right - Location and temperature + Rectangle { + row: 0; + col:1; + //background: #318138; + height: 65px; + width: 211px; + + GridLayout { + // Top right - Location Rectangle { - background: #ff8800; + row: 0; + col: 0; + //background: #232323; + height: 20px; Text { - text: temperature; - color: #ffffff; - font-size: 40px; - horizontal-alignment: right; + width: 100%; + height: 100%; + text: root.city + "," + root.country; vertical-alignment: center; - letter-spacing: 0px; + horizontal-alignment: right; } } - // Temperature unit + // Bottom right - Temperature block Rectangle { - background: #ff009d; - VerticalLayout { - padding: 0px; - spacing: 0px; - alignment: end; - // The degree symbol - Text { - text: "o"; - font-size: 16px; - color: #fff; - horizontal-alignment: left; - vertical-alignment: center; - height: 25px; - font-weight: 800; + row: 1; + col: 0; + //background: #7a2a70; + height: 45px; + GridLayout { + // Temperature value + Rectangle { + //background: #7c3434; + row: 0; + col:0; + rowspan: 2; + height: 45px; + min-width: 0px; + Text { + vertical-alignment: center; + horizontal-alignment: right; + width: 100%; + height: 100%; + text: root.temperature; + font-size: 40px; + } } - // Unit symbol - Text { - text: unit; - font-size: 16px; - color: #fff; - horizontal-alignment: left; - vertical-alignment: center; - height: 20px; + // Degree symbol + Rectangle { + //background: #39347c; + row: 0; + col:1; + rowspan: 1; width: 18px; - font-weight: 800; + Text { + text: ""; + font-size: 18px; + vertical-alignment: bottom; + horizontal-alignment: right; + height: 100%; + min-width: 0px; + } + } + // Temperature unit + Rectangle { + //background: #577c34; + row: 1; + col:1; + rowspan: 1; + width: 18px; + Text { + //text: root.unit; + text: "C"; + font-size: 18px; + vertical-alignment: top; + horizontal-alignment: right; + height: 100%; + min-width: 0px; + } } } } @@ -107,34 +140,48 @@ export component MainWindow inherits Window { } } } - } + // Bottom row + Rectangle { + row: 1; + //background: #863b3b; + height: 35px; + width: 276px; - // Bottom row - Row { - /* Summary */ - Text { - height: 20px; - 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; + GridLayout { + // Bottom left - Weather condition + Rectangle { + row: 0; + col: 0; + width: 135px; + height: 35px; + //background: #2f794e; + Text { + height: 100%; + width: 100%; + vertical-alignment: center; + horizontal-alignment: left; + text: root.weather_main; + //text: "Thunderstorms"; + font-size: 21px; + } + } + // Bottom right - Weather description + Rectangle { + row: 0; + col: 1; + //background: #b4a44a; + Text { + height: 100%; + width: 100%; + vertical-alignment: top; + horizontal-alignment: right; + text: root.weather_description; + font-size: 13.5px; + wrap: word-wrap; + } + } + } } } } - } } \ No newline at end of file