You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[E&A] Add logic for tracking out-of-view Timeline playheads (#1067)
**Related Ticket:** #1052
### Description of Changes
This PR continues the E&A timeline changes with the following updates:
1. Logic to track which timeline playheads are out-of-view and display
static (non-clickable) indicators for them
2. Revamped playheads to simplify style control and changed their
content to show the corresponding date and labels
Designs:
https://www.figma.com/design/9INQauBWhiRxvOWDGhRrxO/US-GHG-Center?node-id=1128-2306&t=XQg28Qtma2dgRiS5-4
### Notes & Questions About Changes
There are a couple of details from the designs that I did not include in
this PR due to some questions I have. I would appreciate your feedback,
especially since @faustoperez is unavailable:
1. The designs show the timeline header dates vertically centered, as
shown below:
<img width="258" alt="Screenshot 2024-07-24 at 15 08 39"
src="https://github.com/user-attachments/assets/4ac4ab9a-1dd9-4af8-b446-56e8e0df3788">
Currently, our header dates are displayed on two lines, and we sometimes
show longer text like "Sun 05 Apr 2009":
<img width="173" alt="Screenshot 2024-07-24 at 15 16 37"
src="https://github.com/user-attachments/assets/b28d0e9b-dd6a-4c60-93f2-8a047393375a">
Changing these to be vertically centered and in one line can sometimes
result in a cluttered view when zooming, as shown below:
<img width="211" alt="Screenshot 2024-07-24 at 13 48 52"
src="https://github.com/user-attachments/assets/e8893f7a-c4a4-4ec5-9a07-807cc5514d0d">
2. Clicking on a playhead toggles the corresponding date picker. If you
intend to drag the playhead and accidentally click on it, the calendar
toggles, which can be a bit inconvenient. I plan to open a separate PR
for this for some team feedback
### Validation / Testing
The validation / testing cases are outlined in the designs:
https://www.figma.com/design/9INQauBWhiRxvOWDGhRrxO/US-GHG-Center?node-id=1128-2306&t=XQg28Qtma2dgRiS5-4
0 commit comments