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

zIndex behavior improvements #269

Closed
adrianbj opened this issue Oct 19, 2017 · 9 comments
Closed

zIndex behavior improvements #269

adrianbj opened this issue Oct 19, 2017 · 9 comments

Comments

@adrianbj
Copy link
Contributor

@adrianbj adrianbj commented Oct 19, 2017

  • bug report? yes
  • feature request? yes
  • version: 2.4.10

Description

Sometimes it can be quite annoying trying to get the panel you are interested in to appear on top of others. This is particularly problematic when some panels are already in FLOAT mode when the page is loaded.

Here are a couple of screencasts:

This first one shows the problem when trying to hover to show the User panel when those other two are in FLOAT mode. Often the zIndex of the hovered panel is not increased appropriately.

zindexissue

This is a different problem which is more difficult to solve - what you do when clicking an icon on the bar to open a panel in FLOAT mode when the panel is positioned such that you need to move across another panel to get the mouse cursor to it. The one you pass over gains the focus. Could we possibly delay the mousemove checks for a second or two after clicking a panel icon. This is especially important with panels with overflow content so you actually need to access them to scroll to see content.

zindexissue2

I have played around a little with the Panel.prototype.focus function and have made some improvements, but I am wondering if you have any definitive ideas on how this might be improved.

@dg dg closed this in bee67cb Feb 22, 2018
@dg dg reopened this Feb 22, 2018
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Feb 22, 2018

What about focusing floating panels when user clicks instead of moves mouse over?

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Feb 22, 2018

What about focusing floating panels when user clicks instead of moves mouse over?

Yeah, that might take care of things, but I'd need to experience it to see if there were any usability downsides - certainly worth a try though I think because the current behavior can definitely be a little frustrating at times :)

OT, but the other that would be nice is a way to change the base zIndex from the default 20000. I currently override this with JS because it is higher than the dropdown navigation in ProcessWire which means you can't get to the menu if you have a large panel open, but it would be nice to have a $baseZindex option.

@dg dg closed this in 8decd5a Feb 25, 2018
dg added a commit that referenced this issue Feb 25, 2018
… break in behavior) [Closes #269]
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Feb 25, 2018

We can test how the new behavior will suit 0548858.

ad baseZindex: IMHO it can be overwriten Tracy.DebugPanel.zIndex = 12345.

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Feb 25, 2018

Thanks for the change in focus - I'll take a look soon.

ad baseZindex: IMHO it can be overwriten Tracy.DebugPanel.zIndex = 12345.

This is what I currently do, but it's a bit messy because you need to loop through all panels so they are not all the same. You also have to deal with the zIndex of the bluescreen. You can see what I am doing here: https://github.com/adrianbj/TracyDebugger/blob/42f7e23297ac905efc2be64a539ecd00fc8d3be2/TracyDebugger.module#L875-L898

I just thought a proper base settings would make things a lot cleaner, but if you don't think it's a good idea, I can live with my hacks.

dg added a commit that referenced this issue Feb 25, 2018
…BC break in behavior) [Closes #269]
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Feb 25, 2018

Ok, I've been playing around with this and it works great, but the catch is that it messes with my ability to override the base zIndex using the code I linked to above. If you have multiple panels open and reload the page and try to click on a panel that is behind another panel, it won't be promoted to the top. Any chance you'd reconsider a baseIndex setting? I guess the main issue would be setting the value in the two bar.css and bluescreen.css files - these would have to be moved

dg added a commit that referenced this issue Feb 25, 2018
…BC break in behavior) [Closes #269]
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Feb 25, 2018

I have added Tracy.panelZIndex, you can set it before Tracy is loaded.

dg added a commit that referenced this issue Feb 25, 2018
dg added a commit that referenced this issue Feb 25, 2018
dg added a commit that referenced this issue Feb 25, 2018
…BC break in behavior) [Closes #269]
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Feb 26, 2018

I have added Tracy.panelZIndex, you can set it before Tracy is loaded.

Thanks, that should be great, but I think the 20000 in bluescreen.css will also need attention, otherwise the panels will be covered by the bluescreen. I could probably override that the way I am currently, but it would be nicer to be able to set it before loading, rather than overwriting - would you be OK with adding that option too please?

@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Feb 26, 2018

I do not think how to overwrite it more simply than using CSS.

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Feb 26, 2018

I do not think how to overwrite it more simply than using CSS.

I thought if you defined a Tracy.bsZIndex and applied it in bluescreen.js (like you've done with bar.js), rather than defining it in bluescreen.css.

The problem with overwriting via CSS is that I can't really make it configurable at my end. I give users the ability to set their own zIndex which means they can adjust for the frontend of their site if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.