jenkins-bot has submitted this change and it was merged. Change subject: Change above-the-fold layout - step 1 ......................................................................
Change above-the-fold layout - step 1 * remove chevron * adjust colors Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833 --- M MultimediaViewer.php M i18n/en.json M resources/mmv/mmv.lightboxinterface.less D resources/mmv/ui/img/drag-active.svg D resources/mmv/ui/img/drag.svg M resources/mmv/ui/mmv.ui.metadataPanel.less M resources/mmv/ui/mmv.ui.metadataPanelScroller.js M resources/mmv/ui/mmv.ui.metadataPanelScroller.less M tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js 9 files changed, 13 insertions(+), 216 deletions(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 46bffd5..200b0c7 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -590,8 +590,6 @@ 'multimediaviewer-credit-popup-text', 'multimediaviewer-title-popup-text-more', 'multimediaviewer-credit-popup-text-more', - 'multimediaviewer-panel-open-popup-text', - 'multimediaviewer-panel-close-popup-text', ), ), diff --git a/i18n/en.json b/i18n/en.json index 9dbccdc..7bc3d7e 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1,8 +1,8 @@ { "@metadata": { - "authors": [ - "Mark Holmquist <mtrac...@member.fsf.org>" - ] + "authors": [ + "Mark Holmquist <mtrac...@member.fsf.org>" + ] }, "multimediaviewer-desc": "Expand thumbnails in a larger size in a fullscreen interface.", "multimediaviewer-desc-nil": "No description available.", @@ -108,8 +108,6 @@ "multimediaviewer-credit-popup-text": "Author and source information", "multimediaviewer-title-popup-text-more": "Click to show full file name", "multimediaviewer-credit-popup-text-more": "Click to show full author and source", - "multimediaviewer-panel-open-popup-text": "More details", - "multimediaviewer-panel-close-popup-text": "Fewer details", "multimediaviewer-download-attribution-cta-header": "You need to attribute the author", "multimediaviewer-download-attribution-cta": "Show me how", "multimediaviewer-attr-plain": "Plain", diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index 40690af..06741a4 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -69,7 +69,7 @@ // Javascript to get the "default" height. min-height: @metadatabar-above-fold-height; position: relative; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #eee; .jq-fullscreened & { height: @metadatabar-above-fold-fullscreen-height; diff --git a/resources/mmv/ui/img/drag-active.svg b/resources/mmv/ui/img/drag-active.svg deleted file mode 100644 index 5843f00..0000000 --- a/resources/mmv/ui/img/drag-active.svg +++ /dev/null @@ -1,24 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Created with Inkscape (http://www.inkscape.org/) --> - -<svg - xmlns:dc="http://purl.org/dc/elements/1.1/"; - xmlns:cc="http://creativecommons.org/ns#"; - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; - xmlns:svg="http://www.w3.org/2000/svg"; - xmlns="http://www.w3.org/2000/svg"; - version="1.1" - width="100%" - height="100%" - viewBox="0 0 30 16" - id="Layer_1" - xml:space="preserve"><metadata - id="metadata9"><rdf:RDF><cc:Work - rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage"; /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs - id="defs7" /> -<path - d="m 24.5,12.2 c -0.2,0 -0.4,0 -0.5,-0.1 L 15,6.9 6,12.1 C 5.8,12.2 5.7,12.2 5.5,12.2 5.1,12.2 4.8,12 4.6,11.7 L 4.2,11 C 4,10.8 4,10.5 4.1,10.2 4.2,9.9 4.3,9.7 4.6,9.6 l 10.1,-5.8 0.4,0 0.1,0 h 0.2 l 0.2,0.1 9.9,5.7 c 0.2,0.1 0.4,0.4 0.5,0.6 0.1,0.3 0,0.5 -0.1,0.8 l -0.4,0.7 c -0.3,0.3 -0.6,0.5 -1,0.5 z" - id="path3" - style="fill:#ffffff" /> -</svg> \ No newline at end of file diff --git a/resources/mmv/ui/img/drag.svg b/resources/mmv/ui/img/drag.svg deleted file mode 100644 index c116cf4..0000000 --- a/resources/mmv/ui/img/drag.svg +++ /dev/null @@ -1,24 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Created with Inkscape (http://www.inkscape.org/) --> - -<svg - xmlns:dc="http://purl.org/dc/elements/1.1/"; - xmlns:cc="http://creativecommons.org/ns#"; - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; - xmlns:svg="http://www.w3.org/2000/svg"; - xmlns="http://www.w3.org/2000/svg"; - version="1.1" - width="100%" - height="100%" - viewBox="0 0 30 16" - id="Layer_1" - xml:space="preserve"><metadata - id="metadata9"><rdf:RDF><cc:Work - rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage"; /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs - id="defs7" /> -<path - d="m 24.5,12.2 c -0.2,0 -0.4,0 -0.5,-0.1 L 15,6.9 6,12.1 C 5.8,12.2 5.7,12.2 5.5,12.2 5.1,12.2 4.8,12 4.6,11.7 L 4.2,11 C 4,10.8 4,10.5 4.1,10.2 4.2,9.9 4.3,9.7 4.6,9.6 l 10.1,-5.8 0.4,0 0.1,0 h 0.2 l 0.2,0.1 9.9,5.7 c 0.2,0.1 0.4,0.4 0.5,0.6 0.1,0.3 0,0.5 -0.1,0.8 l -0.4,0.7 c -0.3,0.3 -0.6,0.5 -1,0.5 z" - id="path3" - style="fill:#555555" /> -</svg> \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index ba59a31..8c73e02 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -36,9 +36,11 @@ max-width: 60%; } + + .mw-mmv-image-metadata { width: 100%; - background-color: #fbfbfb; + background-color: #f5f5f5; position: relative; padding-top: 10px; } diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js index 57b1b0d..0e7a861 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js +++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js @@ -73,7 +73,6 @@ this.$container.on( 'mmv-metadata-open', function () { if ( !panel.hasOpenedMetadata && panel.localStorage ) { panel.hasOpenedMetadata = true; - panel.$dragIcon.removeClass( 'panel-never-opened' ); try { panel.localStorage.setItem( 'mmv.hasOpenedMetadata', true ); } catch ( e ) { @@ -93,8 +92,6 @@ }; MPSP.empty = function () { - this.$dragIcon.toggleClass( 'panel-never-opened', !this.hasOpenedMetadata ); - // need to remove this to avoid animating again when reopening lightbox on same page this.$container.removeClass( 'invite' ); @@ -102,36 +99,6 @@ }; MPSP.initialize = function () { - var panel = this; - - this.$dragIcon = $( '<div>' ) - .addClass( 'mw-mmv-drag-icon mw-mmv-drag-icon-pointing-down' ) - .toggleClass( 'panel-never-opened', !this.hasOpenedMetadata ) - .prop( 'title', mw.message( 'multimediaviewer-panel-open-popup-text' ).text() ) - .tipsy( { gravity: 's', delayIn: mw.config.get( 'wgMultimediaViewer').tooltipDelay } ) - .appendTo( this.$aboveFold ) - .click( function () { - // Trigger open event and do related actions that would be normally done by the scroll handler. - // If we left this to the scroll handler, the size of the panel would change mid-animation - // and the end position would be off. - panel.panelIsOpen = true; - panel.$dragIcon.addClass( 'panel-open' ); - // use triggerHandler instead of trigger because it is non-async; the untruncate handler - // must run before the toggle() call - panel.$container.triggerHandler( 'mmv-metadata-open' ); - - panel.toggle( 'up' ); - } ); - - this.$dragIconBottom = $( '<div>' ) - .addClass( 'mw-mmv-drag-icon mw-mmv-drag-icon-pointing-up' ) - .prop( 'title', mw.message( 'multimediaviewer-panel-close-popup-text' ).text() ) - .tipsy( { gravity: 's', delayIn: mw.config.get( 'wgMultimediaViewer').tooltipDelay } ) - .appendTo( this.$container ) - .click( function () { - panel.toggle( 'down' ); - } ); - this.hasOpenedMetadata = !this.localStorage || this.localStorage.getItem( 'mmv.hasOpenedMetadata' ); }; @@ -219,15 +186,16 @@ }; /** - * Receives the window's scroll events and flips the chevron if necessary. + * Receives the window's scroll events and and turns them into business logic events + * @fires mmv-metadata-open + * @fires mmv-metadata-close */ MPSP.scroll = function () { var panelIsOpen = !!$.scrollTo().scrollTop(); - this.$dragIcon.toggleClass( 'panel-open', panelIsOpen ); this.$container.toggleClass( 'panel-open', panelIsOpen ); - if ( panelIsOpen && !this.panelIsOpen ) { // just opened (this is skipped in some cases, see the $dragIcon click handler) + if ( panelIsOpen && !this.panelIsOpen ) { // just opened this.$container.trigger( 'mmv-metadata-open' ); } else if ( !panelIsOpen && this.panelIsOpen ) { // just closed this.$container.trigger( 'mmv-metadata-close' ); diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less index 39f3422..8362829 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less +++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less @@ -2,11 +2,6 @@ @import "../mmv.mixins"; @import "mediawiki.mixins.animation"; -@drag-icon-width: 64px; -@drag-icon-height: 18px; -@drag-icon-color: #e6e6e6; -@drag-icon-invite-color: #347bff; - .mw-mmv-post-image { .animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards ); transition: box-shadow 0.25s; @@ -78,99 +73,4 @@ @keyframes mw-mmv-invite-animation { .mw-mmv-invite-animation; -} - -.mw-mmv-drag-icon { - width: @drag-icon-width; - height: @drag-icon-height; - - position: absolute; - left: 50%; - bottom: 0; - margin: 0 0 0 -(@drag-icon-width / 2); - - /* @embed */ - background-image: url(img/drag.svg); - background-repeat: no-repeat; - background-position: center bottom; - background-color: @drag-icon-color; - - cursor: pointer; - z-index: 1; // make sure it is above the text - the icon is visually at the bottom but in the DOM at the top - .opacity(0.7); - transition: opacity 0.25s; - - &-pointing-down { // use single-class selector - chevron direction is important enough to make it IE6-compatible - background-position: center top; - .rotate(180deg); - - -webkit-border-bottom-left-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - -moz-border-radius-bottomleft: 3px; - -moz-border-radius-bottomright: 3px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - - .mw-mmv-post-image:hover & { - .opacity(1); - } - } - &-pointing-up { - -webkit-border-top-left-radius: 3px; - -webkit-border-top-right-radius: 3px; - -moz-border-radius-topleft: 3px; - -moz-border-radius-topright: 3px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - - &:hover { - .opacity(1); - } - } - - &.panel-open { - display: none; - } - - &.panel-never-opened { - /* @embed */ - background-image: url(img/drag-active.svg); - background-color: @drag-icon-invite-color; - .opacity(1); - .animation( mw-mmv-appear-chevron-animation 1.4s ease 0s 1 normal forwards ); - } - - .jq-fullscreened & { - display: none; - } -} - -.mw-mmv-appear-chevron-animation() { - 0% { - opacity: 0; - } - 85% { - opacity: 0; - bottom: -5px; - } - 100% { - opacity: 1; - bottom: 0px; - } -} - -@-webkit-keyframes mw-mmv-appear-chevron-animation { - .mw-mmv-appear-chevron-animation; -} - -@-moz-keyframes mw-mmv-appear-chevron-animation { - .mw-mmv-appear-chevron-animation; -} - -@-o-keyframes mw-mmv-appear-chevron-animation { - .mw-mmv-appear-chevron-animation; -} - -@keyframes mw-mmv-appear-chevron-animation { - .mw-mmv-appear-chevron-animation; } diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js b/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js index 01b9b94..09b98a5 100644 --- a/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanelScroller.test.js @@ -146,7 +146,7 @@ } ); } - QUnit.test( 'Metadata scrolling', 7, function ( assert ) { + QUnit.test( 'Metadata scrolling', 6, function ( assert ) { var $qf = $( '#qunit-fixture' ), $container = $( '<div>' ).css( 'height', 100 ).appendTo( $qf ), $aboveFold = $( '<div>' ).css( 'height', 50 ).appendTo( $container ), @@ -181,15 +181,6 @@ assert.strictEqual( $.scrollTo().scrollTop(), 0, 'scrollTo scrollTop should be set to 0 after pressing down arrow' ); - scroller.$dragIcon.click(); - this.clock.tick( scroller.toggleScrollDuration ); - - scroller.$dragIconBottom.click(); - this.clock.tick( scroller.toggleScrollDuration ); - - assert.strictEqual( $.scrollTo().scrollTop(), 0, - 'scrollTo scrollTop should be set to 0 after clicking the chevron twice' ); - // Unattach lightbox from document scroller.unattach(); @@ -214,7 +205,7 @@ scroller.unattach(); } ); - QUnit.test( 'Metadata scroll logging', 6, function ( assert ) { + QUnit.test( 'Metadata scroll logging', 4, function ( assert ) { var $qf = $( '#qunit-fixture' ), $container = $( '<div>' ).css( 'height', 100 ).appendTo( $qf ), $aboveFold = $( '<div>' ).css( 'height', 50 ).appendTo( $container ), @@ -251,18 +242,6 @@ this.clock.tick( scroller.toggleScrollDuration ); assert.ok( mw.mmv.actionLogger.log.calledWithExactly( 'metadata-close' ), 'Closing keypress logged' ); - mw.mmv.actionLogger.log.reset(); - - scroller.$dragIcon.click(); - this.clock.tick( scroller.toggleScrollDuration ); - - assert.ok( mw.mmv.actionLogger.log.calledWithExactly( 'metadata-open' ), 'Opening click logged' ); - mw.mmv.actionLogger.log.reset(); - - scroller.$dragIconBottom.click(); - this.clock.tick( scroller.toggleScrollDuration ); - - assert.ok( mw.mmv.actionLogger.log.calledWithExactly( 'metadata-close' ), 'Closing click logged' ); mw.mmv.actionLogger.log.reset(); } ); }( mediaWiki, jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/167958 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987 Gerrit-PatchSet: 6 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: Siebrand <siebr...@kitano.nl> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
