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

Merge pull request #1702 from casperstorm/feat/text_input_handle

Browse source 
Added `Icon` to `text_input`
This commit is contained in:
Héctor Ramón 2023-04-11 06:18:52 +02:00 • committed by GitHub
commit ff24f9040c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 190 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
examples/tour/fonts/icons.ttf Normal file
View file

Binary file not shown.

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

@ -5,7 +5,7 @@ use iced::widget::{
scrollable, slider, text, text_input, toggler, vertical_space,
};
use iced::widget::{Button, Column, Container, Slider};
use iced::{Color, Element, Length, Renderer, Sandbox, Settings};
use iced::{Color, Element, Font, Length, Renderer, Sandbox, Settings};
pub fn main() -> iced::Result {
env_logger::init();
@ -127,6 +127,7 @@ impl Steps {
Step::TextInput {
value: String::new(),
is_secure: false,
is_showing_icon: false,
},
Step::Debugger,
Step::End,
@ -171,14 +172,32 @@ impl Steps {
enum Step {
Welcome,
Slider { value: u8 },
RowsAndColumns { layout: Layout, spacing: u16 },
Text { size: u16, color: Color },
Radio { selection: Option<Language> },
Toggler { can_continue: bool },
Image { width: u16 },
Slider {
value: u8,
},
RowsAndColumns {
layout: Layout,
spacing: u16,
},
Text {
size: u16,
color: Color,
},
Radio {
selection: Option<Language>,
},
Toggler {
can_continue: bool,
},
Image {
width: u16,
},
Scrollable,
TextInput { value: String, is_secure: bool },
TextInput {
value: String,
is_secure: bool,
is_showing_icon: bool,
},
Debugger,
End,
}
@ -194,6 +213,7 @@ pub enum StepMessage {
ImageWidthChanged(u16),
InputChanged(String),
ToggleSecureInput(bool),
ToggleTextInputIcon(bool),
DebugToggled(bool),
TogglerChanged(bool),
}
@ -256,6 +276,14 @@ impl<'a> Step {
*can_continue = value;
}
}
StepMessage::ToggleTextInputIcon(toggle) => {
if let Step::TextInput {
is_showing_icon, ..
} = self
{
*is_showing_icon = toggle
}
}
};
}
@ -303,9 +331,11 @@ impl<'a> Step {
Self::rows_and_columns(*layout, *spacing)
}
Step::Scrollable => Self::scrollable(),
Step::TextInput { value, is_secure } => {
Self::text_input(value, *is_secure)
}
Step::TextInput {
value,
is_secure,
is_showing_icon,
} => Self::text_input(value, *is_secure, *is_showing_icon),
Step::Debugger => Self::debugger(debug),
Step::End => Self::end(),
}
@ -530,8 +560,17 @@ impl<'a> Step {
)
}
fn text_input(value: &str, is_secure: bool) -> Column<'a, StepMessage> {
let text_input = text_input(
fn text_input(
value: &str,
is_secure: bool,
is_showing_icon: bool,
) -> Column<'a, StepMessage> {
const ICON_FONT: Font = Font::External {
name: "Icons",
bytes: include_bytes!("../fonts/icons.ttf"),
};
let mut text_input = text_input(
"Type something to continue...",
value,
StepMessage::InputChanged,
@ -539,6 +578,16 @@ impl<'a> Step {
.padding(10)
.size(30);
if is_showing_icon {
text_input = text_input.icon(text_input::Icon {
font: ICON_FONT,
code_point: '\u{E900}',
size: Some(35.0),
spacing: 10.0,
side: text_input::Side::Right,
});
}
Self::container("Text input")
.push("Use a text input to ask for different kinds of information.")
.push(if is_secure {
@ -551,6 +600,11 @@ impl<'a> Step {
is_secure,
StepMessage::ToggleSecureInput,
))
.push(checkbox(
"Show icon",
is_showing_icon,
StepMessage::ToggleTextInputIcon,
))
.push(
"A text input produces a message every time it changes. It is \
very easy to keep track of its contents:",

22
native/src/widget/checkbox.rs
View file

@ -14,17 +14,6 @@ use crate::{
pub use iced_style::checkbox::{Appearance, StyleSheet};
/// The icon in a [`Checkbox`].
#[derive(Debug, Clone, PartialEq)]
pub struct Icon<Font> {
/// Font that will be used to display the `code_point`,
pub font: Font,
/// The unicode code point that will be used as the icon.
pub code_point: char,
/// Font size of the content.
pub size: Option<f32>,
}
/// A box that can be checked.
///
/// # Example
@ -319,3 +308,14 @@ where
Element::new(checkbox)
}
}
/// The icon in a [`Checkbox`].
#[derive(Debug, Clone, PartialEq)]
pub struct Icon<Font> {
/// Font that will be used to display the `code_point`,
pub font: Font,
/// The unicode code point that will be used as the icon.
pub code_point: char,
/// Font size of the content.
pub size: Option<f32>,
}

111
native/src/widget/text_input.rs
View file

@ -68,6 +68,7 @@ where
on_change: Box<dyn Fn(String) -> Message + 'a>,
on_paste: Option<Box<dyn Fn(String) -> Message + 'a>>,
on_submit: Option<Message>,
icon: Option<Icon<Renderer::Font>>,
style: <Renderer::Theme as StyleSheet>::Style,
}
@ -99,6 +100,7 @@ where
on_change: Box::new(on_change),
on_paste: None,
on_submit: None,
icon: None,
style: Default::default(),
}
}
@ -132,6 +134,13 @@ where
self.font = font;
self
}
/// Sets the [`Icon`] of the [`TextInput`].
pub fn icon(mut self, icon: Icon<Renderer::Font>) -> Self {
self.icon = Some(icon);
self
}
/// Sets the width of the [`TextInput`].
pub fn width(mut self, width: impl Into<Length>) -> Self {
self.width = width.into();
@ -190,6 +199,7 @@ where
self.size,
&self.font,
self.is_secure,
self.icon.as_ref(),
&self.style,
)
}
@ -223,7 +233,14 @@ where
renderer: &Renderer,
limits: &layout::Limits,
) -> layout::Node {
layout(renderer, limits, self.width, self.padding, self.size)
layout(
renderer,
limits,
self.width,
self.padding,
self.size,
self.icon.as_ref(),
)
}
fn operate(
@ -288,6 +305,7 @@ where
self.size,
&self.font,
self.is_secure,
self.icon.as_ref(),
&self.style,
)
}
@ -318,6 +336,30 @@ where
}
}
/// The content of the [`Icon`].
#[derive(Debug, Clone)]
pub struct Icon<Font> {
/// The font that will be used to display the `code_point`.
pub font: Font,
/// The unicode code point that will be used as the icon.
pub code_point: char,
/// The font size of the content.
pub size: Option<f32>,
/// The spacing between the [`Icon`] and the text in a [`TextInput`].
pub spacing: f32,
/// The side of a [`TextInput`] where to display the [`Icon`].
pub side: Side,
}
/// The side of a [`TextInput`].
#[derive(Debug, Clone)]
pub enum Side {
/// The left side of a [`TextInput`].
Left,
/// The right side of a [`TextInput`].
Right,
}
/// The identifier of a [`TextInput`].
#[derive(Debug, Clone, PartialEq, Eq, Hash)]
pub struct Id(widget::Id);
@ -380,6 +422,7 @@ pub fn layout<Renderer>(
width: Length,
padding: Padding,
size: Option<f32>,
icon: Option<&Icon<Renderer::Font>>,
) -> layout::Node
where
Renderer: text::Renderer,
@ -389,10 +432,51 @@ where
let padding = padding.fit(Size::ZERO, limits.max());
let limits = limits.width(width).pad(padding).height(text_size);
let mut text = layout::Node::new(limits.resolve(Size::ZERO));
text.move_to(Point::new(padding.left, padding.top));
let text_bounds = limits.resolve(Size::ZERO);
layout::Node::with_children(text.size().pad(padding), vec![text])
if let Some(icon) = icon {
let icon_width = renderer.measure_width(
&icon.code_point.to_string(),
icon.size.unwrap_or_else(|| renderer.default_size()),
icon.font.clone(),
);
let mut text_node = layout::Node::new(
text_bounds - Size::new(icon_width + icon.spacing, 0.0),
);
let mut icon_node =
layout::Node::new(Size::new(icon_width, text_bounds.height));
match icon.side {
Side::Left => {
text_node.move_to(Point::new(
padding.left + icon_width + icon.spacing,
padding.top,
));
icon_node.move_to(Point::new(padding.left, padding.top));
}
Side::Right => {
text_node.move_to(Point::new(padding.left, padding.top));
icon_node.move_to(Point::new(
padding.left + text_bounds.width - icon_width,
padding.top,
));
}
};
layout::Node::with_children(
text_bounds.pad(padding),
vec![text_node, icon_node],
)
} else {
let mut text = layout::Node::new(text_bounds);
text.move_to(Point::new(padding.left, padding.top));
layout::Node::with_children(text_bounds.pad(padding), vec![text])
}
}
/// Processes an [`Event`] and updates the [`State`] of a [`TextInput`]
@ -814,6 +898,7 @@ pub fn draw<Renderer>(
size: Option<f32>,
font: &Renderer::Font,
is_secure: bool,
icon: Option<&Icon<Renderer::Font>>,
style: &<Renderer::Theme as StyleSheet>::Style,
) where
Renderer: text::Renderer,
@ -823,7 +908,9 @@ pub fn draw<Renderer>(
let value = secure_value.as_ref().unwrap_or(value);
let bounds = layout.bounds();
let text_bounds = layout.children().next().unwrap().bounds();
let mut children_layout = layout.children();
let text_bounds = children_layout.next().unwrap().bounds();
let is_mouse_over = bounds.contains(cursor_position);
@ -845,6 +932,20 @@ pub fn draw<Renderer>(
appearance.background,
);
if let Some(icon) = icon {
let icon_layout = children_layout.next().unwrap();
renderer.fill_text(Text {
content: &icon.code_point.to_string(),
size: icon.size.unwrap_or_else(|| renderer.default_size()),
font: icon.font.clone(),
color: appearance.icon_color,
bounds: icon_layout.bounds(),
horizontal_alignment: alignment::Horizontal::Left,
vertical_alignment: alignment::Vertical::Top,
});
}
let text = value.to_string();
let size = size.unwrap_or_else(|| renderer.default_size());

2
src/widget.rs
View file

@ -124,7 +124,7 @@ pub mod text_input {
//! Display fields that can be filled with text.
pub use iced_native::widget::text_input::{
focus, move_cursor_to, move_cursor_to_end, move_cursor_to_front,
select_all, Appearance, Id, StyleSheet,
select_all, Appearance, Icon, Id, Side, StyleSheet,
};
/// A field that can be filled with text.

2
style/src/text_input.rs
View file

@ -12,6 +12,8 @@ pub struct Appearance {
pub border_width: f32,
/// The border [`Color`] of the text input.
pub border_color: Color,
/// The icon [`Color`] of the text input.
pub icon_color: Color,
}
/// A set of rules that dictate the style of a text input.

3
style/src/theme.rs
View file

@ -1028,6 +1028,7 @@ impl text_input::StyleSheet for Theme {
border_radius: 2.0,
border_width: 1.0,
border_color: palette.background.strong.color,
icon_color: palette.background.weak.text,
}
}
@ -1043,6 +1044,7 @@ impl text_input::StyleSheet for Theme {
border_radius: 2.0,
border_width: 1.0,
border_color: palette.background.base.text,
icon_color: palette.background.weak.text,
}
}
@ -1058,6 +1060,7 @@ impl text_input::StyleSheet for Theme {
border_radius: 2.0,
border_width: 1.0,
border_color: palette.primary.strong.color,
icon_color: palette.background.weak.text,
}
}