Set max height and scroll on sidebars about takenote HOT 6 CLOSED

I would like to try addressing this. I may need some guidance, though :)

from takenote.

Typescript isn't normally my jam, but after hacking at this for a while I found you can get the event location, which should be right on the button being clicked:

  const handleNoteOptionsClick = (event: ReactMouseEvent, noteId: string = '') => {
    if (event instanceof MouseEvent) {
      console.log(`loc event`, event.pageX, event.pageY)
    }
    event.stopPropagation()

    if (node.current && node.current.contains(event.target as HTMLDivElement)) return
    setNoteOptionsId(!noteOptionsId || noteOptionsId !== noteId ? noteId : '')
  }

I can try and work at this more, but if @simeydk already has something going I'll leave it. Just thought I'd drop this off otherwise to be of some help. More than willing to jump in and help either way.

from takenote.

This issue is what appears in this CSS-Tricks post.

The sidebar for the notes, (.note-sidebar) should have a max-height of 100vh with overflow: hidden to hide any scroll. On hover, overflow-y: auto should be added, so a scrollbar appears only when you hover.

However, this actually sets overflow: hidden to the x-axis as well, and the .note-options-context menu gets cut off.

Currently, each note item has position: relative, and each menu has position: absolute. This won't work with overflow: hidden. We could use one container for the options and set the top and left with JavaScript, but I don't know how to send the coords properly with Hooks and Refs.

Ultimately, there should be one container for the options that gets populated on click with the proper data and coordinates set on the element.

from takenote.

I'm just leaving it with the many relative and absolute elements for now.

from takenote.

Thanks for sharing this. I sent some feedback via Twitter, that may be able to help. Good luck!

from takenote.

Please do.

from takenote.