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

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

@ -1,41 +1,118 @@
export component MainWindow inherits Window {
always-on-top: true;
height: 100px;
width: 300px;
no-frame: true;
width: 320px;
height: 110px;
background: transparent;
weather_popup := Rectangle {
height: 100%;
width: 100%;
border-radius: 10px;
border-color: #ffffff00;
background: #7e7e7e36;
height: 100%;
padding: 10px; // keep content inset from edges
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";
vertical-alignment: TextVerticalAlignment.center;
x: 10px;
y: 10px;
color: #ffffff;
VerticalLayout {
spacing: 6px;
horizontal-stretch: 1.0;
padding: 10px;
/* Top: City */
Text {
text: "Los Angeles";
font-size: 14px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
}
/* Middle: icon on left, temp on right */
HorizontalLayout {
spacing: 8px;
horizontal-stretch: 1.0;
/* Icon (fixed size) */
Text {
text: "";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
}
weather_summary := Text {
text: "Clear";
x: 10px;
y: 55px;
font-size: 30px;
font-family: "IosevkaTermSlab Nerd Font Mono";
color: #fff;
/* flexible spacer pushes the temperature group to the right */
Rectangle {
horizontal-stretch: 1.0;
background: transparent;
}
city_name := Text {
text: "England";
x: 150px;
y: 55px;
font-size: 25px;
/* 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;
}
}
}
}
}