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

Style popup UI

Browse Source 
- Adjust color, size, space, padding, position, etc.
This commit is contained in:
Candifloss 2025-11-04 12:55:40 +05:30
parent aa4cf1a686
commit 3262745771
1 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,59 +1,60 @@
export component MainWindow inherits Window {
always-on-top: true;
no-frame: true;
width: 320px;
height: 110px;
width: 300px;
height: 120px;
background: transparent;
weather_popup := Rectangle {
width: 100%;
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;
border-radius: 12px;
background: @linear-gradient(160deg, #246a8ac9, #c5edff75);
drop-shadow-blur: 15px;
drop-shadow-color: #00000066;
VerticalLayout {
spacing: 6px;
spacing: 2px; // Consistent vertical spacing
horizontal-stretch: 1.0;
padding: 10px;
padding: 12px; // Consistent padding throughout
/* Top: City */
Text {
text: "Los Angeles";
text: "Province of Turin";
font-size: 14px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
height: 18px; // Fixed height for consistent spacing
font-weight: 600;
}
/* Middle: icon on left, temp on right */
HorizontalLayout {
spacing: 8px;
HorizontalLayout {
horizontal-stretch: 1.0;
height: 46px; // Fixed height for main content area
padding: 0px;
/* Icon (fixed size) */
/* Icon */
Text {
text: "";
font-family: "IosevkaTermSlab Nerd Font Mono";
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
width: 46px; // Fixed width for consistent alignment
}
/* flexible spacer pushes the temperature group to the right */
/* Flexible spacer to help with alignment */
Rectangle {
horizontal-stretch: 1.0;
background: transparent;
}
/* Temperature group (numeric + degree/unit) */
/* Temperature group */
HorizontalLayout {
spacing: 6px;
//vertical-alignment: TextVerticalAlignment.center;
spacing: 4px; // Tighter spacing for temperature elements
padding: 0px;
Text {
text: "124.4";
@ -61,58 +62,71 @@ export component MainWindow inherits Window {
font-size: 40px;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
font-weight: 900;
}
VerticalLayout {
spacing: -6px; // bring degree and unit closer to the number
// keep the combined height near the numeric height
height: 46px; // Match temperature text height
padding: 0px;
spacing: 0px;
Text {
text: "°";
text: "o";
font-size: 20px;
color: #fff;
horizontal-alignment: TextHorizontalAlignment.center;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.bottom;
height: 20px;
font-weight: 800;
}
Text {
text: "F";
font-size: 18px;
color: #fff;
horizontal-alignment: TextHorizontalAlignment.center;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.top;
height: 20px;
font-weight: 800;
}
}
}
}
// Bottom: summary (left) + description (right).
/* Bottom: summary + description */
HorizontalLayout {
spacing: 10px;
spacing: 8px;
horizontal-stretch: 1.0;
height: 28px;
height: 32px;
padding: 0px;
// Summary (left) — single prominent line, vertically centered
/* Summary */
Text {
text: "Thunderstorm";
font-size: 22px;
font-size: 18px;
color: #fff;
font-family: "IosevkaTermSlab Nerd Font Mono";
vertical-alignment: TextVerticalAlignment.center;
vertical-alignment: TextVerticalAlignment.top;
horizontal-alignment: TextHorizontalAlignment.left;
// width can be fixed or let text size itself
width: 40%; // Fixed percentage width for consistent layout
font-weight: 800;
}
// Description (right) — can take remaining width and occupy same height
/* Description */
Text {
text: "Thunderstorm with heavy drizzle";
font-size: 13px;
font-size: 12px;
color: #ffffffcc;
font-family: "IosevkaTermSlab Nerd Font Mono";
horizontal-alignment: TextHorizontalAlignment.left;
vertical-alignment: TextVerticalAlignment.center;
vertical-alignment: TextVerticalAlignment.bottom;
horizontal-stretch: 1.0;
wrap: word-wrap;
wrap: word-wrap;
height: 100%;
font-weight: 600;
}
}
}
}
}
}