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

Change layout

Browse Source 
- Change to grid layout with rows
This commit is contained in:
Candifloss 2025-11-26 22:38:38 +05:30
parent 92db45bb28
commit 5df38a8b63
2 changed files with 95 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
widget/src/show_popup.rs
View File

@ -74,7 +74,7 @@ fn set_ui_props(ui: &MainWindow, resp: &WeatherResponse, cfg: &Config) {
ui.window().set_size(LogicalSize::new(300.0, 124.0)); ui.window().set_size(LogicalSize::new(300.0, 124.0));
// Window position (x,y): pixels // Window position (x,y): pixels
ui.window().set_position(LogicalPosition::new(1610.0, 32.0)); ui.window().set_position(LogicalPosition::new(1055.0, 32.0));
} }
/// Create and show the Window UI /// Create and show the Window UI

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

@ -15,7 +15,7 @@ export component MainWindow inherits Window {
background: transparent; background: transparent;
default-font-family: "IosevkaTermSlab Nerd Font Mono"; default-font-family: "IosevkaTermSlab Nerd Font Mono";
weather_popup := Rectangle { Rectangle {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 12px; border-radius: 12px;
@ -23,78 +23,67 @@ export component MainWindow inherits Window {
drop-shadow-blur: 15px; drop-shadow-blur: 15px;
drop-shadow-color: #00000066; drop-shadow-color: #00000066;
VerticalLayout { GridLayout {
spacing: 2px; // Consistent vertical spacing padding: 12px;
horizontal-stretch: 1.0; // Top row
padding: 12px; // Consistent padding throughout Row {
HorizontalLayout {
// Left column - weather icon
Rectangle {
width: 80px;
Text {
text: weather_icon;
font-size: 80px;
color: #ffffff;
horizontal-alignment: center;
vertical-alignment: center;
}
}
/* Top: City */ // Right column
Rectangle {
VerticalLayout {
alignment: end;
// City name
Text { Text {
text: city + "," + country; text: city + "," + country;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
//font-family: horizontal-alignment: right;
horizontal-alignment: TextHorizontalAlignment.left; height: 18px;
height: 18px; // Fixed height for consistent spacing
font-weight: 600; font-weight: 600;
} }
// Temperature block
/* Middle: icon on left, temp on right */
HorizontalLayout { HorizontalLayout {
horizontal-stretch: 1.0; // Temperatur value
height: 50px; // Fixed height for main content area
padding: 0px;
/* Icon */
Text {
text: weather_icon;
font-size: 40px;
horizontal-alignment: TextHorizontalAlignment.left;
color: #fff;
vertical-alignment: TextVerticalAlignment.center;
width: 46px; // Fixed width for consistent alignment
}
/* Flexible spacer to help with alignment */
Rectangle { Rectangle {
horizontal-stretch: 1.0;
background: transparent;
}
/* Temperature group */
HorizontalLayout {
spacing: 4px; // Tighter spacing for temperature elements
padding: 0px;
//height: 50px;
Text { Text {
text: temperature; text: temperature;
color: #ffffff;
font-size: 40px; font-size: 40px;
color: #fff; horizontal-alignment: right;
vertical-alignment: TextVerticalAlignment.center;
font-weight: 900;
} }
}
// Temperature unit
Rectangle {
VerticalLayout { VerticalLayout {
height: 50px; // Match temperature text height // The degree symbol
padding: 0px;
spacing: 0px;
Text { Text {
text: "o"; text: "o";
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
horizontal-alignment: TextHorizontalAlignment.left; horizontal-alignment: left;
vertical-alignment: TextVerticalAlignment.center; vertical-alignment: center;
height: 25px; height: 25px;
font-weight: 800; font-weight: 800;
} }
// Unit symbol
Text { Text {
text: unit; text: unit;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
horizontal-alignment: TextHorizontalAlignment.left; horizontal-alignment: left;
vertical-alignment: TextVerticalAlignment.center; vertical-alignment: center;
height: 20px; height: 20px;
width: 20px; width: 20px;
font-weight: 800; font-weight: 800;
@ -102,25 +91,23 @@ export component MainWindow inherits Window {
} }
} }
} }
}
}
}
}
/* Bottom: summary + description */ // Bottom row
HorizontalLayout { Row {
spacing: 8px;
horizontal-stretch: 1.0;
height: 32px;
padding: 0px;
/* Summary */ /* Summary */
Text { Text {
text: weather_main; text: weather_main;
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
vertical-alignment: TextVerticalAlignment.top; vertical-alignment: top;
horizontal-alignment: TextHorizontalAlignment.left; horizontal-alignment: left;
width: 40%; // Fixed percentage width for consistent layout width: 40%; // Fixed percentage width for consistent layout
font-weight: 800; font-weight: 800;
} }
/* Description */ /* Description */
Text { Text {
text: weather_description; text: weather_description;