Welcome + Examples screen design touch-ups #3244
Assignees
Labels
ui
concerns graphical user interface
Comments
martenbjork
changed the title
martenbjork
changed the title
8 tasks
5 tasks
jprochazk
added a commit
that referenced
this issue
Feb 29, 2024
### What - Part of #4961 - Closes #3244 Changes: - Updated design of thumbnails on example page to match https://rerun.io/examples - Updated some spacing on welcome screen to better match design from #3244 - Remove loading spinners on example page thumbnails - Remove tabs on welcome screen + remove the examples welcome screen card + the whole mechanism of switching between the welcome screen and example page - Move example page contents below welcome screen - If example page is not visible, indicate their presence with a floating `See examples` button, which may be clicked to scroll the examples page into view I have not done anything to change the loading behavior, or added any extra effects as the example page loads in. There are also a few things in #4961 not done in this PR, such as updating the copy or merging the quick start examples.  ### 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/5329/index.html) * Using examples from latest `main` build: [app.rerun.io](https://app.rerun.io/pr/5329/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/5329/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/5329) - [Docs preview](https://rerun.io/preview/b23e7aa1a53bc82682b6327c95b56fd600c09a99/docs) <!--DOCS-PREVIEW--> - [Examples preview](https://rerun.io/preview/b23e7aa1a53bc82682b6327c95b56fd600c09a99/examples) <!--EXAMPLES-PREVIEW--> - [Recent benchmark results](https://build.rerun.io/graphs/crates.html) - [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prototype
Design prototype: https://rerun-design-prototype.vercel.app/
Values in the prototyp are tokenized, and can be inspected in dev tools:
Issues
Welcome content should be vertically centered on screen
Margins are very incorrect
These margins (red) are way too large. Are wrong values used? Or is there a mismatch between how the tokens show up in CSS vs egui?
No spinners on load images
These spinners when images are loading are not needed. They provide too much noise for something very common and expected. We can drop the spinners and just show a black rectangle until the image come in. (Fading the final image in would be a stretch goal).
Font size mismatch?
These font sizes should use the same values (tokenized in the prototype).
Floating scrollbars
Not critical for now, but I filed an issue here: emilk/egui#3316
Wrong font size on tags
The tags appear to use a larger font size than the one that is used on the prototype.
--font-size-s=11px.Fade-in/out animation (stretch goal, controversial)
Add fade-in/out animations to the welcome and example screens
The text was updated successfully, but these errors were encountered: