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

Popup UI basic design

Browse Source 
- Design popup UI with slint
This commit is contained in:
Candifloss 2025-11-03 07:15:36 +05:30
parent d83c5a0aca
commit aa4cf1a686
1 changed files with 109 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,118 @@
export component MainWindow inherits Window { export component MainWindow inherits Window {
always-on-top: true; always-on-top: true;
height: 100px;
width: 300px;
no-frame: true; no-frame: true;
width: 320px;
height: 110px;
background: transparent;
weather_popup := Rectangle { weather_popup := Rectangle {
height: 100%;
width: 100%; width: 100%;
border-radius: 10px; height: 100%;
border-color: #ffffff00; padding: 10px; // keep content inset from edges
background: #7e7e7e36; border-radius: 14px;
border-color: #ffffff22;
border-width: 1px;
background: @linear-gradient(135deg, #ffffff18, #7e7e7e24);
drop-shadow-blur: 10px;
drop-shadow-color: #00000066;
main_temp := Text {text: "24.4" + "°C"; VerticalLayout {
vertical-alignment: TextVerticalAlignment.center; spacing: 6px;
x: 10px; horizontal-stretch: 1.0;
y: 10px; padding: 10px;
color: #ffffff;
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
}
weather_summary := Text { /* Top: City */
text: "Clear"; Text {
x: 10px; text: "Los Angeles";
y: 55px; font-size: 14px;
font-size: 30px; color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono"; font-family: "IosevkaTermSlab Nerd Font Mono";
color: #fff; horizontal-alignment: TextHorizontalAlignment.left;
} }
city_name := Text { /* Middle: icon on left, temp on right */
text: "England"; HorizontalLayout {
x: 150px; spacing: 8px;
y: 55px; horizontal-stretch: 1.0;
font-size: 25px;
font-family: "IosevkaTermSlab Nerd Font Mono"; /* Icon (fixed size) */
color: #fff; Text {
text: "";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
}
/* flexible spacer pushes the temperature group to the right */
Rectangle {
horizontal-stretch: 1.0;
background: transparent;
}
/* Temperature group (numeric + degree/unit) */
HorizontalLayout {
spacing: 6px;
//vertical-alignment: TextVerticalAlignment.center;
Text {
text: "124.4";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
}
VerticalLayout {
spacing: -6px; // bring degree and unit closer to the number
// keep the combined height near the numeric height
Text {
text: "°";
font-size: 20px;
color: #fff;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.bottom;
}
Text {
text: "F";
font-size: 18px;
color: #fff;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.top;
}
}
}
}
// Bottom: summary (left) + description (right).
HorizontalLayout {
spacing: 10px;
horizontal-stretch: 1.0;
height: 28px;
// Summary (left) — single prominent line, vertically centered
Text {
text: "Thunderstorm";
font-size: 22px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.left;
// width can be fixed or let text size itself
}
// Description (right) — can take remaining width and occupy same height
Text {
text: "Thunderstorm with heavy drizzle";
font-size: 13px;
color: #ffffffcc;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.center;
horizontal-stretch: 1.0;
wrap: word-wrap;
}
}
} }
} }
} }