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.

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

Adapt UI for smaller screens #1608

Merged
merged 13 commits into from
Mar 20, 2023
Merged

Adapt UI for smaller screens #1608

merged 13 commits into from
Mar 20, 2023

Conversation

emilk
Copy link
Member

@emilk emilk commented Mar 18, 2023

Some low-hanging fruit to make the UI more usable on small screens (e.g. mobile web).

image

Future work:

  • Fix the Rerun menu
  • Fix hover tooltips
  • Always show the blueprint buttons on touch screens (instead of "hover to reveal them")

Checklist

@emilk emilk added 🕸️ web regarding running the viewer in a browser ui concerns graphical user interface 📺 re_viewer affects re_viewer itself labels Mar 18, 2023
@Wumpf Wumpf self-requested a review March 20, 2023 10:11
Copy link
Member

@Wumpf Wumpf left a comment

Choose a reason for hiding this comment

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

before-image would have been nice :)

Was actually leaning to request changes since I'm really not happy with how is_mobile is defined and used here. But all considered still better than before, so if you want to proceed as is I won't be in the way here :)


/// Is this a small-screen device?
pub fn is_mobile(ctx: &egui::Context) -> bool {
ctx.screen_rect().width() < 500.0
Copy link
Member

Choose a reason for hiding this comment

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

For the moment the definition of is_mobile isn't great here and used only as "is this a narrow screen"... which completely ignores using mobile in landscape which can be very wide!
This opens up the question what the semantics of this really are. It is used for "this is a narrow screen", but one would expect is_mobile to be also about different controls, bigger buttons etc.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah I agree, it was badly named. I removed it.

It makes sense to have different limits for different parts of the UI anyway. We need to support a range of devices, not just "mobile" and "desktop".


ui.allocate_rect(time_range_rect, egui::Sense::hover());
}
if ui.max_rect().width() < 600.0 {
Copy link
Member

Choose a reason for hiding this comment

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

consider using is_mobile (or is_portrait_mode?) as established in re_ui. It's nice to have a hard size threshold in a single place, this is already a different width here and further below

Copy link
Member Author

Choose a reason for hiding this comment

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

We need to support a range of devices, not just "mobile" and "desktop", so it makes sense to have different limits for different parts of the UI. This limit (600px) is very much specific for the time panel.

ctx.rec_cfg
.time_ctrl
.time_control_ui(ctx.re_ui, ctx.log_db.times_per_timeline(), ui);
if ui.max_rect().width() < 600.0 {
Copy link
Member

Choose a reason for hiding this comment

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

nit: most of this stuff could still be in time_control_ui.rs. This mod.rs is a bit crowded.

Copy link
Member Author

Choose a reason for hiding this comment

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

Not easily. The "draggable timeline" element of it is not at all part of time_control_ui.rs at the moment.

@emilk emilk merged commit 4a29e8c into main Mar 20, 2023
@emilk emilk deleted the emilk/mobile-ui branch March 20, 2023 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📺 re_viewer affects re_viewer itself ui concerns graphical user interface 🕸️ web regarding running the viewer in a browser
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants