jenkins-bot has submitted this change and it was merged. Change subject: Fix z-index bug in Firefox that would make navigation buttons appear on top of the metadata panel ......................................................................
Fix z-index bug in Firefox that would make navigation buttons appear on top of the metadata panel Also fixes other issues: - Some code in mmv.lightboxinterface.js wasn't doing anything - Canvas buttons were being added to the wrong element - Several CSS rules were being declared twice, a remnant of the multilightbox days Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409 --- M MultimediaViewer.php D resources/mmv/mmv.less M resources/mmv/mmv.lightboxinterface.js M resources/mmv/mmv.lightboxinterface.less M tests/qunit/mmv/mmv.lightboxinterface.test.js 5 files changed, 85 insertions(+), 151 deletions(-) Approvals: MarkTraceur: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 199a785..31643a3 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -647,7 +647,6 @@ ), 'styles' => array( - 'mmv/mmv.less', // Always make this one the last of the list (Bug 61852) 'mmv/mmv.loaded.css', ), diff --git a/resources/mmv/mmv.less b/resources/mmv/mmv.less deleted file mode 100644 index 4ece2ed..0000000 --- a/resources/mmv/mmv.less +++ /dev/null @@ -1,92 +0,0 @@ -@import "mmv.globals"; -@import "mmv.mixins"; - -/** - * Override multilightbox styles that don't apply to us - */ -.mw-mmv-wrapper { - position: absolute; - bottom: auto; -} - -.mw-mmv-main { - height: auto; - - .jq-fullscreened { - background-color: black; - } -} - -/** - * Some variables - */ -@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height); -@metadata-background: rgb(251, 251, 251); - -.mw-mmv-image-wrapper, -.mw-mmv-controls { - top: 0px; - bottom: @bottom-height; -} - -.jq-fullscreened { - .mw-mmv-image-wrapper, - .mw-mmv-post-image, - .mw-mmv-controls { - bottom: 0px; - } - - .mw-mmv-drag-affordance { - display: none; - } - - .mw-mmv-post-image, - .mw-mmv-controls { - @fullscreen-padding: 10px; - padding: (@fullscreen-padding / 2) 0; - height: (@metadatabar-top-content-height + @fullscreen-padding); - background-color: rgba(251, 251, 251, 0); - transition: background-color 0.25s; - min-height: 0; - - &:hover { - background-color: @metadata-background; - } - } - - .mw-mmv-post-image { - position: fixed; - } - - .mw-mmv-controls { - opacity: 0; - transition: opacity 0.25s; - - &:hover { - opacity: 1; - } - } -} - -.cursor-hidden { - cursor: none; -} - -.mw-mmv-image-wrapper { - position: fixed; -} - -.mw-mmv-post-image { - bottom: auto; - height: auto; - color: #333333; - background-color: @metadata-background; - position: absolute; - min-height: (@bottom-height + 1); - opacity: 0; -} - -.mw-mmv-controls { - height: auto; - border-bottom: 1px solid #cccccc; -} diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 5a1810a..339bf50 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -49,9 +49,6 @@ * Initialize the entire interface - helper method. */ LIP.init = function () { - var addToPre = [], - addToPost = []; - // SVG filter, needed to achieve blur in Firefox this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' ); @@ -71,11 +68,12 @@ this.$preDiv = $( '<div>' ) .addClass( 'mw-mmv-pre-image' ); - this.setupPreDiv( addToPre ); this.$postDiv = $( '<div>' ) .addClass( 'mw-mmv-post-image' ); - this.setupPostDiv( addToPost ); + + this.$controlBar = $( '<div>' ) + .addClass( 'mw-mmv-controls' ); this.$main.append( this.$preDiv, @@ -88,8 +86,10 @@ this.$main ); + this.setupCanvasButtons(); + this.panel = new mw.mmv.ui.MetadataPanel( this.$postDiv, this.$controlBar ); - this.buttons = new mw.mmv.ui.CanvasButtons( this.$imageWrapper, this.$closeButton, this.$fullscreenButton ); + this.buttons = new mw.mmv.ui.CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton ); this.canvas = new mw.mmv.ui.Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper ); }; @@ -234,14 +234,10 @@ }; /** - * Setup for DOM elements which come before the main image - * @param {Array.<HTMLElement|jQuery>} toAdd + * Setup for canvas navigation buttons */ - LIP.setupPreDiv = function ( toAdd ) { + LIP.setupCanvasButtons = function () { var ui = this; - - this.$controlBar = $( '<div>' ) - .addClass( 'mw-mmv-controls' ); this.$closeButton = $( '<div>' ) .text( ' ' ) @@ -261,43 +257,11 @@ } } ); - this.setupFullscreenButton(); - - this.$controlBar.append( - this.$closeButton, - this.$fullscreenButton - ); - - this.$preDiv.append( this.$controlBar ); - - this.addElementsToDiv( this.$preDiv, toAdd ); - }; - - /** - * Sets up the fullscreen button - */ - LIP.setupFullscreenButton = function () { // If the browser doesn't support fullscreen mode, hide the fullscreen button if ( $.support.fullscreen ) { this.$fullscreenButton.show(); } else { this.$fullscreenButton.hide(); - } - }; - - /** - * Setup for DOM elements which come before the main image - * @param {Array.<HTMLElement|jQuery>} toAdd - */ - LIP.setupPostDiv = function ( toAdd ) { - this.addElementsToDiv( this.$postDiv, toAdd ); - }; - - LIP.addElementsToDiv = function ( $div, toAdd ) { - var i; - - for ( i = 0; i < toAdd.length; i++ ) { - $div.append( toAdd[i] ); } }; diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index bbfa70b..d4d07fb 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -1,26 +1,38 @@ +@import "mmv.globals"; @import "mmv.mixins"; +@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height); +@metadata-background: rgb(251, 251, 251); + .mw-mmv-wrapper { - position: fixed; top: 0px; left: 0px; right: 0px; - bottom: 0px; z-index: 1001; + position: absolute; + bottom: auto; } .mw-mmv-main { width: 100%; - height: 100%; + height: auto; position: relative; + + .jq-fullscreened { + background-color: black; + } +} + +.mw-mmv-image-wrapper, +.mw-mmv-controls { + top: 0px; + bottom: @bottom-height; } .mw-mmv-image-wrapper { - position: absolute; - top: 50px; + position: fixed; left: 0px; right: 0px; - bottom: 0px; } .mw-mmv-image-inner-wrapper { @@ -34,21 +46,72 @@ top: 0px; height: 32px; width: 100%; + z-index: 1; } .mw-mmv-post-image { position: absolute; - bottom: 0px; - height: 32px; width: 100%; + bottom: auto; + height: auto; + color: #333333; + background-color: @metadata-background; + min-height: (@bottom-height + 1); + opacity: 0; + z-index: 2; } .mw-mmv-controls { - height: 32px; width: 100%; - border-bottom: 1px solid #7d7c81; + height: auto; + border-bottom: 1px solid #cccccc; +} + +/* Fullscreen styles */ + +.cursor-hidden { + cursor: none; } .mw-mmv-main.jq-fullscreened { background-color: black; +} + +.jq-fullscreened { + .mw-mmv-image-wrapper, + .mw-mmv-post-image, + .mw-mmv-controls { + bottom: 0px; + } + + .mw-mmv-drag-affordance { + display: none; + } + + .mw-mmv-post-image, + .mw-mmv-controls { + @fullscreen-padding: 10px; + padding: (@fullscreen-padding / 2) 0; + height: (@metadatabar-top-content-height + @fullscreen-padding); + background-color: rgba(251, 251, 251, 0); + transition: background-color 0.25s; + min-height: 0; + + &:hover { + background-color: @metadata-background; + } + } + + .mw-mmv-post-image { + position: fixed; + } + + .mw-mmv-controls { + opacity: 0; + transition: opacity 0.25s; + + &:hover { + opacity: 1; + } + } } \ No newline at end of file diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js b/tests/qunit/mmv/mmv.lightboxinterface.test.js index 2a8bd50..6d7ce67 100644 --- a/tests/qunit/mmv/mmv.lightboxinterface.test.js +++ b/tests/qunit/mmv/mmv.lightboxinterface.test.js @@ -85,15 +85,15 @@ lightbox.attach( '#qunit-fixture' ); $.support.fullscreen = false; - lightbox.setupFullscreenButton(); + lightbox.setupCanvasButtons(); - assert.ok( !lightbox.$fullscreenButton.is(':visible'), + assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'none', 'Fullscreen button is hidden when fullscreen mode is unavailable' ); $.support.fullscreen = true; - lightbox.setupFullscreenButton(); + lightbox.setupCanvasButtons(); - assert.ok( lightbox.$fullscreenButton.is(':visible'), + assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'block', 'Fullscreen button is visible when fullscreen mode is available' ); // Entering fullscreen -- To view, visit https://gerrit.wikimedia.org/r/123838 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6 Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: MarkTraceur <mtrac...@member.fsf.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
