From 880edadb7557a96f1cfbe281aae2435f1f199985 Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Fri, 17 Jan 2025 12:57:20 -0500 Subject: [PATCH 1/6] Improvements to page selector --- xilem/examples/emoji_picker.rs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index a58e23499..85156cc06 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -91,20 +91,22 @@ fn paginate( count_per_page: usize, max_count: usize, ) -> impl WidgetView { - let percentage = (current_start * 100) / max_count; + let current_end = (current_start + count_per_page).min(max_count); + let percentage_start = (current_start * 100) / max_count; + let percentage_end = (current_end * 100) / max_count; flex(( // TODO: Expose that this is a previous page button to accessibility - button("<-", move |data| { + (current_start != 0).then(|| button( "<-", move |data| { *data = current_start.saturating_sub(count_per_page); - }), - label(format!("{percentage}%")), - button("->", move |data| { + })), + label(format!("{percentage_start}% - {percentage_end}%")), + (current_end < max_count).then(move || button("->", move |data| { let new_idx = current_start + count_per_page; if new_idx < max_count { *data = new_idx; } - }), + })), )) .direction(Axis::Horizontal) } From 64245a4b4784177684b4c36179c4e2b0b5cf7718 Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Fri, 17 Jan 2025 12:59:44 -0500 Subject: [PATCH 2/6] Remove unnecessary move --- xilem/examples/emoji_picker.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index 85156cc06..5e646746a 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -101,7 +101,7 @@ fn paginate( *data = current_start.saturating_sub(count_per_page); })), label(format!("{percentage_start}% - {percentage_end}%")), - (current_end < max_count).then(move || button("->", move |data| { + (current_end < max_count).then(|| button("->", move |data| { let new_idx = current_start + count_per_page; if new_idx < max_count { *data = new_idx; From 53af04e527c981c9029afa2a6b3ebd37984f20e2 Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Sun, 19 Jan 2025 17:36:18 -0500 Subject: [PATCH 3/6] Fix formatting --- xilem/examples/emoji_picker.rs | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index 5e646746a..7e6046580 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -97,16 +97,20 @@ fn paginate( flex(( // TODO: Expose that this is a previous page button to accessibility - (current_start != 0).then(|| button( "<-", move |data| { - *data = current_start.saturating_sub(count_per_page); - })), + (current_start != 0).then(|| { + button("<-", move |data| { + *data = current_start.saturating_sub(count_per_page); + }) + }), label(format!("{percentage_start}% - {percentage_end}%")), - (current_end < max_count).then(|| button("->", move |data| { - let new_idx = current_start + count_per_page; - if new_idx < max_count { - *data = new_idx; - } - })), + (current_end < max_count).then(|| { + button("->", move |data| { + let new_idx = current_start + count_per_page; + if new_idx < max_count { + *data = new_idx; + } + }) + }), )) .direction(Axis::Horizontal) } From 2ed57429962f9fbc6a963dfa460e07c4d4f6fde4 Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Mon, 20 Jan 2025 09:12:59 -0500 Subject: [PATCH 4/6] Use emoji for left right navigation Also increases the font size --- xilem/examples/emoji_picker.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index 7e6046580..25e41506d 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -98,13 +98,13 @@ fn paginate( flex(( // TODO: Expose that this is a previous page button to accessibility (current_start != 0).then(|| { - button("<-", move |data| { + button(label("⬅️").text_size(24.0), move |data| { *data = current_start.saturating_sub(count_per_page); }) }), label(format!("{percentage_start}% - {percentage_end}%")), (current_end < max_count).then(|| { - button("->", move |data| { + button(label("➡️").text_size(24.0), move |data| { let new_idx = current_start + count_per_page; if new_idx < max_count { *data = new_idx; From 8377dda338751f0c04c03169117e55ac04a24e92 Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Mon, 20 Jan 2025 10:28:51 -0500 Subject: [PATCH 5/6] Sizing and spacing improvements --- xilem/examples/emoji_picker.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index 25e41506d..9c23b1353 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -57,7 +57,7 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView { }; let view = flex(( // TODO: Expose that this button corresponds to the label below for accessibility? - sized_box(button(emoji.display, move |data: &mut EmojiPagination| { + sized_box(button(label(emoji.display).text_size(200.0 / data.size as f32), move |data: &mut EmojiPagination| { data.last_selected = Some(idx); })) .expand_width(), @@ -83,7 +83,7 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView { grid_items, data.size.try_into().unwrap(), data.size.try_into().unwrap(), - ) + ).spacing(10.0) } fn paginate( From e25de83e8fb5cbce15b888a0a2bdd47ddc85e23a Mon Sep 17 00:00:00 2001 From: jaredoconnell Date: Mon, 20 Jan 2025 10:30:38 -0500 Subject: [PATCH 6/6] Fix formatting --- xilem/examples/emoji_picker.rs | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs index 9c23b1353..c85e08e6f 100644 --- a/xilem/examples/emoji_picker.rs +++ b/xilem/examples/emoji_picker.rs @@ -57,9 +57,12 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView { }; let view = flex(( // TODO: Expose that this button corresponds to the label below for accessibility? - sized_box(button(label(emoji.display).text_size(200.0 / data.size as f32), move |data: &mut EmojiPagination| { - data.last_selected = Some(idx); - })) + sized_box(button( + label(emoji.display).text_size(200.0 / data.size as f32), + move |data: &mut EmojiPagination| { + data.last_selected = Some(idx); + }, + )) .expand_width(), sized_box( prose(emoji.name) @@ -83,7 +86,8 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView { grid_items, data.size.try_into().unwrap(), data.size.try_into().unwrap(), - ).spacing(10.0) + ) + .spacing(10.0) } fn paginate(