Skip to content

Commit

Permalink
Fixed Number input and card
Browse files Browse the repository at this point in the history
  • Loading branch information
genusistimelord committed Nov 7, 2023
1 parent 772ba46 commit 6c0365e
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 83 deletions.
8 changes: 4 additions & 4 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ segmented_button = []

default = [
"badge",
#"card",
#"number_input",
"card",
"number_input",
#"date_picker",
"color_picker",
#"floating_element",
Expand Down Expand Up @@ -82,7 +82,7 @@ opt-level = 2
[workspace]
members = [
"examples/badge",
#"examples/card",
"examples/card",
"examples/color_picker",
#"examples/cupertino/cupertino_alert",
#"examples/cupertino/cupertino_button",
Expand All @@ -99,7 +99,7 @@ members = [
#"examples/tabs",
#"examples/time_picker",
#"examples/wrap",
#"examples/number_input",
"examples/number_input",
#"examples/selection_list",
#"examples/split",
#"examples/split_scroller",
Expand Down
2 changes: 1 addition & 1 deletion examples/number_input/src/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ pub enum Message {

fn main() -> iced::Result {
NumberInputDemo::run(Settings {
default_text_size: 12.0,
default_text_size: iced::Pixels(12.0),
window: window::Settings {
size: (250, 200),
..Default::default()
Expand Down
67 changes: 42 additions & 25 deletions src/native/card.rs
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ use iced_widget::{
mouse::{self, Cursor},
renderer, touch,
widget::{Operation, Tree},
Alignment, BorderRadius, Clipboard, Color, Element, Event, Layout, Length, Padding, Point,
Rectangle, Shell, Size, Widget,
Alignment, BorderRadius, Clipboard, Color, Element, Event, Layout, Length, Padding, Pixels,
Point, Rectangle, Shell, Size, Widget,
},
text::LineHeight,
};
Expand Down Expand Up @@ -241,7 +241,7 @@ where
self.height
}

fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
let limits = limits.max_width(self.max_width).max_height(self.max_height);

let head_node = head_node(
Expand All @@ -252,17 +252,25 @@ where
self.width,
self.on_close.is_some(),
self.close_size,
tree,
);

let mut body_node = body_node(renderer, &limits, &self.body, self.padding_body, self.width);
let mut body_node = body_node(
renderer,
&limits,
&self.body,
self.padding_body,
self.width,
tree,
);

body_node.move_to(Point::new(
body_node.bounds().x,
body_node.bounds().y + head_node.bounds().height,
));

let mut foot_node = self.foot.as_ref().map_or_else(Node::default, |foot| {
foot_node(renderer, &limits, foot, self.padding_foot, self.width)
foot_node(renderer, &limits, foot, self.padding_foot, self.width, tree)
});

foot_node.move_to(Point::new(
Expand Down Expand Up @@ -595,6 +603,7 @@ fn head_node<Message, Renderer>(
width: Length,
on_close: bool,
close_size: Option<f32>,
tree: &mut Tree,
) -> Node
where
Renderer: core::Renderer + core::text::Renderer<Font = iced_widget::core::Font>,
Expand All @@ -606,15 +615,17 @@ where
.height(head.as_widget().height())
.pad(pad);

let close_size = close_size.unwrap_or_else(|| renderer.default_size());
let close_size = close_size.unwrap_or_else(|| renderer.default_size().0);
let mut close = if on_close {
limits = limits.shrink(Size::new(close_size, 0.0));
Some(Node::new(Size::new(close_size + 1.0, close_size + 1.0)))
} else {
None
};

let mut head = head.as_widget().layout(renderer, &limits);
let mut head = head
.as_widget()
.layout(&mut tree.children[0], renderer, &limits);
let mut size = limits.resolve(head.size());

head.move_to(Point::new(padding, padding));
Expand Down Expand Up @@ -643,6 +654,7 @@ fn body_node<Message, Renderer>(
body: &Element<'_, Message, Renderer>,
padding: f32,
width: Length,
tree: &mut Tree,
) -> Node
where
Renderer: core::Renderer,
Expand All @@ -655,7 +667,9 @@ where
.height(body.as_widget().height())
.pad(pad);

let mut body = body.as_widget().layout(renderer, &limits);
let mut body = body
.as_widget()
.layout(&mut tree.children[1], renderer, &limits);
let size = limits.resolve(body.size());

body.move_to(Point::new(padding, padding));
Expand All @@ -671,6 +685,7 @@ fn foot_node<Message, Renderer>(
foot: &Element<'_, Message, Renderer>,
padding: f32,
width: Length,
tree: &mut Tree,
) -> Node
where
Renderer: core::Renderer,
Expand All @@ -683,7 +698,9 @@ where
.height(foot.as_widget().height())
.pad(pad);

let mut foot = foot.as_widget().layout(renderer, &limits);
let mut foot = foot
.as_widget()
.layout(&mut tree.children[2], renderer, &limits);
let size = limits.resolve(foot.size());

foot.move_to(Point::new(padding, padding));
Expand Down Expand Up @@ -758,23 +775,23 @@ fn draw_head<Message, Renderer>(
let close_bounds = close_layout.bounds();
let is_mouse_over_close = close_bounds.contains(cursor.position().unwrap_or_default());

renderer.fill_text(core::text::Text {
content: &Icon::X.to_string(),
bounds: Rectangle {
x: close_bounds.center_x(),
y: close_bounds.center_y(),
height: close_bounds.height,
..close_bounds
renderer.fill_text(
core::text::Text {
content: &Icon::X.to_string(),
bounds: Size::new(close_bounds.width, close_bounds.height),
size: Pixels(
close_size.unwrap_or_else(|| renderer.default_size().0)
+ if is_mouse_over_close { 1.0 } else { 0.0 },
),
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
},
size: close_size.unwrap_or_else(|| renderer.default_size())
+ if is_mouse_over_close { 1.0 } else { 0.0 },
color: style_sheet.close_color,
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
});
Point::new(close_bounds.center_x(), close_bounds.center_y()),
style_sheet.close_color,
);
}
}

Expand Down
128 changes: 75 additions & 53 deletions src/native/number_input.rs
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ use iced_widget::{
tree::{State, Tag},
Operation, Tree,
},
Alignment, Background, Clipboard, Color, Element, Event, Layout, Length, Padding,
Rectangle, Shell, Size, Widget,
Alignment, Background, Clipboard, Color, Element, Event, Layout, Length, Padding, Pixels,
Point, Rectangle, Shell, Size, Widget,
},
text,
text::LineHeight,
Expand Down Expand Up @@ -295,37 +295,55 @@ where
Length::Shrink
}

fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
fn layout(&self, tree: &mut Tree, renderer: &Renderer, limits: &Limits) -> Node {
let padding = Padding::from(self.padding);
let limits = limits
.width(self.width())
.height(Length::Shrink)
.pad(padding);
let content = self.content.layout(renderer, &limits);
let content = self
.content
.layout(&mut tree.children[0], renderer, &limits, None);
let limits2 = Limits::new(Size::new(0.0, 0.0), content.size());
let txt_size = self.size.unwrap_or_else(|| renderer.default_size());
let txt_size = self.size.unwrap_or_else(|| renderer.default_size().0);

let icon_size = txt_size * 2.5 / 4.0;
let btn_mod = |c| {
Container::<(), Renderer>::new(Text::new(format!(" {c} ")).size(icon_size))
Container::<Message, Renderer>::new(Text::new(format!(" {c} ")).size(icon_size))
.center_y()
.center_x()
};
let mut modifier = if self.padding < DEFAULT_PADDING {
Row::<(), Renderer>::new()
.spacing(1)
.width(Length::Shrink)
.push(btn_mod('+'))
.push(btn_mod('-'))
.layout(renderer, &limits2.loose())

let mut element = if self.padding < DEFAULT_PADDING {
Element::new(
Row::<Message, Renderer>::new()
.spacing(1)
.width(Length::Shrink)
.push(btn_mod('+'))
.push(btn_mod('-')),
)
} else {
Element::new(
Column::<Message, Renderer>::new()
.spacing(1)
.width(Length::Shrink)
.push(btn_mod('▲'))
.push(btn_mod('▼')),
)
};

let mut input_tree = if let Some(child_tree) = tree.children.get_mut(1) {
child_tree.diff(element.as_widget());
child_tree
} else {
Column::<(), Renderer>::new()
.spacing(1)
.width(Length::Shrink)
.push(btn_mod('▲'))
.push(btn_mod('▼'))
.layout(renderer, &limits2.loose())
let child_tree = Tree::new(element.as_widget());
tree.children.insert(1, child_tree);
&mut tree.children[1]
};

let mut modifier = element
.as_widget()
.layout(&mut input_tree, renderer, &limits2.loose());
let intrinsic = Size::new(
content.size().width - 1.0,
content.size().height.max(modifier.size().height),
Expand Down Expand Up @@ -424,13 +442,16 @@ where
} else {
match event {
Event::Keyboard(keyboard::Event::CharacterReceived(c))
if child.state.downcast_mut::<text_input::State>().is_focused()
if child
.state
.downcast_mut::<text_input::State<Renderer::Paragraph>>()
.is_focused()
&& c.is_numeric() =>
{
let mut new_val = self.value.to_string();
match child
.state
.downcast_mut::<text_input::State>()
.downcast_mut::<text_input::State<Renderer::Paragraph>>()
.cursor()
.state(&Value::new(&new_val))
{
Expand Down Expand Up @@ -476,7 +497,10 @@ where
}
}
Event::Keyboard(keyboard::Event::KeyPressed { key_code, .. })
if child.state.downcast_mut::<text_input::State>().is_focused() =>
if child
.state
.downcast_mut::<text_input::State<Renderer::Paragraph>>()
.is_focused() =>
{
match key_code {
keyboard::KeyCode::Up => {
Expand All @@ -494,7 +518,7 @@ where
let mut new_val = self.value.to_string();
match child
.state
.downcast_mut::<text_input::State>()
.downcast_mut::<text_input::State<Renderer::Paragraph>>()
.cursor()
.state(&Value::new(&new_val))
{
Expand Down Expand Up @@ -682,9 +706,9 @@ where
theme.active(&self.style)
};

let txt_size = self.size.unwrap_or_else(|| renderer.default_size());
let txt_size = self.size.unwrap_or_else(|| renderer.default_size().0);

let icon_size = txt_size * 2.5 / 4.0;
let icon_size = Pixels(txt_size * 2.5 / 4.0);

// decrease button section
renderer.fill_quad(
Expand All @@ -701,21 +725,20 @@ where

let mut buffer = [0; 4];

renderer.fill_text(core::text::Text {
content: char::from(Icon::CaretDownFill).encode_utf8(&mut buffer),
bounds: Rectangle {
x: dec_bounds.center_x(),
y: dec_bounds.center_y(),
..dec_bounds
renderer.fill_text(
core::text::Text {
content: char::from(Icon::CaretDownFill).encode_utf8(&mut buffer),
bounds: Size::new(dec_bounds.width, dec_bounds.height),
size: icon_size,
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
},
size: icon_size,
color: decrease_btn_style.icon_color,
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
});
Point::new(dec_bounds.center_x(), dec_bounds.center_y()),
decrease_btn_style.icon_color,
);

// increase button section
renderer.fill_quad(
Expand All @@ -730,21 +753,20 @@ where
.unwrap_or(Background::Color(Color::TRANSPARENT)),
);

renderer.fill_text(core::text::Text {
content: char::from(Icon::CaretUpFill).encode_utf8(&mut buffer),
bounds: Rectangle {
x: inc_bounds.center_x(),
y: inc_bounds.center_y(),
..inc_bounds
renderer.fill_text(
core::text::Text {
content: char::from(Icon::CaretUpFill).encode_utf8(&mut buffer),
bounds: Size::new(inc_bounds.width, inc_bounds.height),
size: icon_size,
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
},
size: icon_size,
color: increase_btn_style.icon_color,
font: ICON_FONT,
horizontal_alignment: Horizontal::Center,
vertical_alignment: Vertical::Center,
line_height: LineHeight::Relative(1.3),
shaping: iced_widget::text::Shaping::Advanced,
});
Point::new(inc_bounds.center_x(), inc_bounds.center_y()),
increase_btn_style.icon_color,
);
}
}

Expand Down

0 comments on commit 6c0365e

Please sign in to comment.