Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor floating menus to use HTML <dialog> and CSS popover with anchor() #2142

Open
Keavon opened this issue Dec 16, 2024 · 2 comments
Open
Labels
Web Involves web programming (TypeScript, Svelte, CSS)

Comments

@Keavon
Copy link
Member

Keavon commented Dec 16, 2024

Modal dialogs (such as Preferences, About Graphite, closing save confirmations, etc.) should be refactored to use a <dialog> element.

Popover menus (such as menu lists and popovers) should be refactored to use the Popover API paired with CSS anchor positioning to replace the current CSS positioning hackery (which is fragile and isn't compatible with keeping up with scrolling its floating menu spawner within a pane with scrollbars). Care will need to be taken to ensure it works with nested popovers.

This is blocked on CSS anchor positioning reaching all modern browsers (caniuse). As of late 2024, Firefox and Safari do not support it.

capture

@Keavon Keavon added Cleanup Web Involves web programming (TypeScript, Svelte, CSS) labels Dec 16, 2024
@github-project-automation github-project-automation bot moved this to Short-Term in Task Board Dec 16, 2024
@Keavon Keavon moved this from Short-Term to Blocked in Task Board Dec 16, 2024
@kuldeeprathore05
Copy link

can i work on this issue?

@Keavon
Copy link
Member Author

Keavon commented Jan 12, 2025

@kuldeeprathore05 this is currently blocked, sorry.

@Keavon Keavon removed the Cleanup label Jan 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Web Involves web programming (TypeScript, Svelte, CSS)
Projects
Status: Blocked
Development

No branches or pull requests

2 participants