Files
Charles Hacskaylo a0a06cf7d2 Better overflow and wrapping in Status area (#7850)
* Enhancements for better wrapping of Status Area icons
- Added `headCanWrap` stored property, and toggle button.
- CSS mods, cleanup.

* Enhancements for better wrapping of Status Area icons
- New glyphs for `icon-multiline` and `icon-singleline`.
- Refinements to button labels and titles for clarity.

* Enhancements for better wrapping of Status Area icons
- 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
- WIP, but is working!
- TODOs:
  - Make sure this is a good way to do things.
  - Cleanup code.
  - Tests.

* Enhancements for better wrapping of Status Area icons
- 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.

* - Now uses Watch instead of Update to handle changes from containing AppLayout.vue component.
- Code cleanup, console.log removals.

* - Fixed CSS which was causing the head to collapse when browser window 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
safer access to `localStorage` initial state
ie. legacy localStorage having `expanded` but not `multiline`

* framework for e2e tests

* add aria-label to `Status Indicators`

* e2e test for expand and collapse indicators

* e2e test for single line mode

* reuse `firstIndicator` locator

* e2e test for overflow indication
refactor to reuse variables
refactor to use `test.step`s instead of comments

* e2e test for both toggles working in conjunction

* e2e test for `localStorage` persistence

* new visual snapshots
* time conductor - add single/multi line toggle button
* autoscale - 1 more pixel in status area

* Fix tests that relied on changed button text

* Hide clock for percy snapshots

* Hide clock for percy snapshots take 2

---------

Co-authored-by: David Tsay <david.e.tsay@nasa.gov>
Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>
Co-authored-by: Andrew Henry <andrew.k.henry@nasa.gov>
2025-12-17 00:54:27 +00:00
..