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

Reform layout code

Browse Source 
- Refactor layout code with simpler logic
- Use `GridLayout` to avoid too must nesting
This commit is contained in:
Candifloss 2025-12-02 22:23:34 +05:30
parent 8c1af56e8a
commit f5886ae8cf
1 changed files with 118 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,156 +30,132 @@ export component MainWindow inherits Window {
padding: 12px;
width: 100%;
// Top row
// Top row - left: Icon
Rectangle {
//background: #b95f5f;
row: 0;
//background: #232323;
col: 0;
colspan: 1;
rowspan: 3;
height: 65px;
width: 276px;
GridLayout {
// Left - weather icon
Rectangle {
height: 65px;
width: 65px;
//background: #316481;
row: 0;
col:0;
Text {
width: 100%;
height: 100%;
text: root.weather_icon;
font-size: 65px;
vertical-alignment: center;
horizontal-alignment: center;
}
}
// Right - Location and temperature
Rectangle {
row: 0;
col:1;
//background: #318138;
height: 65px;
width: 211px;
GridLayout {
// Top right - Location
Rectangle {
row: 0;
col: 0;
//background: #232323;
height: 20px;
Text {
width: 100%;
height: 100%;
text: root.city + "," + root.country;
vertical-alignment: center;
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: #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;
}
}
}
}
}
}
width: 65px;
Text {
height: 100%;
width: 100%;
vertical-alignment: center;
horizontal-alignment: center;
font-size: 65px;
text: root.weather_icon;
}
}
// Bottom row
// Top row - right: Location
Rectangle {
//background: #5fb6b9;
row: 0;
col: 1;
colspan: 4;
rowspan: 1;
height: 20px;
//width: 211px;
min-width: 0px;
Text {
height: 100%;
width: 100%;
vertical-alignment: center;
horizontal-alignment: right;
font-size: 15px;
text: root.city + "," + root.country;
}
}
// Middle row - right - middle: Temperature value
Rectangle {
//background: #895fb9;
row: 1;
//background: #863b3b;
col: 1;
colspan: 3;
rowspan: 2;
height: 45px;
min-width: 0px;
Text {
height: 100%;
width: 100%;
vertical-alignment: center;
horizontal-alignment: right;
font-size: 40px;
text: root.temperature;
}
}
// Middle row - right - right - top: Degree symbol
Rectangle {
//background: #7bb95f;
row: 1;
col: 4;
colspan: 1;
rowspan: 1;
height: 22.5px;
min-width: 0px;
Text {
height: 100%;
min-width: 0px;
vertical-alignment: center;
horizontal-alignment: right;
font-size: 18px;
text: "";
}
}
// Middle row - right - right - bottom: Temperature unit
Rectangle {
//background: #b95f9e;
row: 2;
col: 4;
colspan: 1;
rowspan: 1;
height: 22.5px;
min-width: 0px;
Text {
height: 100%;
min-width: 0px;
vertical-alignment: center;
horizontal-alignment: right;
font-size: 18px;
text: root.unit;
}
}
// Bottom row - left: Weather condition
Rectangle {
//background: #5fb98f;
row: 3;
col: 0;
colspan: 3;
rowspan: 1;
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;
}
}
width: 135px;
Text {
height: 100%;
width: 100%;
vertical-alignment: center;
horizontal-alignment: left;
font-size: 21px;
text: root.weather_main;
}
}
// Bottom row - right: Weather description
Rectangle {
//background: #b7b95f;
row: 3;
col: 3;
colspan: 2;
rowspan: 1;
height: 35px;
width: 141px;
Text {
height: 100%;
width: 100%;
vertical-alignment: top;
horizontal-alignment: right;
font-size: 13.5px;
wrap: word-wrap;
text: root.weather_description;
}
}
}