mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 05:07:36 +00:00
Change above-the-fold layout - step 1
* remove chevron * adjust colors Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
This commit is contained in:
Gergő Tisza
parent
62133bab3c
commit
a6adad35ed
|
|
@ -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',
|
||||
),
|
||||
),
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"@metadata": {
|
||||
"authors": [
|
||||
"Mark Holmquist <mtraceur@member.fsf.org>"
|
||||
]
|
||||
"authors": [
|
||||
"Mark Holmquist <mtraceur@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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -36,9 +36,11 @@
|
|||
max-width: 60%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mw-mmv-image-metadata {
|
||||
width: 100%;
|
||||
background-color: #fbfbfb;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ),
|
||||
|
|
@ -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 ) );
|
||||
|
|
|
|||
Loading…
Reference in a new issue