Change layout
- Divide everything into individual components & join them - Needs cleanup
This commit is contained in:
parent
4fda55fb2e
commit
f56b543a0b
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user