candifloss/OpenWeatherWidget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Slint layout code

Browse Source 
- Change to `GridLayout`
This commit is contained in:
Candifloss 2025-12-01 22:54:26 +05:30
parent cfd8c2557c
commit 8c1af56e8a
1 changed files with 147 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
widget/ui/widget-popup.slint
View File

@ -1,19 +1,22 @@
export component MainWindow inherits Window { export component MainWindow inherits Window {
in property <string> city; in property <string> city: "Unknown City";
in property <string> country; in property <string> country: "UK";
in property <string> weather_main; in property <string> weather_main: "Clouds";
in property <string> weather_description; in property <string> weather_description: "broken clouds with heavy rain";
in property <string> weather_icon; in property <string> weather_icon: "";
in property <string> temperature; in property <string> temperature: "23.1";
in property <string> unit; in property <string> unit: "C";
in property <int> popup_width: 300;
in property <int> popup_height: 124;
in property <string> default_font: "IosevkaTermSlab Nerd Font Mono";
always-on-top: true; always-on-top: true;
no-frame: true; no-frame: true;
width: 300px; width: popup_width *1px;
height: 124px; height: popup_height *1px;
background: transparent; background: transparent;
default-font-family: "IosevkaTermSlab Nerd Font Mono"; default-font-family: default_font;
Rectangle { Rectangle {
width: 100%; width: 100%;
@ -26,113 +29,157 @@ export component MainWindow inherits Window {
GridLayout { GridLayout {
padding: 12px; padding: 12px;
width: 100%; 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;
}
}
// Right column // Top row
Rectangle { Rectangle {
width: 196px; row: 0;
background: #000; //background: #232323;
VerticalLayout { height: 65px;
alignment: end; width: 276px;
// City name
GridLayout {
// Left - weather icon
Rectangle {
height: 65px;
width: 65px;
//background: #316481;
row: 0;
col:0;
Text { Text {
text: city + "," + country; width: 100%;
font-size: 14px; height: 100%;
color: #fff; text: root.weather_icon;
horizontal-alignment: right; font-size: 65px;
vertical-alignment: center; vertical-alignment: center;
height: 18px; horizontal-alignment: center;
font-weight: 600;
} }
// Temperature block }
HorizontalLayout { // Right - Location and temperature
padding: 0px;
// Temperatur value
Rectangle { Rectangle {
background: #ff8800; row: 0;
col:1;
//background: #318138;
height: 65px;
width: 211px;
GridLayout {
// Top right - Location
Rectangle {
row: 0;
col: 0;
//background: #232323;
height: 20px;
Text { Text {
text: temperature; width: 100%;
color: #ffffff; height: 100%;
font-size: 40px; text: root.city + "," + root.country;
horizontal-alignment: right;
vertical-alignment: center; vertical-alignment: center;
letter-spacing: 0px; horizontal-alignment: right;
}
}
// Bottom right - Temperature block
Rectangle {
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;
}
}
// Degree symbol
Rectangle {
//background: #39347c;
row: 0;
col:1;
rowspan: 1;
width: 18px;
Text {
text: "";
font-size: 18px;
vertical-alignment: bottom;
horizontal-alignment: right;
height: 100%;
min-width: 0px;
} }
} }
// Temperature unit // Temperature unit
Rectangle { Rectangle {
background: #ff009d; //background: #577c34;
VerticalLayout { row: 1;
padding: 0px; col:1;
spacing: 0px; rowspan: 1;
alignment: end;
// 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: 18px; width: 18px;
font-weight: 800;
}
}
}
}
}
}
}
}
// Bottom row
Row {
/* Summary */
Text { Text {
height: 20px; //text: root.unit;
text: weather_main; text: "C";
font-size: 18px; font-size: 18px;
color: #fff;
vertical-alignment: top; vertical-alignment: top;
horizontal-alignment: left; horizontal-alignment: right;
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%; height: 100%;
font-weight: 600; min-width: 0px;
}
}
}
}
}
}
}
}
// Bottom row
Rectangle {
row: 1;
//background: #863b3b;
height: 35px;
width: 276px;
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;
}
}
} }
} }
} }