From a6adad35edee69d4a57188702094d0a79a6276e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Tue, 21 Oct 2014 20:29:53 +0000 Subject: [PATCH] Change above-the-fold layout - step 1 * remove chevron * adjust colors Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833 --- MultimediaViewer.php | 2 - i18n/en.json | 8 +- resources/mmv/mmv.lightboxinterface.less | 2 +- resources/mmv/ui/img/drag-active.svg | 24 ----- resources/mmv/ui/img/drag.svg | 24 ----- resources/mmv/ui/mmv.ui.metadataPanel.less | 4 +- .../mmv/ui/mmv.ui.metadataPanelScroller.js | 40 +------ .../mmv/ui/mmv.ui.metadataPanelScroller.less | 100 ------------------ .../ui/mmv.ui.metadataPanelScroller.test.js | 25 +---- 9 files changed, 13 insertions(+), 216 deletions(-) delete mode 100644 resources/mmv/ui/img/drag-active.svg delete mode 100644 resources/mmv/ui/img/drag.svg diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 46bffd556..200b0c7e8 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -590,8 +590,6 @@ $wgResourceModules += array( '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 9dbccdc44..7bc3d7efc 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -1,8 +1,8 @@ { "@metadata": { - "authors": [ - "Mark Holmquist " - ] + "authors": [ + "Mark Holmquist " + ] }, "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 40690af3a..06741a4ef 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 5843f0056..000000000 --- a/resources/mmv/ui/img/drag-active.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - -image/svg+xml - - \ 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 c116cf4ad..000000000 --- a/resources/mmv/ui/img/drag.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - -image/svg+xml - - \ 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 ba59a3102..8c73e0235 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 57b1b0d41..0e7a86102 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 = $( '
' ) - .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 = $( '
' ) - .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 39f3422c0..8362829a5 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; @@ -79,98 +74,3 @@ @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 01b9b9433..09b98a5b3 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 = $( '
' ).css( 'height', 100 ).appendTo( $qf ), $aboveFold = $( '
' ).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 = $( '
' ).css( 'height', 100 ).appendTo( $qf ), $aboveFold = $( '
' ).css( 'height', 50 ).appendTo( $container ), @@ -252,17 +243,5 @@ 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 ) );