me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Improve some widget ergonomics
This commit is contained in:
Héctor Ramón 2024-02-15 02:57:52 +01:00 • committed by GitHub
commit 84cc9f130b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 204 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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)

2
examples/combo_box/src/main.rs
View file

@ -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)

4
examples/editor/src/main.rs
View file

@ -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();

2
examples/gradient/src/main.rs
View file

@ -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 |_: &_| {

10
examples/layout/src/main.rs
View file

@ -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)

2
examples/lazy/src/main.rs
View file

@ -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)
}),

14
examples/modal/src/main.rs
View file

@ -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),

55
examples/pane_grid/src/main.rs
View file

@ -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)
};
.on_press(message),
)
} else {
None
});
row = row.push(toggle);
}
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()
}

4
examples/pick_list/src/main.rs
View file

@ -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)

16
examples/qr_code/src/main.rs
View file

@ -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)

88
examples/screenshot/src/main.rs
View file

@ -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)
.align_items(Alignment::Center),
]
.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(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)

20
examples/scrollable/src/main.rs
View file

@ -216,9 +216,9 @@ impl Application for ScrollableDemo {
column![
scroll_to_end_button(),
text("Beginning!"),
vertical_space(1200),
vertical_space().height(1200),
text("Middle!"),
vertical_space(1200),
vertical_space().height(1200),
text("End!"),
scroll_to_beginning_button(),
]
@ -241,9 +241,9 @@ impl Application for ScrollableDemo {
row![
scroll_to_end_button(),
text("Beginning!"),
horizontal_space(1200),
horizontal_space().width(1200),
text("Middle!"),
horizontal_space(1200),
horizontal_space().width(1200),
text("End!"),
scroll_to_beginning_button(),
]
@ -268,25 +268,25 @@ impl Application for ScrollableDemo {
row![
column![
text("Let's do some scrolling!"),
vertical_space(2400)
vertical_space().height(2400)
],
scroll_to_end_button(),
text("Horizontal - Beginning!"),
horizontal_space(1200),
horizontal_space().width(1200),
//vertical content
column![
text("Horizontal - Middle!"),
scroll_to_end_button(),
text("Vertical - Beginning!"),
vertical_space(1200),
vertical_space().height(1200),
text("Vertical - Middle!"),
vertical_space(1200),
vertical_space().height(1200),
text("Vertical - End!"),
scroll_to_beginning_button(),
vertical_space(40),
vertical_space().height(40),
]
.spacing(40),
horizontal_space(1200),
horizontal_space().width(1200),
text("Horizontal - End!"),
scroll_to_beginning_button(),
]

2
examples/styling/src/main.rs
View file

@ -76,7 +76,7 @@ impl Sandbox for Styling {
let scrollable = scrollable(column![
"Scroll me!",
vertical_space(800),
vertical_space().height(800),
"You did it!"
])
.width(Length::Fill)

11
examples/toast/src/main.rs
View file

@ -111,11 +111,10 @@ impl Application for App {
column![text(title).size(14), content].spacing(5)
};
let mut add_toast = button("Add Toast");
if !self.editing.body.is_empty() && !self.editing.title.is_empty() {
add_toast = add_toast.on_press(Message::Add);
}
let add_toast = button("Add Toast").on_press_maybe(
(!self.editing.body.is_empty() && !self.editing.title.is_empty())
.then_some(Message::Add),
);
let content = container(
column![
@ -274,7 +273,7 @@ mod toast {
container(
row![
text(toast.title.as_str()),
horizontal_space(Length::Fill),
horizontal_space(),
button("X")
.on_press((on_close)(index))
.padding(3),

32
examples/tour/src/main.rs
View file

@ -56,22 +56,18 @@ impl Sandbox for Tour {
fn view(&self) -> Element<Message> {
let Tour { steps, .. } = self;
let mut controls = row![];
if steps.has_previous() {
controls = controls.push(
let controls = row![]
.push_maybe(steps.has_previous().then(|| {
button("Back")
.on_press(Message::BackPressed)
.style(theme::Button::Secondary),
.style(theme::Button::Secondary)
}))
.push(horizontal_space())
.push_maybe(
steps
.can_continue()
.then(|| button("Next").on_press(Message::NextPressed)),
);
}
controls = controls.push(horizontal_space(Length::Fill));
if steps.can_continue() {
controls =
controls.push(button("Next").on_press(Message::NextPressed));
}
let content: Element<_> = column![
steps.view(self.debug).map(Message::StepMessage),
@ -574,14 +570,14 @@ impl<'a> Step {
text("Tip: You can use the scrollbar to scroll down faster!")
.size(16),
)
.push(vertical_space(4096))
.push(vertical_space().height(4096))
.push(
text("You are halfway there!")
.width(Length::Fill)
.size(30)
.horizontal_alignment(alignment::Horizontal::Center),
)
.push(vertical_space(4096))
.push(vertical_space().height(4096))
.push(ferris(300, image::FilterMethod::Linear))
.push(
text("You made it!")
@ -613,11 +609,7 @@ impl<'a> Step {
Self::container("Text input")
.push("Use a text input to ask for different kinds of information.")
.push(if is_secure {
text_input.password()
} else {
text_input
})
.push(text_input.secure(is_secure))
.push(
checkbox("Enable password mode", is_secure)
.on_toggle(StepMessage::ToggleSecureInput),

2
examples/vectorial_text/src/main.rs
View file

@ -64,7 +64,7 @@ impl Sandbox for VectorialText {
column![
row![
text(label),
horizontal_space(Length::Fill),
horizontal_space(),
text(format!("{:.2}", value))
],
slider(range, value, message).step(0.01)

10
examples/visible_bounds/src/main.rs
View file

@ -81,7 +81,7 @@ impl Application for Example {
let data_row = |label, value, color| {
row![
text(label),
horizontal_space(Length::Fill),
horizontal_space(),
text(value).font(Font::MONOSPACE).size(14).style(color),
]
.height(40)
@ -127,21 +127,21 @@ impl Application for Example {
scrollable(
column![
text("Scroll me!"),
vertical_space(400),
vertical_space().height(400),
container(text("I am the outer container!"))
.id(OUTER_CONTAINER.clone())
.padding(40)
.style(theme::Container::Box),
vertical_space(400),
vertical_space().height(400),
scrollable(
column![
text("Scroll me!"),
vertical_space(400),
vertical_space().height(400),
container(text("I am the inner container!"))
.id(INNER_CONTAINER.clone())
.padding(40)
.style(theme::Container::Box),
vertical_space(400)
vertical_space().height(400),
]
.padding(20)
)

12
widget/src/column.rs
View file

@ -115,6 +115,18 @@ where
self.children.push(child);
self
}
/// Adds an element to the [`Column`], if `Some`.
pub fn push_maybe(
self,
child: Option<impl Into<Element<'a, Message, Theme, Renderer>>>,
) -> Self {
if let Some(child) = child {
self.push(child)
} else {
self
}
}
}
impl<'a, Message, Renderer> Default for Column<'a, Message, Renderer>

20
widget/src/helpers.rs
View file

@ -305,15 +305,15 @@ where
/// Creates a new horizontal [`Space`] with the given [`Length`].
///
/// [`Space`]: crate::Space
pub fn horizontal_space(width: impl Into<Length>) -> Space {
Space::with_width(width)
pub fn horizontal_space() -> Space {
Space::with_width(Length::Fill)
}
/// Creates a new vertical [`Space`] with the given [`Length`].
///
/// [`Space`]: crate::Space
pub fn vertical_space(height: impl Into<Length>) -> Space {
Space::with_height(height)
pub fn vertical_space() -> Space {
Space::with_height(Length::Fill)
}
/// Creates a horizontal [`Rule`] with the given height.
@ -387,6 +387,18 @@ where
crate::Canvas::new(program)
}
/// Creates a new [`QRCode`] widget from the given [`Data`].
///
/// [`QRCode`]: crate::QRCode
/// [`Data`]: crate::qr_code::Data
#[cfg(feature = "qr_code")]
pub fn qr_code<Theme>(data: &crate::qr_code::Data) -> crate::QRCode<'_, Theme>
where
Theme: crate::qr_code::StyleSheet,
{
crate::QRCode::new(data)
}
/// Creates a new [`Shader`].
///
/// [`Shader`]: crate::Shader

13
widget/src/keyed/column.rs
View file

@ -124,6 +124,19 @@ where
self.children.push(child);
self
}
/// Adds an element to the [`Column`], if `Some`.
pub fn push_maybe(
self,
key: Key,
child: Option<impl Into<Element<'a, Message, Theme, Renderer>>>,
) -> Self {
if let Some(child) = child {
self.push(key, child)
} else {
self
}
}
}
impl<'a, Key, Message, Renderer> Default for Column<'a, Key, Message, Renderer>

2
widget/src/lazy/responsive.rs
View file

@ -50,7 +50,7 @@ where
content: RefCell::new(Content {
size: Size::ZERO,
layout: None,
element: Element::new(horizontal_space(0)),
element: Element::new(horizontal_space().width(0)),
}),
}
}

12
widget/src/row.rs
View file

@ -106,6 +106,18 @@ where
self.children.push(child);
self
}
/// Adds an element to the [`Row`], if `Some`.
pub fn push_maybe(
self,
child: Option<impl Into<Element<'a, Message, Theme, Renderer>>>,
) -> Self {
if let Some(child) = child {
self.push(child)
} else {
self
}
}
}
impl<'a, Message, Renderer> Default for Row<'a, Message, Renderer>

12
widget/src/space.rs
View file

@ -39,6 +39,18 @@ impl Space {
height: height.into(),
}
}
/// Sets the width of the [`Space`].
pub fn width(mut self, width: impl Into<Length>) -> Self {
self.width = width.into();
self
}
/// Sets the height of the [`Space`].
pub fn height(mut self, height: impl Into<Length>) -> Self {
self.height = height.into();
self
}
}
impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Space

8
widget/src/text_input.rs
View file

@ -122,8 +122,8 @@ where
}
/// Converts the [`TextInput`] into a secure password input.
pub fn password(mut self) -> Self {
self.is_secure = true;
pub fn secure(mut self, is_secure: bool) -> Self {
self.is_secure = is_secure;
self
}
@ -991,9 +991,9 @@ where
}
return event::Status::Captured;
} else {
state.is_pasting = None;
}
state.is_pasting = None;
}
Event::Keyboard(keyboard::Event::ModifiersChanged(modifiers)) => {
let state = state();