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

[GUI] Add a visual cue when columns are cut off #3818

Open
ricab opened this issue Dec 6, 2024 · 5 comments
Open

[GUI] Add a visual cue when columns are cut off #3818

ricab opened this issue Dec 6, 2024 · 5 comments
Labels
enhancement low low importance

Comments

@ricab
Copy link
Collaborator

ricab commented Dec 6, 2024

What are you trying to do?
When the GUI is sized such that not all columns in the instance list fit, there should be some visual indication for that.

Missing columns:
missing-columns

All columns:
all-columns

What's your proposed solution?
Perhaps ensure that the titles row ends with an ellipsis in such cases.

@ricab ricab added enhancement needs triage Issue needs to be triaged medium medium importance low low importance and removed needs triage Issue needs to be triaged labels Dec 6, 2024
@ricab
Copy link
Collaborator Author

ricab commented Dec 6, 2024

@vikorama no rush, but your opinion would be welcome on this one.

@vikorama
Copy link

vikorama commented Dec 6, 2024

Interesting case. So, the problem is that users might not know that more columns are outside of the viewport.

On Mac I always use touchpad, so for me it was natural to just swipe and see the whole table. But for new users who use a mouse, it might not be easily discoverable.

  • First idea is to set minimum width to 1240px, but we probably don't want that, because it'd also affect the terminals which users may wanna make smaller. I'd maybe still use 1240x700 as default when opening the app for the very first time.

  • Second idea is what you mentioned with an ellipsis in the end. That would not let users select and copy IP addresses and VM names (unless we implement double-click to copy), and users can't compare cells to each other. Even tho this looks neat, might not be ideal for tabular UIs:
    Frame 3178

  • Third: we can wrap text. Looks less neat. User can copy and compare text.
    Frame 3184

  • Forth: we can use 2&3 as a setting.

  • Fifth (and my favourite as it should be least effort): we may keep everything as is and set the scroll bar to shown on hover. Users already are able to adjust the size of the columns and which columns are displayed. With visible scrollbars it should be clear that not all content fits:

image
  • Sixth: we could also drop outer strokes on this table (that's how we do in web apps) and remove the right and bottom margins, so that it's clear something is out of the border. Might not look good in dark themes.
    Frame 3185

@ricab
Copy link
Collaborator Author

ricab commented Dec 6, 2024

I think the fifth solution would work perfectly, thanks!

@ricab
Copy link
Collaborator Author

ricab commented Dec 6, 2024

Actually, this is already the case, but the scrollbar only shows when the mouse is over it. When that is not the case, there is still no indication.

@ricab ricab removed the medium medium importance label Dec 6, 2024
@vikorama
Copy link

vikorama commented Dec 6, 2024

I initially wrote to 'make it always shown', then edited to tune it down a notch.

I'm fine with always showing a scrollbar when the content doesn't fit horizontally or vertically in the All instances table. (I wouldn't do this on the Catalogue and Details pages tho. In Catalogue it's clear, and Details page I'd also assume to be discoverable).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement low low importance
Projects
None yet
Development

No branches or pull requests

2 participants