Highlight tracks on hover
patak-dev opened this issue · comments
We could have a currentHover
ref in the same way that we have a currentFocus
ref in store.js to track focus of track and line names focus, so we can highlight those tracks in the sidebar, code editor and inline inputs in the GridEditor.
- When hovering in a track size/unit in the sidebar, then highlight that track (and its size) in the GridEditor and in the Code Editor
- When hovering in a track size in the GridEditor, then highlight that track size/unit in the sidebar and in the Code Editor
- When hovering in a track size in the Code Editor, then highlight that track size/unit in the sidebar and the track (and its size) in the GridEditor.
- When hovering in a GridCell, highlight both the column and row tracks for that cell (and their sizes in the sidebar, GridEditor and Code Editor)
We probably need to use a lighter color for hover than the active color that is used for focus (or maybe just another color, we can play with that later)
Important: When we are currently focused in a track size (currentFocus
is of type track), we may need to ignore the hovering queues if they are confusing what is actually active. An example is to focus on a track size in the code editor, edit it and press Tab to go to the next. The mouse is still on the previous one, so the hover queue will actually be unhelpful there. I think this is the only place where this is an issue, so maybe we just need to avoid setting currentHover
in CssCodeTrackSize if currentFocus
is on one of them (for this bit, we may need to extra metadata to the currentFocus
).