Bug #19300
closed
UX improvement in Multi Panel View component: panels state restoration on un-maximizing.
Description
UX problem¶
The MultiPanelView component suite allows configuring some panels with a "maximize" button. This button closes every other open panel allowing the remaining one to take the entire vertical space and avoiding having an outer vertical scrollbar.
There is a usability issue when the user maximizes a panel and wants to un-maximize it so it can look at another panel. In this case, the user needs to open the closed panels from the upper button bar.
Proposed solution¶
Add a 'restore'/'unmaximize' button that sets the panel visibility states to whatever it was before the user clicked the maximize button.
Related problem¶
Offering a 'close' (X) button on maximized panels may not be what we want because there's no use in a panel-less UI. We might be able to save screen real estate by not showing it when the panel is maximized and just offering the un-maximize button.
Related issues
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-08-17 sprint to 2022-08-31 sprint
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-08-31 sprint to 2022-09-14 sprint
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-09-14 sprint to 2022-09-28 sprint
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-09-28 sprint to 2022-10-12 sprint
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-10-12 sprint to 2022-10-26 sprint
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-10-26 sprint to 2022-11-09 sprint
Updated by Peter Amstutz over 1 year ago
- Has duplicate Feature #19531: Add "un-maximize" button that gets the previous panels' visibility state back added
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-11-09 sprint to 2022-11-23 sprint
Updated by Lucas Di Pentima over 1 year ago
- Assigned To set to Lucas Di Pentima
Updated by Lucas Di Pentima over 1 year ago
- Status changed from New to In Progress
Updates at arvados-workbench2|2e7cab4e - branch 19300-unmaximize-panels
Test run: developer-tests-workbench2: #980
- Adds un-maximize functionality to the multi panel view component suite.
- Implements un-maximize buttons on maximizable process panels.
Updated by Lucas Di Pentima over 1 year ago
Bonus commit arvados-workbench2|a2453dde
- Hides the close button when panel is maximized.
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-11-23 sprint to 2022-11-09 sprint
Updated by Peter Amstutz over 1 year ago
Lucas Di Pentima wrote in #note-11:
Updates at arvados-workbench2|2e7cab4e - branch
19300-unmaximize-panels
Test run: developer-tests-workbench2: #980
- Adds un-maximize functionality to the multi panel view component suite.
- Implements un-maximize buttons on maximizable process panels.
Thank you for turning this around quickly.
Two thoughts.
- I understand wanting to hide the close button, but having the restore button take the place of the close button is a little weird, I had envisioned the restore button taking the place of the maximize button. How would it look if the close button was just disabled, or hidden such that it doesn't cause the other buttons to move?
- When it restores, at least on Firefox you end up this behavior where it flickers up to the top and then scrolls back to the selected panel. Is it possible to eliminate the scrolling and just jump straight to panel? (I'm also curious how it would feel if we eliminated the scrolling entirely and pushing one of the top tabs just takes you to the window immediately).
Updated by Lucas Di Pentima over 1 year ago
Updates at arvados-workbench2|35cbda6f
Test run: developer-tests-workbench2: #981
Peter Amstutz wrote in #note-14:
I understand wanting to hide the close button, but having the restore button take the place of the close button is a little weird, I had envisioned the restore button taking the place of the maximize button. How would it look if the close button was just disabled, or hidden such that it doesn't cause the other buttons to move?
Thanks for the reminder, I failed in recording this that we already discussed some weeks ago. Yes, I've now set the maximize buttons to disable when the panel is maximized, it's a far better UX.
When it restores, at least on Firefox you end up this behavior where it flickers up to the top and then scrolls back to the selected panel. Is it possible to eliminate the scrolling and just jump straight to panel? (I'm also curious how it would feel if we eliminated the scrolling entirely and pushing one of the top tabs just takes you to the window immediately).
I've completely eliminated the 'smooth scrolling' behavior so that unmaximizing a panel would just jump to it. I've tested in Chrome & Firefox on MacOS and it doesn't flicker. Please let me know how it works on Linux.
I found that going to the top of the panel list when unmaximizing is confusing if the unmaximized panel suddenly dissapears from the viewport, if you want to check by yourself, you can do so by commenting out line 166 at src/components/multi-panel-view/multi-panel-view.tsx
Updated by Lucas Di Pentima over 1 year ago
- Status changed from In Progress to Resolved
Applied in changeset arvados:arvados-workbench2|06e3b409ae49e539a1a1b864316f65d7daa07862.