wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-27 08:50:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix popup preview regressions, add story

Browse source 
- Fix margin for page preview flipped-x.
- Fix margins for generic previews.
- Add error story to storybook.
- Fix minor typo, pageIds in MODELS.

Bug: T281170
Change-Id: I5b96719c1d08518cbd977590171974796fd10986
This commit is contained in:
Clare Ming 2021-08-13 13:42:27 -06:00
parent 0a55cc12d8
commit 48df0cbaea
3 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.storybook/mocks/models.js
View file

@ -2,7 +2,7 @@
* Various Page Preview models used for different configurations. * Various Page Preview models used for different configurations.
* PreviewModel is defined in 'src/preview/model.js`. * PreviewModel is defined in 'src/preview/model.js`.
* *
* In produciton, thumbnail size is determined by the gateway before fetching * In production, thumbnail size is determined by the gateway before fetching
* from the server. Here, thumbnails are defined statically so they * from the server. Here, thumbnails are defined statically so they
* must be scaled down for low-dpi display, using `helpers/scaleDownThumbnails.js`. * must be scaled down for low-dpi display, using `helpers/scaleDownThumbnails.js`.
* *
@ -176,7 +176,7 @@ MODELS.THUMBNAIL_SMALL_TALL = {
width: 300, width: 300,
height: 1000 height: 1000
}, },
pageId: 8246305 pageId: 18842359
}; };
MODELS.THUMBNAIL_SMALL_SHORT = { MODELS.THUMBNAIL_SMALL_SHORT = {
title: "Full Moon", title: "Full Moon",
@ -191,7 +191,7 @@ MODELS.THUMBNAIL_SMALL_SHORT = {
width: 300, width: 300,
height: 200 height: 200
}, },
pageId: 2486305 pageId: 11432
}; };
MODELS.LONG_WORD_1 = { MODELS.LONG_WORD_1 = {
title: "Pneumonoultramicroscopicsilicovolcanoconiosis", title: "Pneumonoultramicroscopicsilicovolcanoconiosis",
@ -558,4 +558,12 @@ MODELS.TYPE_REFERENCE_GENERIC_COLLAPSIBLE = {
extract: `<p>This is a reference.</p><div class="mw-collapsible"></div>` extract: `<p>This is a reference.</p><div class="mw-collapsible"></div>`
}; };
MODELS.ERROR = {
title: "Error Preview",
url: "Error Preview",
languageCode: "en",
languageDirection: "ltr",
type: 'generic',
};
export default MODELS; export default MODELS;

11
.storybook/stories/index.stories.js
View file

@ -306,6 +306,17 @@ storiesOf( 'Non-latin', module )
`; `;
} ) } )
storiesOf( 'Error', module )
.add( 'generic', () => {
modifyStorybookHead( MODELS.ERROR.languageCode, MODELS.ERROR.languageDirection )
return `
${createPopup( MODELS.ERROR, { flippedX: false, flippedY: false } )}
${createPopup( MODELS.ERROR, { flippedX: true, flippedY: false } )}
${createPopup( MODELS.ERROR, { flippedX: false, flippedY: true } )}
${createPopup( MODELS.ERROR, { flippedX: true, flippedY: true } )}
`;
} );
storiesOf( 'assets', module ) storiesOf( 'assets', module )
.add( 'SVG Masks', () => { .add( 'SVG Masks', () => {
const parser = new DOMParser(), const parser = new DOMParser(),

5
src/ui/templates/popup/popup.less
View file

@ -294,6 +294,10 @@
z-index: @zIndexThumbnailMask; z-index: @zIndexThumbnailMask;
right: 0; right: 0;
} }
.mwe-popups-extract {
margin-top: 8px;
}
} }
&.flipped-x-y { &.flipped-x-y {
@ -495,6 +499,7 @@
padding-top: var( --pointer-height ); padding-top: var( --pointer-height );
} }
&.mwe-popups-type-generic:not( .flipped-y ):not( .flipped-x-y ),
&.mwe-popups-type-disambiguation:not( .flipped-y ):not( .flipped-x-y ) { &.mwe-popups-type-disambiguation:not( .flipped-y ):not( .flipped-x-y ) {
.mwe-popups-container { .mwe-popups-container {
padding-top: var( --pointer-height ); padding-top: var( --pointer-height );