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 · 0 comments
Open
Labels
Cleanup Changes to refactor or clean up messy code 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 Changes to refactor or clean up messy code 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Cleanup Changes to refactor or clean up messy code Web Involves web programming (TypeScript, Svelte, CSS)
Projects
Status: Blocked
Development

No branches or pull requests

1 participant