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%;
@ -24,82 +27,112 @@ export component MainWindow inherits Window {
drop-shadow-color: #00000066; drop-shadow-color: #00000066;
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; Rectangle {
// Temperatur value row: 0;
col:1;
//background: #318138;
height: 65px;
width: 211px;
GridLayout {
// Top right - Location
Rectangle { Rectangle {
background: #ff8800; 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;
} }
} }
// Temperature unit // Bottom right - Temperature block
Rectangle { Rectangle {
background: #ff009d; row: 1;
VerticalLayout { col: 0;
padding: 0px; //background: #7a2a70;
spacing: 0px; height: 45px;
alignment: end; GridLayout {
// The degree symbol // Temperature value
Text { Rectangle {
text: "o"; //background: #7c3434;
font-size: 16px; row: 0;
color: #fff; col:0;
horizontal-alignment: left; rowspan: 2;
vertical-alignment: center; height: 45px;
height: 25px; min-width: 0px;
font-weight: 800; Text {
vertical-alignment: center;
horizontal-alignment: right;
width: 100%;
height: 100%;
text: root.temperature;
font-size: 40px;
}
} }
// Unit symbol // Degree symbol
Text { Rectangle {
text: unit; //background: #39347c;
font-size: 16px; row: 0;
color: #fff; col:1;
horizontal-alignment: left; rowspan: 1;
vertical-alignment: center;
height: 20px;
width: 18px; 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 GridLayout {
Row { // Bottom left - Weather condition
/* Summary */ Rectangle {
Text { row: 0;
height: 20px; col: 0;
text: weather_main; width: 135px;
font-size: 18px; height: 35px;
color: #fff; //background: #2f794e;
vertical-alignment: top; Text {
horizontal-alignment: left; height: 100%;
width: 40%; // Fixed percentage width for consistent layout width: 100%;
font-weight: 800; vertical-alignment: center;
} horizontal-alignment: left;
/* Description */ text: root.weather_main;
Text { //text: "Thunderstorms";
text: weather_description; font-size: 21px;
font-size: 12px; }
color: #ffffffcc; }
horizontal-alignment: TextHorizontalAlignment.right; // Bottom right - Weather description
vertical-alignment: TextVerticalAlignment.top; Rectangle {
horizontal-stretch: 1.0; row: 0;
wrap: word-wrap; col: 1;
height: 100%; //background: #b4a44a;
font-weight: 600; Text {
height: 100%;
width: 100%;
vertical-alignment: top;
horizontal-alignment: right;
text: root.weather_description;
font-size: 13.5px;
wrap: word-wrap;
}
}
}
} }
} }
} }
}
} }