[Buildbot] #3418: UI seems broken: sidebar doesn't retract and overlays page and makes force dialog unusable

[Buildbot trac]

#3418: UI seems broken: sidebar doesn't retract and overlays page and makes force
dialog unusable
---------------------+--------------------
Reporter:  bdbaddog  |       Owner:
    Type:  defect    |      Status:  new
Priority:  major     |   Milestone:  0.9.0
 Version:  0.9.0b6   |  Resolution:
Keywords:            |
---------------------+--------------------

Comment (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.

 == (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.

 [https://github.com/buildbot/guanlecoja-
 ui/blob/master/src/module/page_with_sidebar/page_with_sidebar.less#L79]

 == (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

--
Ticket URL: <http://trac.buildbot.net/ticket/3418#comment:6>
Buildbot <http://buildbot.net/>
Buildbot: build/test automation