Fix bug where the floating toolbar was on top of the save dialog

The save dialog has z-index: 3;, which succeeds in overlaying it on the
toolbar in its normal position, but fails once the toolbar starts
floating, because the floating toolbar has z-index: 100;

In practice this meant that if you were scrolled down and the toolbar
was floating, you could open the save dialog just fine, but you
couldn't close it because its controls were below rather than on top of
the toolbar.

Hacked around this by detecting the floating-ness in the toolbarPosition
handler and setting a class on the toolbar tracker accordingly.
There may be a more elegant way to fix this; an actual UI engineer
should figure that out, not me :)

Bug: 50324
Change-Id: I8c6ab1026705d00baa20f115255d0d7e74ee72bf
This commit is contained in:
Roan Kattouw 2013-06-26 17:59:59 -07:00 committed by Jforrester
parent cfc65ae9e5
commit c219771a34
2 changed files with 11 additions and 0 deletions

View file

@ -114,6 +114,10 @@
overflow: visible;
}
.ve-init-mw-viewPageTarget-toolbarTracker-floating {
z-index: 100;
}
.ve-init-mw-viewPageTarget-saveDialog .ve-ui-buttonWidget {
float: right;
margin-left: 0.5em;

View file

@ -878,6 +878,13 @@ ve.init.mw.ViewPageTarget.prototype.onSurfaceToolbarPosition = function ( $bar )
dir = mw.config.get( 'wgVisualEditor' ).pageLanguageDir,
type = $bar.css( 'position' );
// HACK: If the toolbar is floating, also apply a floating class to the toolbar tracker
if ( $bar.parent().hasClass( 've-ui-toolbar-floating' ) ) {
this.$toolbarTracker.addClass( 've-init-mw-viewPageTarget-toolbarTracker-floating' );
} else {
this.$toolbarTracker.removeClass( 've-init-mw-viewPageTarget-toolbarTracker-floating' );
}
// It's important that the toolbar tracker has 0 height. Else it will block events on the
// toolbar (e.g. clicking "Save page") as it would overlap that space. The save dialog
// will remain visible for the same reason elsewhere: As long as we don't have overflow:hidden,