Folder Navigation - Z-Index Issues

[mayamcdougall]

Folder Navigation is in a weird place right now. It works, but not under the default theme.

The default theme uses rotation to make the Sticky Note widgets appear more lifelike. This transformation brings them outside of the page's normal Z-Index. This means that the answer isn't as simple as applying a z-index because the transformed widgets appear above all other elements.

While floating in this "above space", each widget is also rendered above the previous widget on the page. When the Folder Navigation menus pop up, they are rendered inside the previous widget element, and thus below any subsequent widgets.

It's been a while since I've looked at this issue, but from what I remember, each subsequent widget transformation is essentially being rendered on a new layer above the previous, ignoring z-index entirely.

Right now, the folder menus are being hidden using opacity, not display, for the sake of animations. They have a fade-in animation that makes them much easier to use than just immediately appearing and disappearing with display.

However, if they used display, they'd essentially be rendered "on-demand" and placed properly above all elements. The problem with opacity is that they are always rendered ahead of time, then hidden, causing them to be below everything.

I suspect the answer may lie in combining the two, but so far I've had little success.

Feel free to leave a comment if you have any ideas on this issue.

[mayamcdougall]

As a note to myself, maybe try animating a container, but using display on its contents.

The container should fade in (thus also the elements being hidden by display) but the element hidden by display should pop above all other elements.

I feel like I've tried that though and the issue is that even using opacity to fade in, display will kick in first and they'll immediately vanish instead of fading out.

If only there was a way to put display on a delay, like opacity. 😞