Skip to content

feat: implement touch-friendly palette drawer on mobile (Related to #6603)#6621

Open
gourijain029-del wants to merge 1 commit into
sugarlabs:masterfrom
gourijain029-del:feat/mobile-palette-drawer-6603
Open

feat: implement touch-friendly palette drawer on mobile (Related to #6603)#6621
gourijain029-del wants to merge 1 commit into
sugarlabs:masterfrom
gourijain029-del:feat/mobile-palette-drawer-6603

Conversation

@gourijain029-del
Copy link
Copy Markdown
Contributor

@gourijain029-del gourijain029-del commented Apr 14, 2026

Replaces the early return in showPalette that hid the palette on mobile with a slide-in drawer behavior.

Changes

Single file: js/palette.js

  • setMobile: add tap-outside listener to close drawer when active
  • showPalette: slide palette drawer in via classList.add('active') instead of returning early

Testing

  • ✅ All tests pass (123/123)
  • ✅ Palette slides in when tapped on mobile
  • ✅ Palette slides out when tapping outside
  • ✅ Desktop palette unchanged

Demo

Screen.Recording.2026-04-15.at.12.51.54.AM.mov

Category

  • Bug Fix
  • Feature
  • Performance
  • Tests
  • Documentation

Related

Part of #6603. Companion PRs: pinch-to-zoom, mobile-scaling, mobile-editing-layout, touch-drag-threshold, widget-touch-handlers.

…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
@github-actions github-actions Bot added feature Adds new functionality size/S Small: 10-49 lines changed area/javascript Changes to JS source files labels Apr 14, 2026
@github-actions
Copy link
Copy Markdown
Contributor

✅ All Jest tests passed! This PR is ready to merge.

Copy link
Copy Markdown
Contributor

@kartikktripathi kartikktripathi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried testing this.. The master branch, and this does the same action, in my opinion.

Comment thread js/palette.js
this.mobile = mobile;
if (mobile) {
this._hideMenus();
// Close the drawer when tapping outside it
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Contributor

@stutijain2006 stutijain2006 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/javascript Changes to JS source files feature Adds new functionality size/S Small: 10-49 lines changed

Projects

Development

Successfully merging this pull request may close these issues.

5 participants