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

Jump to bottom

Use design system arrow icon across the app #2738

Closed
1 of 4 tasks
Tracked by #2670
, #2780
...
martenbjork opened this issue Jul 18, 2023 · 1 comment · Fixed by #3153
Closed
1 of 4 tasks
Tracked by #2670
, #2780
...

Use design system arrow icon across the app #2738

martenbjork opened this issue Jul 18, 2023 · 1 comment · Fixed by #3153
Labels
🎄 tracking issue issue that tracks a bunch of subissues ui concerns graphical user interface

Comments

@martenbjork
Copy link
Contributor

martenbjork commented Jul 18, 2023 •
edited by abey79
Loading

The design system contains an icon set with carefully designed arrows. Their size, ratio and pointiness are designed to be visually appealing.

image

These elements currently use a different, much pointier arrow:

image image

TODO

Use the arrow icons as defined in Figma for all elements
@martenbjork martenbjork mentioned this issue Jul 18, 2023
Open
25 tasks
@Wumpf Wumpf added the ui concerns graphical user interface label Jul 18, 2023
@jleibs jleibs mentioned this issue Jul 21, 2023
Closed
16 tasks
@abey79 abey79 mentioned this issue Jul 28, 2023
Closed
@abey79
Copy link
Member

abey79 commented Aug 4, 2023

@martenbjork I'm experimenting with this. Because of the rotation animation, it's very advantageous to keep this thing a vector instead of a (raster) icon. I derived a linearised version of the path from a Figma-exported SVG:

image

This is it in action, at 250% UI zoom (top arrow only, the bottom two are the original ones):

image

Can't say it's not visible, but it's certainly discreet with 100% UI zoom:

image

I'm inclined to keep that rounded version because it looks better at scale for a minimum costs (that's very few points), mainly because it makes me feel good :) Any thoughts? How about the size of that triangle w.r.t. the text?

@abey79 abey79 mentioned this issue Aug 7, 2023
Merged
3 tasks
@abey79 abey79 added the 🎄 tracking issue issue that tracks a bunch of subissues label Aug 11, 2023
@abey79 abey79 mentioned this issue Aug 11, 2023
Open
abey79 added a commit that referenced this issue Aug 11, 2023
@abey79
New triangle collapse arrow for large collapsible header (#2920)
4b8b4fb 
### What

This PR implements the proper Figma-based collapsing arrow (with
"linearised" rounded corners) and uses it for the large collapsible
headers in the selection panel. This PR also fixes the vertical optical
alignment of the text within these headers.

Partially addresses #2738 

Zoom 150%:
<img width="438" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/b51a41a3-7f77-4e56-8639-c3428a124829">


### 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 [demo.rerun.io](https://demo.rerun.io/pr/2920) (if
applicable)

- [PR Build Summary](https://build.rerun.io/pr/2920)
- [Docs
preview](https://rerun.io/preview/pr%3Aantoine%2Fcollapsing-triangle/docs)
- [Examples
preview](https://rerun.io/preview/pr%3Aantoine%2Fcollapsing-triangle/examples)
abey79 added a commit that referenced this issue Aug 11, 2023
@abey79
Added support for tree to ListItem
50d95c4 
Pre-requisite for hierarchical display of recordings and for backport to blueprint tree.

Uses the new collapsing triangle (partially addresses #2738).

Note: not deployed in viewer yet, can be tested with re_ui_example
@abey79 abey79 mentioned this issue Aug 11, 2023
Merged
3 tasks
abey79 added a commit that referenced this issue Aug 13, 2023
@abey79
Add support for tree to ListItem (#2968)
6d23d23 
### What

Pre-requisite for hierarchical display of recordings and for backport to
blueprint tree.

Uses the new collapsing triangle (partially addresses #2738).

Note: not deployed in viewer yet, can be tested with re_ui_example

<img width="203" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/e4217f8d-55cc-437c-b207-a585e113f48a">

### 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 [demo.rerun.io](https://demo.rerun.io/pr/2968) (if
applicable)

- [PR Build Summary](https://build.rerun.io/pr/2968)
- [Docs
preview](https://rerun.io/preview/pr%3Aantoine%2Fhierarchical-listitem2/docs)
- [Examples
preview](https://rerun.io/preview/pr%3Aantoine%2Fhierarchical-listitem2/examples)
@abey79 abey79 mentioned this issue Aug 30, 2023
Merged
3 tasks
abey79 added a commit that referenced this issue Sep 1, 2023
@abey79
Use ListItem in Stream Tree UI (#3153)
6451f78 
### What

Use `ListItem` in the Stream Tree UI.

- Consistent UI in the stream tree (vs. stuff in the left panel)
- Revamped look of the selection/hovered state in the timeline itself.
- Cleaned up the code for the "Entity/instance hover cards". Now
hovering instances in the blueprint tree _also_ displays storage use
from #2997
- Improved `ListItem`
- New attribute to control the width allocation mode (currently: max
width or fit to label)
- Improved click/hover sensing to cover the full span area (= hover
highlight), not just the actually allocated space (icon + label). That
improves the behaviour of the left panel trees too.

Fixes #3045
Fixes #2738 (if we accept that dropdown button are "close enough" and
will be improved with #2734 anyways)
Fixes #2860

<img width="1817" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/5492ae03-0da0-4417-b7a1-2bedd4da4e8c">


### 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 [demo.rerun.io](https://demo.rerun.io/pr/3153) (if
applicable)

- [PR Build Summary](https://build.rerun.io/pr/3153)
- [Docs
preview](https://rerun.io/preview/2c54fda5373adf90d1407dc161f65f2242dcd4a3/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/2c54fda5373adf90d1407dc161f65f2242dcd4a3/examples)
<!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW--><!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://ref.rerun.io/dev/bench/)
- [Wasm size tracking](https://ref.rerun.io/dev/sizes/)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🎄 tracking issue issue that tracks a bunch of subissues ui concerns graphical user interface
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use ListItem in Stream Tree UI rerun-io/rerun
3 participants
@martenbjork @Wumpf @abey79