Change layout

- Divide everything into individual components & join them
- Needs cleanup
This commit is contained in:
Candifloss 2025-11-09 15:23:52 +05:30
parent 4fda55fb2e
commit f56b543a0b

View File

@ -55,10 +55,19 @@ impl WeatherPopup {
// UI
let default_font = "IosevkaTermSlab Nerd Font Mono";
column![
container(
Row::with_children(vec![
Text::new(format!("{city}, {country}"))
//row1col1
let icon_text: Text = Text::new(icon_to_nerd_font(&icon_code))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
})
.align_x(Horizontal::Left)
.size(60)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.into();
let icon_column = Column::new().push(icon_text).width(Length::FillPortion(1));
// row1col2row1
let location_text: Text = Text::new(format!("{city}, {country}"))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
@ -67,88 +76,125 @@ impl WeatherPopup {
.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))
.into();
let location_row = Column::new()
.push(location_text)
.width(Length::FillPortion(1));
// row1col2row2col1
let temp_val_text: Text = Text::new(format!("{temperature}"))
.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}"))
.into();
let temp_val_col = Column::new()
.push(temp_val_text)
.height(40)
.width(Length::Fill);
// row1col2row2col2row1
let degree_symbol: Text = Text::new(format!("°"))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
})
.size(16)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.into();
let degree_symbol_row: Row<Message> =
Row::new().push(degree_symbol).height(20).width(10).into();
// row1col2row2col2row2
let unit_symbol: Text = Text::new(format!("{unit}"))
.font(Font {
family: Family::Name(default_font),
..Font::DEFAULT
})
.size(16)
.color(Color::from_rgb(1.0, 1.0, 1.0))
.into();
let unit_symbol_row: Row<Message> =
Row::new().push(unit_symbol).height(20).width(10).into();
// row1col2row2col2
let temp_unit_col: Column<Message> = Column::new()
.push(degree_symbol_row)
.push(unit_symbol_row)
.height(40)
.width(10)
.into();
// row1col2row2
let temp_row: Row<Message> = Row::new()
.push(temp_val_col)
.push(temp_unit_col)
.height(Length::FillPortion(3))
.width(Length::Fill);
let row1col2: Column<Message> = Column::new()
.push(location_row)
.push(temp_row)
.height(Length::Fill)
.width(Length::Fill)
.into();
// row2col1
let weather_main_text: Text = 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::Fill)
.into();
let weather_main_col: Column<Message> = Column::new()
.push(weather_main_text)
.height(Length::Fill)
.width(Length::FillPortion(3))
.into(),
Text::new(format!("{weather_description}"))
.into();
// row2col1
let weather_descr_text: Text = 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::Fill)
.into();
let weather_descr_col: Column<Message> = Column::new()
.push(weather_descr_text)
.height(Length::Fill)
.width(Length::FillPortion(4))
.into(),
])
.width(Length::Fill),
)
.into();
let row2: Row<Message> = Row::new()
.push(weather_main_col)
.push(weather_descr_col)
.height(Length::FillPortion(3))
.width(Length::Fill)
.into();
let row1: Row<Message> = Row::new()
.push(icon_column)
.push(row1col2)
.height(Length::FillPortion(8))
.width(Length::Fill)
.into();
let whole_thing: Column<Message> = Column::new()
.push(row1)
.push(row2)
.height(Length::Fill)
.width(Length::Fill)
.into();
container(whole_thing)
.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)),
@ -164,13 +210,8 @@ impl WeatherPopup {
},
})
.width(Length::Fill)
.height(Length::FillPortion(1)),
]
.width(Length::Fill)
.height(Length::Fill)
.spacing(0)
.padding(0)
.align_x(Horizontal::Center)
.padding(10)
.into()
}
}