Leniolabs / layoutit-grid

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Home Page:https://grid.layoutit.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Highlight tracks on hover

patak-dev opened this issue · comments

commented

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).