Fix ListItem indentation so icons are properly aligned
#5340
Conversation
| @@ -862,7 +863,7 @@ impl ReUi { | |||
| ) { | |||
| let visuals = ui.style().interact(response); | |||
|
|
|||
| let extent = rect.size().min_elem(); | |||
| static TRIANGLE_SIZE: f32 = 8.0; | |||
There was a problem hiding this comment.
Why is this one hardcoded? Why is it not collapsing_triangle_size().min_size() or something?
There was a problem hiding this comment.
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 ☝🏻
### What - Fixes #5457 (introduced in #5340) Also sneaks a minor UI tweak in the plot marker selection list. Before/after: <img width="161" alt="image" src="https://github.com/rerun-io/rerun/assets/49431240/02c82f20-5cfd-46d9-9493-f5ebaf4f13b0"> <img width="170" alt="image" src="https://github.com/rerun-io/rerun/assets/49431240/92a4f017-b15e-40ca-982f-8778f34ef382"> <br/> <br/> cc @martenbjork ### Checklist * [x] I have read and agree to [Contributor Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and the [Code of Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md) * [x] I've included a screenshot or gif (if applicable) * [x] I have tested the web demo (if applicable): * Using newly built examples: [app.rerun.io](https://app.rerun.io/pr/5590/index.html) * Using examples from latest `main` build: [app.rerun.io](https://app.rerun.io/pr/5590/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json) * Using full set of examples from `nightly` build: [app.rerun.io](https://app.rerun.io/pr/5590/index.html?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json) * [x] The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG * [x] If applicable, add a new check to the [release checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)! - [PR Build Summary](https://build.rerun.io/pr/5590) - [Docs preview](https://rerun.io/preview/380d08c73607cca35c2640ca2206e0d7c8676ed3/docs) <!--DOCS-PREVIEW--> - [Examples preview](https://rerun.io/preview/380d08c73607cca35c2640ca2206e0d7c8676ed3/examples) <!--EXAMPLES-PREVIEW--> - [Recent benchmark results](https://build.rerun.io/graphs/crates.html) - [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
What
Make everything in list items all aligned and tidy:
Before/after:
cc @martenbjork
Checklist
mainbuild: app.rerun.ionightlybuild: app.rerun.io