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

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

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