Opened 5 years ago
Closed 5 years ago
#3418 closed defect (fixed)
UI seems broken: sidebar doesn't retract and overlays page and makes force dialog unusable
Reported by: | bdbaddog | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 0.9.0 |
Version: | 0.9.0b6 | Keywords: | |
Cc: | rutsky, thedylman |
Description
I'm attaching a screenshot. If you go to waterfall, click on a builder, then click on a force build button, the sidebar is on top of the left part of the modal dialog and so the modal is unusable.
Attachments (1)
Change History (12)
Changed 5 years ago by bdbaddog
comment:1 Changed 5 years ago by dustin
- Milestone changed from undecided to 0.9.0
I'm seeing the same regarding the sidebar not retracting. I'm on Firefox - maybe it works in Chrome?
comment:2 Changed 5 years ago by bdbaddog
Tried both Chrome and Firefox on mac. Same issue on both. Is the sidebar supposed to retract? You can see it's sliding the main page around when you click the pin..
comment:3 Changed 5 years ago by thedylman
Saw this problem in 0.9.0b2, more screen shots in #3343
comment:4 Changed 5 years ago by rutsky
- Cc rutsky added
comment:5 Changed 5 years ago by dustin
- Cc thedylman added
comment:6 Changed 5 years ago by ddelemeny
Hi, I'm pretty new to buildbot, and I just installed 0.9.0b6 from pypi to test it out. While trying out the features, I quickly ran into the bug described here. As an angular/ui.bootstrap user, it looked familiar.
I discussed it a bit on IRC with djmitche, but as I tried to define what would be a patch, I figured out that an elegant fix does not come out so clearly.
Here's what I found :
The bug can be understood in multiple ways :
(Modal CSS POV) Modal doesn't have high enough z-index
The semantics of a modal are usually "this dialog is on top of everything else", which is not the case here because the sidebar has a higher z-index (3000) than ui.bootstrap modals (1040/1050).
Unfortunately, ui.bootstrap has this value hardcoded in the default templates.
https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html#L4
A way to fix would be to either use a patched version of the templates, or just override them in the template cache.
A way to bodge this would be to force the z-index on modals, with a risk on breaking stacks of modals:
css:
.override-modal-backdrop-z { z-index:3040 !important; } .override-modal-z { z-index:3050 !important; }
coffee:
app.config ($modalProvider) -> $modalProvider.options.backdropClass = ["override-modal-backdrop-z"] $modalProvider.options.windowClass = ["override-modal-z"]
(Sidebar CSS POV) Sidebar has its z-index too high
The semantics of a sidebar are a bit less well-defined than a modal but in guanlecoja, it seems to be "The sidebar should be on top of the content". However the value conflicts with ui.bootsrap's modal. An option would be to lower the z-index to a compatible value, at least under 1040.
(Element reparenting POV) Modal should be contained in .content's available real-estate
The semantics of the sidebar could also include "the sidebar's real-estate is not part of the content and should not be available for content rendering". This would mean that the modal's DOM elements should be rooted under the .content element (which serves as a frame), and have position:absolute instead of position:fixed, to have a position relative to that frame.
ui.bootstrap provides the appendTo option to reparent modals to any element, which can be set globally, but this feature has been introduced in the 1.0.X branch. guanlecoja uses ui.bootstrap 0.11.X
http://angular-ui.github.io/bootstrap/#/modal
I hope this will be useful to the next person coming on this ticket.
-- Damien
comment:7 Changed 5 years ago by dustin
Thanks Damien!
comment:8 Changed 5 years ago by tardyp
comment:9 Changed 5 years ago by bdbaddog
https://github.com/buildbot/buildbot/pull/1980 fixes part of this bug. The modal is now visible. but the sidebar still doesn't retract.
comment:10 Changed 5 years ago by tardyp
just verified this works for me.
The side bar doesn't retract until you hit the "pin" button.
This was request asked by some users who found auto retract feature to annoying and not useful when working with big screen
comment:11 Changed 5 years ago by tardyp
- Resolution set to fixed
- Status changed from new to closed
please reopen if this is not working for you as expected in beta8
screenshot