Merge pull request #2253 from iced-rs/improve-ergonomics

Improve some widget ergonomics
iced-rs · Feb 15, 2024 · 84cc9f1 · 84cc9f1
2 parents 5827023 + 777e2e3
commit 84cc9f1
Show file tree

Hide file tree

Showing 24 changed files with 204 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -71,6 +71,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add a capacity limit to the `GlyphCache` in `iced_tiny_skia`. [#2210](https://github.com/iced-rs/iced/pull/2210)
 - Use pointer equality to speed up `PartialEq` implementation of `image::Bytes`. [#2220](https://github.com/iced-rs/iced/pull/2220)
 - Update `bitflags`, `glam`, `kurbo`, `ouroboros`, `qrcode`, and `sysinfo` dependencies. [#2227](https://github.com/iced-rs/iced/pull/2227)
+- Improve some widget ergonomics. [#2253](https://github.com/iced-rs/iced/pull/2253)
 
 ### Fixed
 - Clipping of `TextInput` selection. [#2199](https://github.com/iced-rs/iced/pull/2199)

diff --git a/examples/combo_box/src/main.rs b/examples/combo_box/src/main.rs
@@ -68,7 +68,7 @@ impl Sandbox for Example {
             text(&self.text),
             "What is your language?",
             combo_box,
-            vertical_space(150),
+            vertical_space().height(150),
         ]
         .width(Length::Fill)
         .align_items(Alignment::Center)

diff --git a/examples/editor/src/main.rs b/examples/editor/src/main.rs
@@ -155,7 +155,7 @@ impl Application for Editor {
                 "Save file",
                 self.is_dirty.then_some(Message::SaveFile)
             ),
-            horizontal_space(Length::Fill),
+            horizontal_space(),
             pick_list(
                 highlighter::Theme::ALL,
                 Some(self.theme),
@@ -179,7 +179,7 @@ impl Application for Editor {
             } else {
                 String::from("New file")
             }),
-            horizontal_space(Length::Fill),
+            horizontal_space(),
             text({
                 let (line, column) = self.content.cursor_position();
 

diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs
@@ -71,7 +71,7 @@ impl Sandbox for Gradient {
             transparent,
         } = *self;
 
-        let gradient_box = container(horizontal_space(Length::Fill))
+        let gradient_box = container(horizontal_space())
             .width(Length::Fill)
             .height(Length::Fill)
             .style(move |_: &_| {

diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs
@@ -85,7 +85,7 @@ impl Application for Layout {
     fn view(&self) -> Element<Message> {
         let header = row![
             text(self.example.title).size(20).font(Font::MONOSPACE),
-            horizontal_space(Length::Fill),
+            horizontal_space(),
             checkbox("Explain", self.explain)
                 .on_toggle(Message::ExplainToggled),
             pick_list(Theme::ALL, Some(&self.theme), Message::ThemeSelected),
@@ -117,7 +117,7 @@ impl Application for Layout {
                     .on_press(Message::Previous)
                     .into(),
             ),
-            Some(horizontal_space(Length::Fill).into()),
+            Some(horizontal_space().into()),
             (!self.example.is_last()).then_some(
                 button("Next →")
                     .padding([5, 10])
@@ -251,16 +251,16 @@ fn row_<'a>() -> Element<'a, Message> {
 }
 
 fn space<'a>() -> Element<'a, Message> {
-    row!["Left!", horizontal_space(Length::Fill), "Right!"].into()
+    row!["Left!", horizontal_space(), "Right!"].into()
 }
 
 fn application<'a>() -> Element<'a, Message> {
     let header = container(
         row![
             square(40),
-            horizontal_space(Length::Fill),
+            horizontal_space(),
             "Header!",
-            horizontal_space(Length::Fill),
+            horizontal_space(),
             square(40),
         ]
         .padding(10)

diff --git a/examples/lazy/src/main.rs b/examples/lazy/src/main.rs
@@ -186,7 +186,7 @@ impl Sandbox for App {
                 row![
                     text(&item.name)
                         .style(theme::Text::Color(item.color.into())),
-                    horizontal_space(Length::Fill),
+                    horizontal_space(),
                     pick_list(Color::ALL, Some(item.color), move |color| {
                         Message::ItemColorChanged(item.clone(), color)
                     }),

diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
@@ -111,13 +111,9 @@ impl Application for App {
     fn view(&self) -> Element<Message> {
         let content = container(
             column![
-                row![
-                    text("Top Left"),
-                    horizontal_space(Length::Fill),
-                    text("Top Right")
-                ]
-                .align_items(Alignment::Start)
-                .height(Length::Fill),
+                row![text("Top Left"), horizontal_space(), text("Top Right")]
+                    .align_items(Alignment::Start)
+                    .height(Length::Fill),
                 container(
                     button(text("Show Modal")).on_press(Message::ShowModal)
                 )
@@ -127,7 +123,7 @@ impl Application for App {
                 .height(Length::Fill),
                 row![
                     text("Bottom Left"),
-                    horizontal_space(Length::Fill),
+                    horizontal_space(),
                     text("Bottom Right")
                 ]
                 .align_items(Alignment::End)
@@ -157,7 +153,7 @@ impl Application for App {
                             text_input("", &self.password)
                                 .on_input(Message::Password)
                                 .on_submit(Message::Submit)
-                                .password()
+                                .secure(true)
                                 .padding(5),
                         ]
                         .spacing(5),

diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
@@ -276,7 +276,7 @@ fn view_content<'a>(
         .on_press(message)
     };
 
-    let mut controls = column![
+    let controls = column![
         button(
             "Split horizontally",
             Message::Split(pane_grid::Axis::Horizontal, pane),
@@ -286,15 +286,16 @@ fn view_content<'a>(
             Message::Split(pane_grid::Axis::Vertical, pane),
         )
     ]
-    .spacing(5)
-    .max_width(160);
-
-    if total_panes > 1 && !is_pinned {
-        controls = controls.push(
+    .push_maybe(if total_panes > 1 && !is_pinned {
+        Some(
             button("Close", Message::Close(pane))
                 .style(theme::Button::Destructive),
-        );
-    }
+        )
+    } else {
+        None
+    })
+    .spacing(5)
+    .max_width(160);
 
     let content = column![
         text(format!("{}x{}", size.width, size.height)).size(24),
@@ -317,31 +318,31 @@ fn view_controls<'a>(
     is_pinned: bool,
     is_maximized: bool,
 ) -> Element<'a, Message> {
-    let mut row = row![].spacing(5);
+    let row = row![].spacing(5).push_maybe(if total_panes > 1 {
+        let (content, message) = if is_maximized {
+            ("Restore", Message::Restore)
+        } else {
+            ("Maximize", Message::Maximize(pane))
+        };
 
-    if total_panes > 1 {
-        let toggle = {
-            let (content, message) = if is_maximized {
-                ("Restore", Message::Restore)
-            } else {
-                ("Maximize", Message::Maximize(pane))
-            };
+        Some(
             button(text(content).size(14))
                 .style(theme::Button::Secondary)
                 .padding(3)
-                .on_press(message)
-        };
-
-        row = row.push(toggle);
-    }
+                .on_press(message),
+        )
+    } else {
+        None
+    });
 
-    let mut close = button(text("Close").size(14))
+    let close = button(text("Close").size(14))
         .style(theme::Button::Destructive)
-        .padding(3);
-
-    if total_panes > 1 && !is_pinned {
-        close = close.on_press(Message::Close(pane));
-    }
+        .padding(3)
+        .on_press_maybe(if total_panes > 1 && !is_pinned {
+            Some(Message::Close(pane))
+        } else {
+            None
+        });
 
     row.push(close).into()
 }

diff --git a/examples/pick_list/src/main.rs b/examples/pick_list/src/main.rs
@@ -43,10 +43,10 @@ impl Sandbox for Example {
         .placeholder("Choose a language...");
 
         let content = column![
-            vertical_space(600),
+            vertical_space().height(600),
             "Which is your favorite language?",
             pick_list,
-            vertical_space(600),
+            vertical_space().height(600),
         ]
         .width(Length::Fill)
         .align_items(Alignment::Center)

diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs
@@ -1,5 +1,6 @@
-use iced::widget::qr_code::{self, QRCode};
-use iced::widget::{column, container, pick_list, row, text, text_input};
+use iced::widget::{
+    column, container, pick_list, qr_code, row, text, text_input,
+};
 use iced::{Alignment, Element, Length, Sandbox, Settings, Theme};
 
 pub fn main() -> iced::Result {
@@ -65,15 +66,16 @@ impl Sandbox for QRGenerator {
         .spacing(10)
         .align_items(Alignment::Center);
 
-        let mut content = column![title, input, choose_theme]
+        let content = column![title, input, choose_theme]
+            .push_maybe(
+                self.qr_code
+                    .as_ref()
+                    .map(|data| qr_code(data).cell_size(10)),
+            )
             .width(700)
             .spacing(20)
             .align_items(Alignment::Center);
 
-        if let Some(qr_code) = self.qr_code.as_ref() {
-            content = content.push(QRCode::new(qr_code).cell_size(10));
-        }
-
         container(content)
             .width(Length::Fill)
             .height(Length::Fill)

diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs
@@ -183,58 +183,60 @@ impl Application for Example {
         .spacing(10)
         .align_items(Alignment::Center);
 
-        let mut crop_controls =
+        let crop_controls =
             column![crop_origin_controls, crop_dimension_controls]
+                .push_maybe(
+                    self.crop_error
+                        .as_ref()
+                        .map(|error| text(format!("Crop error! \n{error}"))),
+                )
                 .spacing(10)
                 .align_items(Alignment::Center);
 
-        if let Some(crop_error) = &self.crop_error {
-            crop_controls =
-                crop_controls.push(text(format!("Crop error! \n{crop_error}")));
-        }
+        let controls = {
+            let save_result =
+                self.saved_png_path.as_ref().map(
+                    |png_result| match png_result {
+                        Ok(path) => format!("Png saved as: {path:?}!"),
+                        Err(PngError(error)) => {
+                            format!("Png could not be saved due to:\n{}", error)
+                        }
+                    },
+                );
 
-        let mut controls = column![
             column![
-                button(centered_text("Screenshot!"))
+                column![
+                    button(centered_text("Screenshot!"))
+                        .padding([10, 20, 10, 20])
+                        .width(Length::Fill)
+                        .on_press(Message::Screenshot),
+                    if !self.png_saving {
+                        button(centered_text("Save as png")).on_press_maybe(
+                            self.screenshot.is_some().then(|| Message::Png),
+                        )
+                    } else {
+                        button(centered_text("Saving..."))
+                            .style(theme::Button::Secondary)
+                    }
+                    .style(theme::Button::Secondary)
                     .padding([10, 20, 10, 20])
                     .width(Length::Fill)
-                    .on_press(Message::Screenshot),
-                if !self.png_saving {
-                    button(centered_text("Save as png")).on_press_maybe(
-                        self.screenshot.is_some().then(|| Message::Png),
-                    )
-                } else {
-                    button(centered_text("Saving..."))
-                        .style(theme::Button::Secondary)
-                }
-                .style(theme::Button::Secondary)
-                .padding([10, 20, 10, 20])
-                .width(Length::Fill)
-            ]
-            .spacing(10),
-            column![
-                crop_controls,
-                button(centered_text("Crop"))
-                    .on_press(Message::Crop)
-                    .style(theme::Button::Destructive)
-                    .padding([10, 20, 10, 20])
-                    .width(Length::Fill),
+                ]
+                .spacing(10),
+                column![
+                    crop_controls,
+                    button(centered_text("Crop"))
+                        .on_press(Message::Crop)
+                        .style(theme::Button::Destructive)
+                        .padding([10, 20, 10, 20])
+                        .width(Length::Fill),
+                ]
+                .spacing(10)
+                .align_items(Alignment::Center),
             ]
-            .spacing(10)
-            .align_items(Alignment::Center),
-        ]
-        .spacing(40);
-
-        if let Some(png_result) = &self.saved_png_path {
-            let msg = match png_result {
-                Ok(path) => format!("Png saved as: {path:?}!"),
-                Err(PngError(error)) => {
-                    format!("Png could not be saved due to:\n{}", error)
-                }
-            };
-
-            controls = controls.push(text(msg));
-        }
+            .push_maybe(save_result.map(text))
+            .spacing(40)
+        };
 
         let side_content = container(controls)
             .align_x(alignment::Horizontal::Center)