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"
dirs = "6.0.0"
serde_json = "1.0.145"
iced = {version="0.13.1", features = ["advanced"]}
iced = { version = "0.13.1", features = ["advanced"] }
# slint = "1.14.1"
# [build-dependencies]

View File

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