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.

Sign up for GitHub

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

Fix ListItem indentation so icons are properly aligned #5340

Merged
merged 4 commits into from
Feb 29, 2024
Merged

Fix ListItem indentation so icons are properly aligned #5340

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a0e020
Fix `ListItem` indentation so icons are properly aligned
abey79 Feb 28, 2024
12a8950
Merge branch 'main' into antoine/fix-list-item-alignment
abey79 Feb 28, 2024
7fca093
Clarified semantics, docstrings, and comments
abey79 Feb 29, 2024
d8cb174
Merge branch 'main' into antoine/fix-list-item-alignment
abey79 Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions crates/re_ui/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -848,7 +848,8 @@ impl ReUi {
///
/// See [`ReUi::paint_collapsing_triangle`] for actually drawing the triangle.
pub fn collapsing_triangle_size() -> egui::Vec2 {
egui::Vec2::splat(8.0)
// Required for the hierarchical lists to appear less busy by virtue of a better alignment
Self::small_icon_size()
}

/// Paint a collapsing triangle with rounded corners.
Expand All @@ -862,7 +863,7 @@ impl ReUi {
) {
let visuals = ui.style().interact(response);

let extent = rect.size().min_elem();
static TRIANGLE_SIZE: f32 = 8.0;
Copy link
Member

Choose a reason for hiding this comment

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

Why is this one hardcoded? Why is it not collapsing_triangle_size().min_size() or something?

Copy link
Member Author

@abey79 abey79 Feb 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This whole implementation of the triangle is kind of weird to begin with, but from the UX perspective, that triangle has a given, fixed width (it would be a 14x14px icon, if we didn't have to rotate it), regardless of where we decide to draw it. So hardcoding its size next to the coordinates is actually more correct than what we did before.

It would actually make even more sense to "bake" that scale into the coordinate table that's just after but I couldn't be bothered updated those. In the future, we may even move the whole thing to some data file (SVG—but we don't want the deps/overhead, or even as glyphs in a custom font).

As for collapsing_trangle_size(), this function is about the "layout space" that should be allocated for that triangle—not what size it should have.

Adding some comments to clarify all that ☝🏻


// Normalized in [0, 1]^2 space.
// Note on how these coords have been computed: https://github.com/rerun-io/rerun/pull/2920
Expand All @@ -885,7 +886,7 @@ impl ReUi {
use std::f32::consts::TAU;
let rotation = Rot2::from_angle(egui::remap(openness, 0.0..=1.0, 0.0..=TAU / 4.0));
for p in &mut points {
*p = rect.center() + rotation * (*p - pos2(0.5, 0.5)) * extent;
*p = rect.center() + rotation * (*p - pos2(0.5, 0.5)) * TRIANGLE_SIZE;
}

ui.painter().add(Shape::convex_polygon(
Expand Down
8 changes: 6 additions & 2 deletions crates/re_ui/src/list_item.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,8 +322,12 @@ impl<'a> ListItem<'a> {
state.toggle(ui);
}

let body_response =
state.show_body_indented(&response.response, ui, |ui| add_body(re_ui, ui));
let body_response = ui
.scope(|ui| {
ui.spacing_mut().indent = ReUi::small_icon_size().x + ReUi::text_to_icon_padding();
state.show_body_indented(&response.response, ui, |ui| add_body(re_ui, ui))
})
.inner;

ShowCollapsingResponse {
item_response: response.response,
Expand Down
Loading