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