Comments (6)
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.
Related Issues (20)
- Open a new tab onClick for github sign in[Bug] HOT 1
- Snapshot tests HOT 4
- [Feature] Pre-built templates for specific purpose HOT 2
- [Feature] Capitalize the first letter of Category name. HOT 11
- Demo is not working HOT 3
- Unable to run in windows HOT 10
- Windows 64-bit error HOT 1
- URL is blocked by Avast Antivirus HOT 3
- Prettier is throwing error on NoteList.tsx file line number 30 HOT 2
- Import Text Files HOT 4
- Documentation on README - (clone project before adding .env at root) HOT 2
- Error Message while running the npm i command HOT 6
- Error occurred while proxying request localhost:3000/api/auth/login to http://localhost:5000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) HOT 2
- [Feature] New Features (Share, Matches Count, Arrows after Search results to navigate)
- facing issues to start app [Bug] HOT 1
- Add a hamburger button to close or show the sidebar HOT 2
- [Bug] : Contributing Guidelines is not beginner friendly
- Add Tooltips for Enhanced User Experience
- Add option to rename notes HOT 1
- Drag-and-Drop Note Reordering
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from takenote.