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

Status bar needs a better collapse strategy #6655

Open
charlesh88 opened this issue May 10, 2023 · 2 comments · May be fixed by #7850
Open

Status bar needs a better collapse strategy #6655

charlesh88 opened this issue May 10, 2023 · 2 comments · May be fixed by #7850
Assignees

Comments

@charlesh88
Copy link
Contributor

Is your feature request related to a problem? Please describe.
The status bar wraps in a manner that takes up an undesirable amount of vertical space.
image

Describe the solution you'd like
A better design that doesn't increase vertical space usage.

Describe alternatives you've considered
There are no other alternatives.

@depperm
Copy link
Contributor

depperm commented Aug 17, 2023

image
Would hiding with no indication be best?

&__indicators {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: hidden;

image
Or hide but have a scroll so everything can be accessed?

&__indicators {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-height: 34px;
    overflow-y: scroll;

@charlesh88 charlesh88 linked a pull request Sep 19, 2024 that will close this issue
14 tasks
@charlesh88
Copy link
Contributor Author

Testing Notes

The Status area 'Indicators' are now allows explicit toggling of a single-line or multi-line display strategy independent of the pre-existing toggle for icon-only or icon-and-label display modes. Single-line mode will clip and hide Indicators when there is not enough room due to browser window width; in this state, the multi/single-line toggle button will highlight to indicate that Indicators are being hidden.

Before loading Open MCT:

  1. Stretch your browser window as wide as you can.
  2. In dev tools, find the localstorage value for openmct-shell-head and delete it.

Testing steps:

  1. Go to an Open MCT URL and verify that the Status area and indicators appear similar to below. Indicators should be displaying icon and text. Verify that the single/multi-line toggle button (orange arrow) displays an icon with two horizontal lines and the expand/collapse indicators toggle button (yellow arrow) shows arrows pointing in.
    Screenshot 2024-09-19 at 2 49 35 PM
  2. Hover over the single/multi-line toggle button and verify the tooltip reads as 'Display as single line'.
  3. Hover over the expand/collapse indicators toggle button and verify the tooltip reads as 'Show icon only'.
  4. Shrink the browser window such that the Indicators wrap and look similar to below:
    Screenshot 2024-09-19 at 2 49 57 PM
  5. Click the single/multi-line toggle button. Verify that the Indicators are displayed in a single line, and if overflowing, that the button visually highlights and displays with a blue background and white icon:
    Screenshot 2024-09-19 at 2 50 06 PM
  6. Reload the browser and verify that the single/multi-line setting was stored locally and displays the same as it was before reload.
  7. Expand the browser window, watching the single/multi-line toggle button. As soon as the Indicators can fit in their available space, the button should de-highlight back to its initial state.
    Screenshot 2024-09-19 at 3 03 11 PM
  8. Shrink the browser window again and watch the single/multi-line toggle button. As soon as the Indicators cannot fit in their available space, the button should highlight as before.
  9. Click the expand/collapse indicators toggle button: verify that Indicators now display as icons only:
    Screenshot 2024-09-19 at 2 50 24 PM
  10. Reload the browser and verify that the expand/collapse indicators toggle setting was stored locally and displays the same as it was before reload.

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

Successfully merging a pull request may close this issue.

2 participants