Better overflow and wrapping in Status area #7850

charlesh88 · 2024-09-19T17:31:15Z

Closes #6655

Describe your changes:

Added new button that toggles single and multi-line displays of Indicators.
Button highlights when Indicators are overflowing in single-line mode.
Indicators as icon-only or icon-and-label now toggle independently from single and multi-line displays.

TODOs:

Updated tests, visual tests?

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this a notable change that will require a special callout in the release notes? For example, will this break compatibility with existing APIs or projects that consume these plugins?

Author Checklist

Changes address original issue?
Tests included and/or updated with changes?
Has this been smoke tested?
Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
Have you associated a milestone with this PR? Note: leave blank if unsure.
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?

- Added `headCanWrap` stored property, and toggle button. - CSS mods, cleanup.

- New glyphs for `icon-multiline` and `icon-singleline`. - Refinements to button labels and titles for clarity.

- Add code and CSS for toggling single/multiline display of indicators. - Add code to detect overflow state of indicators.

- WIP, but is working! - TODOs: - Make sure this is a good way to do things. - Cleanup code. - Tests.

codecov · 2024-09-19T17:43:04Z

Codecov Report

Attention: Patch coverage is 54.00000% with 23 lines in your changes missing coverage. Please review.

Project coverage is 56.64%. Comparing base (e792403) to head (6213183).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/ui/layout/AppLayout.vue	52.08%	19 Missing and 4 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7850      +/-   ##
==========================================
- Coverage   59.11%   56.64%   -2.48%     
==========================================
  Files         675      675              
  Lines       27284    27328      +44     
  Branches     2671     2680       +9     
==========================================
- Hits        16128    15479     -649     
- Misses      11108    11506     +398     
- Partials       48      343     +295

Flag	Coverage Δ
e2e-ci	`60.79% <ø> (-0.99%)`	⬇️
e2e-full	`23.51% <ø> (-18.44%)`	⬇️
unit	`49.38% <54.00%> (-1.83%)`	⬇️

Files with missing lines	Coverage Δ
src/ui/layout/status-bar/StatusIndicators.vue	`77.77% <100.00%> (-7.94%)`	⬇️
src/ui/layout/AppLayout.vue	`36.26% <52.08%> (+7.69%)`	⬆️

... and 118 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e792403...6213183. Read the comment docs.

- Fixed CSS classing on collapse/expand button. - New method added for storing head props in local storage. - TODOs: - Make sure using Update hook is performant. - Tests.

…AppLayout.vue component. - Code cleanup, console.log removals.

davetsay

This is awesome @charlesh88 . I'm going to take a crack at cleaning up the vue stuff per my review comment, and having the default be configurable without requiring localStorage.

One thing. When you toggle the single to multi, and multi to single, the vertical spacing changes ever so slightly.

single.multi.flicker.mov

We also should write some visual tests for this. I can also maybe take a crack at this.

davetsay · 2024-09-20T21:19:23Z

src/ui/layout/status-bar/StatusIndicators.vue

@charlesh88 , I think we can do this without the usage of nextTick.

I'll take a crack at this.

…w is very small and Indicators running to multiple lines. - Fixed CSS which was causing the height and alignment problems in the head.

safer access to `localStorage` initial state ie. legacy localStorage having `expanded` but not `multiline`

davetsay

Made some vue changes @charlesh88 . You were right about the nextTick. In this case since the size changes because of css, we can't detect that change until nextTick.

charlesh88 · 2024-10-08T23:00:56Z

@charlesh88 needs to pull this down, check locally and advance to a real PR.

charlesh88 added 4 commits September 18, 2024 10:07

Enhancements for better wrapping of Status Area icons

e3387d4

- Added `headCanWrap` stored property, and toggle button. - CSS mods, cleanup.

Enhancements for better wrapping of Status Area icons

b8a933e

- New glyphs for `icon-multiline` and `icon-singleline`. - Refinements to button labels and titles for clarity.

Enhancements for better wrapping of Status Area icons

f06b629

- Add code and CSS for toggling single/multiline display of indicators. - Add code to detect overflow state of indicators.

Enhancements for better wrapping of Status Area icons

9e15443

- WIP, but is working! - TODOs: - Make sure this is a good way to do things. - Cleanup code. - Tests.

charlesh88 added the type:enhancement label Sep 19, 2024

charlesh88 added 2 commits September 19, 2024 15:02

Enhancements for better wrapping of Status Area icons

d1e85c9

- Fixed CSS classing on collapse/expand button. - New method added for storing head props in local storage. - TODOs: - Make sure using Update hook is performant. - Tests.

Code cleanup.

2094521

charlesh88 requested review from davetsay and jvigliotta September 19, 2024 23:13

- Now uses Watch instead of Update to handle changes from containing …

e494bee

…AppLayout.vue component. - Code cleanup, console.log removals.

davetsay requested changes Sep 20, 2024

View reviewed changes

charlesh88 and others added 2 commits September 25, 2024 16:15

- Fixed CSS which was causing the head to collapse when browser windo…

1e8e744

…w is very small and Indicators running to multiple lines. - Fixed CSS which was causing the height and alignment problems in the head.

use resizeObserver instead of window listeners

89e8ed3

safer access to `localStorage` initial state ie. legacy localStorage having `expanded` but not `multiline`

davetsay approved these changes Sep 27, 2024

View reviewed changes

Merge branch 'master' into status-wrap-toggle-6655

6213183

davetsay added a commit that referenced this pull request Sep 27, 2024

cherry-pick #7850

cbb5dce

davetsay mentioned this pull request Sep 27, 2024

Temporarily revert indicator bar freeze to one row until permanent solution found NASA-AMMOS/openmct-mcws#202

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Better overflow and wrapping in Status area #7850

Better overflow and wrapping in Status area #7850

charlesh88 commented Sep 19, 2024 •

edited

Loading

codecov bot commented Sep 19, 2024 •

edited

Loading

davetsay left a comment •

edited

Loading

davetsay Sep 20, 2024 •

edited

Loading

davetsay left a comment

charlesh88 commented Oct 8, 2024

Better overflow and wrapping in Status area #7850

Are you sure you want to change the base?

Better overflow and wrapping in Status area #7850

Conversation

charlesh88 commented Sep 19, 2024 • edited Loading

Describe your changes:

TODOs:

All Submissions:

Author Checklist

Reviewer Checklist

codecov bot commented Sep 19, 2024 • edited Loading

Codecov Report

davetsay left a comment • edited Loading

Choose a reason for hiding this comment

davetsay Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

davetsay left a comment

Choose a reason for hiding this comment

charlesh88 commented Oct 8, 2024

charlesh88 commented Sep 19, 2024 •

edited

Loading

codecov bot commented Sep 19, 2024 •

edited

Loading

davetsay left a comment •

edited

Loading

davetsay Sep 20, 2024 •

edited

Loading