Update styling

- Add containers for styling
This commit is contained in:
Candifloss 2025-11-08 16:03:50 +05:30
parent 280651a64d
commit 4fda55fb2e
2 changed files with 124 additions and 59 deletions

View File

@ -11,7 +11,7 @@ reqwest = {version = "0.12.23", features = ["blocking", "json"] }
toml = "0.9.7" toml = "0.9.7"
dirs = "6.0.0" dirs = "6.0.0"
serde_json = "1.0.145" serde_json = "1.0.145"
iced = {version="0.13.1", features = ["advanced"]} iced = { version = "0.13.1", features = ["advanced"] }
# slint = "1.14.1" # slint = "1.14.1"
# [build-dependencies] # [build-dependencies]

View File

@ -1,9 +1,12 @@
use iced::{ use iced::{
application::Appearance, Color, Alignment, Background, Border, Color, Font, Gradient, Length, Point, Settings, Shadow, Size,
Alignment, Font, Length, Point, Settings, Size, Task, Task, Vector,
alignment::{Horizontal, Vertical}, alignment::{Horizontal, Vertical},
application::Appearance,
border,
font::Family, font::Family,
widget::{Column, Row, Space, Text, column, row}, gradient,
widget::{Column, Container, Row, Space, Text, column, container, container::Style, row},
window, window,
}; };
use owm_rs::free_api_v25::current::WeatherResponse; use owm_rs::free_api_v25::current::WeatherResponse;
@ -53,55 +56,120 @@ impl WeatherPopup {
// UI // UI
let default_font = "IosevkaTermSlab Nerd Font Mono"; let default_font = "IosevkaTermSlab Nerd Font Mono";
column![ column![
// City and country container(
Row::with_children(vec![ Row::with_children(vec![
Text::new(format!("{city}, {country}")) Text::new(format!("{city}, {country}"))
.font(Font { .font(Font {
family: Family::Name(default_font), family: Family::Name(default_font),
..Font::DEFAULT ..Font::DEFAULT
}) })
.size(16) .size(16)
.color(Color::from_rgb(1.0, 1.0, 1.0)) .color(Color::from_rgb(1.0, 1.0, 1.0))
.into(), .width(Length::Fill)
]) .align_x(Horizontal::Right)
.width(Length::Fill), .into(),
// Weather icon and temperature ])
Row::with_children(vec![ .width(Length::Fill),
Text::new(icon_to_nerd_font(&icon_code)) )
.font(Font { .style(|_theme| Style {
family: Family::Name(default_font), background: Some(Background::from(Color::from_rgba(0.20, 0.43, 0.55, 0.25))),
..Font::DEFAULT text_color: Some(Color::from_rgba(1.0, 1.0, 1.0, 0.25)),
}) border: Border {
.align_x(Horizontal::Left) color: Color::TRANSPARENT,
.size(40) width: 0.0,
.color(Color::from_rgb(1.0, 1.0, 1.0)) radius: border::Radius::from(10.0),
.into(), },
Space::with_width(Length::Fill).into(), shadow: Shadow {
Text::new(format!("{temperature}°{unit}")) color: Color::TRANSPARENT,
.font(Font { offset: Vector { x: 0.0, y: 0.0 },
family: Family::Name(default_font), blur_radius: 0.0,
..Font::DEFAULT },
}) })
.size(32) .width(Length::Fill)
.color(Color::from_rgb(1.0, 1.0, 1.0)) .height(Length::FillPortion(1)),
.into(), container(
]) Row::with_children(vec![
.width(Length::Fill), Text::new(icon_to_nerd_font(&icon_code))
// Weather description .font(Font {
Row::with_children(vec![ family: Family::Name(default_font),
Text::new(format!("{weather_main} - {weather_description}")) ..Font::DEFAULT
.font(Font { })
family: Family::Name(default_font), .align_x(Horizontal::Left)
..Font::DEFAULT .size(40)
}) .color(Color::from_rgb(1.0, 1.0, 1.0))
.size(16) .into(),
.color(Color::from_rgb(1.0, 1.0, 1.0)) Space::with_width(Length::Fill).into(),
.into(), Text::new(format!("{temperature}°{unit}"))
]) .font(Font {
.width(Length::Fill), family: Family::Name(default_font),
..Font::DEFAULT
})
.size(32)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.into(),
])
.width(Length::Fill),
)
.style(|_theme| Style {
background: Some(Background::from(Color::from_rgba(0.20, 0.43, 0.55, 0.25))),
text_color: Some(Color::from_rgba(1.0, 1.0, 1.0, 0.25)),
border: Border {
color: Color::TRANSPARENT,
width: 0.0,
radius: border::Radius::from(10.0),
},
shadow: Shadow {
color: Color::TRANSPARENT,
offset: Vector { x: 0.0, y: 0.0 },
blur_radius: 0.0,
},
})
.width(Length::Fill)
.height(Length::FillPortion(2)),
container(
Row::with_children(vec![
Text::new(format!("{weather_main}"))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
})
.size(16)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.width(Length::FillPortion(3))
.into(),
Text::new(format!("{weather_description}"))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
})
.size(16)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.width(Length::FillPortion(4))
.into(),
])
.width(Length::Fill),
)
.style(|_theme| Style {
background: Some(Background::from(Color::from_rgba(0.20, 0.43, 0.55, 0.25))),
text_color: Some(Color::from_rgba(1.0, 1.0, 1.0, 0.25)),
border: Border {
color: Color::TRANSPARENT,
width: 0.0,
radius: border::Radius::from(10.0),
},
shadow: Shadow {
color: Color::TRANSPARENT,
offset: Vector { x: 0.0, y: 0.0 },
blur_radius: 0.0,
},
})
.width(Length::Fill)
.height(Length::FillPortion(1)),
] ]
.spacing(10) .width(Length::Fill)
.padding(20) .height(Length::Fill)
.spacing(0)
.padding(0)
.align_x(Horizontal::Center) .align_x(Horizontal::Center)
.into() .into()
} }
@ -122,13 +190,10 @@ pub fn show_popup(resp: WeatherResponse, conf: owm_widg_config::config::Config)
decorations: false, decorations: false,
..window::Settings::default() ..window::Settings::default()
}) })
.style(|_state, _theme| { .style(|_state, _theme| Appearance {
Appearance { background_color: Color::TRANSPARENT,
background_color: Color::from_rgba(0.1, 0.1, 0.1, 0.25), text_color: Color::default(),
text_color: Color::default(), })
}
}
)
.run_with(move || (WeatherPopup::new(resp, conf), Task::none())) .run_with(move || (WeatherPopup::new(resp, conf), Task::none()))
} }