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

Possible to change visual order or z-index? #567

Open
mayank99 opened this issue Sep 21, 2022 · 1 comment
Open

Possible to change visual order or z-index? #567

mayank99 opened this issue Sep 21, 2022 · 1 comment

Comments

@mayank99
Copy link
Contributor

I bumped into visbug again today and really enjoyed playing around with "Position" tool in particular. It's so cool that we can drag things around in the browser! 😄

The problem is that when multiple elements on the page are positioned and overlap each other, then they follow the DOM order, making it hard to layer them correctly. ☹️

Design tools all have a way of changing the visual order ("Bring forward" / "Bring to top") so it would be nice if Visbug could have something similar. Not sure what the UI would look like, since visbug doesn't make use of a custom right-click menu. Maybe could be a separate tool with its own keyboard navigation?

One potential issue is when stacking contexts are involved, which might require recursively finding the parent node and applying z-index on that until it "works". But I think a user should be able to do that manually if the keyboard shortcut feels ergonomic enough.

Also, maybe some of the work already done for the /zindex inspector tool might come in handy?

@argyleink
Copy link
Member

def know the problem space, the visbug demo site can repro it really easily.

Design tools all have a way of changing the visual order ("Bring forward" / "Bring to top") so it would be nice if Visbug could have something similar.

we could totally add a few hotkeys (just like the ones in design tools) to bump z-index up/down/max/negative:

  • add a combo like ${metaKey}+shift+] here to bump to the top
  • another combo like ${metaKey}+] bumps z-index up by 1

should be a pretty easy to add! just writing and reading an inline style with some increment/decrement logic. alt+del clears any inline styles too, so if you want to restore things a user can use that.

this would be a cool addition. the question is then, which design tool shortcut do we adopt? is there a "most common" one?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants