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 {
in property <string> city;
in property <string> country;
in property <string> weather_main;
in property <string> weather_description;
in property <string> weather_icon;
in property <string> temperature;
in property <string> unit;
in property <string> city: "Unknown City";
in property <string> country: "UK";
in property <string> weather_main: "Clouds";
in property <string> weather_description: "broken clouds with heavy rain";
in property <string> weather_icon: "";
in property <string> temperature: "23.1";
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;
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%;
@ -26,113 +29,157 @@ export component MainWindow inherits Window {
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;
}
}
// Right column
// Top row
Rectangle {
width: 196px;
background: #000;
VerticalLayout {
alignment: end;
// City name
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 {
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: 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;
}
}
// 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
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;
}
// Unit symbol
Text {
text: unit;
font-size: 16px;
color: #fff;
horizontal-alignment: left;
vertical-alignment: center;
height: 20px;
//background: #577c34;
row: 1;
col:1;
rowspan: 1;
width: 18px;
font-weight: 800;
}
}
}
}
}
}
}
}
// Bottom row
Row {
/* Summary */
Text {
height: 20px;
text: weather_main;
//text: root.unit;
text: "C";
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;
horizontal-alignment: right;
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;
}
}
}
}
}