Change layout

- Divide everything into individual components & join them
- Needs cleanup

widget/src/show_popup.rs

@@ -55,10 +55,19 @@ impl WeatherPopup {
 
         // UI
         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::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(),
+            .into();
-                ])
+        let location_row = Column::new()
-                .width(Length::Fill),
+            .push(location_text)
-            )
+            .width(Length::FillPortion(1));
-            .style(|_theme| Style {
+
-                background: Some(Background::from(Color::from_rgba(0.20, 0.43, 0.55, 0.25))),
+        // row1col2row2col1
-                text_color: Some(Color::from_rgba(1.0, 1.0, 1.0, 0.25)),
+        let temp_val_text: Text = Text::new(format!("{temperature}"))
-                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(),
+            .into();
-                    Space::with_width(Length::Fill).into(),
+        let temp_val_col = Column::new()
-                    Text::new(format!("{temperature}°{unit}"))
+            .push(temp_val_text)
-                        .font(Font {
+            .height(40)
-                            family: Family::Name(default_font),
+            .width(Length::Fill);
-                            ..Font::DEFAULT
+
-                        })
+        // row1col2row2col2row1
-                        .size(32)
+        let degree_symbol: Text = Text::new(format!("°"))
-                        .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))
+            .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(),
+            .into();
-                    Text::new(format!("{weather_description}"))
+
+        // 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(),
+            .into();
-                ])
+
-                .width(Length::Fill),
+        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(10)
-        .padding(0)
-        .align_x(Horizontal::Center)
             .into()
     }
 }