Change layout
- Divide everything into individual components & join them - Needs cleanup
This commit is contained in:
parent
4fda55fb2e
commit
f56b543a0b
@ -55,22 +55,146 @@ impl WeatherPopup {
|
|||||||
|
|
||||||
// UI
|
// UI
|
||||||
let default_font = "IosevkaTermSlab Nerd Font Mono";
|
let default_font = "IosevkaTermSlab Nerd Font Mono";
|
||||||
column![
|
//row1col1
|
||||||
container(
|
let icon_text: Text = Text::new(icon_to_nerd_font(&icon_code))
|
||||||
Row::with_children(vec![
|
.font(Font {
|
||||||
Text::new(format!("{city}, {country}"))
|
family: Family::Name(default_font),
|
||||||
.font(Font {
|
..Font::DEFAULT
|
||||||
family: Family::Name(default_font),
|
})
|
||||||
..Font::DEFAULT
|
.align_x(Horizontal::Left)
|
||||||
})
|
.size(60)
|
||||||
.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)
|
let icon_column = Column::new().push(icon_text).width(Length::FillPortion(1));
|
||||||
.align_x(Horizontal::Right)
|
// row1col2row1
|
||||||
.into(),
|
let location_text: Text = Text::new(format!("{city}, {country}"))
|
||||||
])
|
.font(Font {
|
||||||
.width(Length::Fill),
|
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();
|
||||||
|
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
|
||||||
|
})
|
||||||
|
.size(40)
|
||||||
|
.color(Color::from_rgb(1.0, 1.0, 1.0))
|
||||||
|
.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();
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
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 {
|
.style(|_theme| Style {
|
||||||
background: Some(Background::from(Color::from_rgba(0.20, 0.43, 0.55, 0.25))),
|
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)),
|
text_color: Some(Color::from_rgba(1.0, 1.0, 1.0, 0.25)),
|
||||||
@ -86,92 +210,9 @@ impl WeatherPopup {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
.width(Length::Fill)
|
.width(Length::Fill)
|
||||||
.height(Length::FillPortion(1)),
|
.height(Length::Fill)
|
||||||
container(
|
.padding(10)
|
||||||
Row::with_children(vec![
|
.into()
|
||||||
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)),
|
|
||||||
]
|
|
||||||
.width(Length::Fill)
|
|
||||||
.height(Length::Fill)
|
|
||||||
.spacing(0)
|
|
||||||
.padding(0)
|
|
||||||
.align_x(Horizontal::Center)
|
|
||||||
.into()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user