feat: implement touch-friendly palette drawer on mobile (Related to #6603)#6621
feat: implement touch-friendly palette drawer on mobile (Related to #6603)#6621gourijain029-del wants to merge 1 commit into
Conversation
…ugarlabs#6603) - setMobile: add tap-outside listener to close drawer when active - showPalette: replace early return with classList.add('active') to slide the palette drawer in on mobile instead of hiding it
|
✅ All Jest tests passed! This PR is ready to merge. |
kartikktripathi
left a comment
There was a problem hiding this comment.
I tried testing this.. The master branch, and this does the same action, in my opinion.
| this.mobile = mobile; | ||
| if (mobile) { | ||
| this._hideMenus(); | ||
| // Close the drawer when tapping outside it |
There was a problem hiding this comment.
Adding the document-level click handler inside setMobile() will register a new global listener every time this method runs. setMobile(true) can be called repeatedly during resize/layout changes, so this can stack duplicate handlers and make drawer-close behavior fire multiple times. Could we store one named handler and attach/remove it only when the mobile mode actually changes?
stutijain2006
left a comment
There was a problem hiding this comment.
Don't know but this is not working on my side. The close button to close the palette is still not working on touch on small screen sizes and even on screen sizes below 400px, that close button is not even visible for palettes such as pitch palette and we have to close it by clicking on some other palette only.
Rest everything remained same as it is there in master branch.
Make the required changes.
Replaces the early return in
showPalettethat hid the palette on mobile with a slide-in drawer behavior.Changes
Single file:
js/palette.jssetMobile: add tap-outside listener to close drawer when activeshowPalette: slide palette drawer in via classList.add('active') instead of returning earlyTesting
Demo
Screen.Recording.2026-04-15.at.12.51.54.AM.mov
Category
Related
Part of #6603. Companion PRs: pinch-to-zoom, mobile-scaling, mobile-editing-layout, touch-drag-threshold, widget-touch-handlers.