Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Icon to text_input #1702

Merged
merged 13 commits into from Apr 11, 2023
Merged

Conversation

casperstorm
Copy link
Member

@casperstorm casperstorm commented Feb 13, 2023

This PR adds the ability to add a Icon to a text_input. This opens up for quite a lot of new styling possibilities to text_input as a Icon is defined by:

let handle = text_input::Icon { 
    font: ICON_FONT,
    code_point: '\u{e900}',
    size: Some(14),
    position: text_input::IconPosition::Left,
};

let text_input = text_input(..).icon(icon);

There are multiple use-cases with the handle. Eg; login and search inputs with icons to the left and inputs which has invalid or unexpected content could show a warning icon to the right.

Screenshot 2023-02-13 at 11 44 43 AM

text_input

@hecrj hecrj added feature New feature or request widget labels Feb 14, 2023
@casperstorm casperstorm changed the title Added Handle to text_input Added Icon to text_input Feb 16, 2023
examples/text_input/Cargo.toml Outdated Show resolved Hide resolved
Comment on lines 883 to 912
let text_bounds = {
let bounds = layout.children().next().unwrap().bounds();
if let Some(icon) = icon {
let Icon {
font,
size,
code_point,
position,
} = icon;

let padding = f32::from(padding.horizontal());
let size = size.unwrap_or_else(|| renderer.default_size());
let width = renderer.measure_width(
&code_point.to_string(),
size,
font.clone(),
);

match position {
IconPosition::Left => Rectangle {
x: bounds.x + (width + padding),
width: bounds.width - (width + padding),
..bounds
},
IconPosition::Right => Rectangle {
x: bounds.x,
width: bounds.width - (width + padding),
..bounds
},
}
} else {
bounds
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we compute this only once in layout? We could add the icon child node after the text child, that way event logic won't need to change at all.

@hecrj hecrj added this to the 0.9.0 milestone Feb 20, 2023
@nicoburns
Copy link
Contributor

This could always be added in a future PR, but it would be cool if these icons could handle click events. The use case I am thiking of is a "show password" icon on a password input. Or a magnifying glass search button on a search input.

@n1ght-hunter
Copy link
Contributor

is there a reason to not make the icon impl Into?
so you could have an image or svg or text. can also have buttons etc which all seem like useful things

Copy link
Member

@hecrj hecrj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good stuff! 🥳

I made some changes here and there. The most important ones:

  • Fixed mismatched types related to Generic pixel units #1711 in 0e2fc99.
  • Move the icon layout logic in the layout function and added a spacing field to Icon in 9852b4b.
  • Renamed text_input::IconPosition to text_input::Side in cf9d8e0.

I think we can merge this! We can tackle further use cases separately 🚢

@hecrj hecrj enabled auto-merge April 11, 2023 04:05
@hecrj hecrj merged commit ff24f90 into iced-rs:master Apr 11, 2023
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request widget
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants