Opened 3 years ago

Closed 2 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)

Screen Shot 2016-01-22 at 8.00.01 PM.png (189.8 KB) - added by bdbaddog 3 years ago.
screenshot

Download all attachments as: .zip

Change History (12)

Changed 3 years ago by bdbaddog

screenshot

comment:1 Changed 3 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 3 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 3 years ago by thedylman

Saw this problem in 0.9.0b2, more screen shots in #3343

comment:4 Changed 3 years ago by rutsky

  • Cc rutsky added

comment:5 Changed 3 years ago by dustin

  • Cc thedylman added

comment:6 Changed 3 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.

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

Last edited 3 years ago by ddelemeny (previous) (diff)

comment:7 Changed 3 years ago by dustin

Thanks Damien!

comment:9 Changed 3 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 2 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 2 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

Note: See TracTickets for help on using tickets.