mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-23 15:16:50 +00:00
Replace mediawiki.ui.icon with Codex, update preview markup and styles to be more consistent
- Removes .mw-ui-icon and .mw-ui-icon-element - Aligns markup/styles between generic and disambiguation previews - Update padding for generic and disambiguation previews to be the same as other popups, results in minor visual changes Bug: T341899 Change-Id: I9a58fc6a93160d07452ea6f903e1797dd9421d92
This commit is contained in:
bwang
Jdrewniak
parent
81b0668269
commit
b78cfe50c9
|
|
@ -2,7 +2,6 @@
|
|||
* These are custom styles designed to supplement styles produced
|
||||
* by ResourceLoad or MediaWiki-core.
|
||||
**/
|
||||
@import './mediawiki.ui.icon/icons.less';
|
||||
@import './production-icons.less';
|
||||
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,5 @@ sed "s/..\/..\/lib\/codex/@wikimedia\/codex/g" .storybook/mocks/mediawiki.skin.d
|
|||
# MediaWiki LESS mixins
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.less -o .storybook/mocks/mediawiki.mixins.less
|
||||
|
||||
# mediawiki.ui.icon icons.less
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.ui.icon/icons-2.less -o .storybook/mocks/mediawiki.ui.icon/icons.less
|
||||
|
||||
# OOUI/WikimediaUI theme icons
|
||||
curl "https://en.wikipedia.org/w/load.php?modules=ext.popups.icons|ext.popups.images&only=styles&debug=true" -o .storybook/mocks/production-icons.less
|
||||
|
|
|
|||
|
|
@ -125,13 +125,14 @@
|
|||
"ResourceModules": {
|
||||
"ext.popups.icons": {
|
||||
"class": "ResourceLoaderOOUIIconPackModule",
|
||||
"selectorWithoutVariant": ".mw-ui-icon-{name}",
|
||||
"icons": [
|
||||
"infoFilled",
|
||||
"settings"
|
||||
]
|
||||
},
|
||||
"ext.popups.images": {
|
||||
"selector": ".mw-ui-icon-{name}:before",
|
||||
"selector": ".mw-ui-icon-{name}",
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"images": {
|
||||
"popups-close": "resources/ext.popups.images/close.svg",
|
||||
|
|
@ -231,7 +232,6 @@
|
|||
"mediawiki.storage",
|
||||
"mediawiki.Title",
|
||||
"mediawiki.ui.checkbox",
|
||||
"mediawiki.ui.icon",
|
||||
"mediawiki.Uri",
|
||||
"mediawiki.user",
|
||||
"mediawiki.util",
|
||||
|
|
|
|||
BIN
resources/dist/index.js
vendored
BIN
resources/dist/index.js
vendored
Binary file not shown.
BIN
resources/dist/index.js.map.json
vendored
BIN
resources/dist/index.js.map.json
vendored
Binary file not shown.
|
|
@ -10,6 +10,17 @@
|
|||
top: -1000px;
|
||||
}
|
||||
|
||||
.popups-icon {
|
||||
.cdx-mixin-css-icon-background();
|
||||
.cdx-mixin-css-icon-size();
|
||||
.cdx-mixin-css-icon-alignment();
|
||||
}
|
||||
|
||||
.popups-icon--size-small {
|
||||
.cdx-mixin-css-icon-background( @size-icon-small );
|
||||
.cdx-mixin-css-icon-size( @size-icon-small );
|
||||
}
|
||||
|
||||
// FIXME: Upstream this to Codex with T342910
|
||||
.mwe-popups-overlay .cdx-button.cdx-button--icon-only,
|
||||
.mwe-popups .cdx-button.cdx-button--icon-only {
|
||||
|
|
|
|||
|
|
@ -203,12 +203,11 @@ export function createPagePreview( model ) {
|
|||
* @return {ext.popups.Preview}
|
||||
*/
|
||||
export function createEmptyPreview( model ) {
|
||||
const showTitle = false,
|
||||
extractMsg = mw.msg( 'popups-preview-no-preview' ),
|
||||
linkMsg = mw.msg( 'popups-preview-footer-read' );
|
||||
model.title = mw.msg( 'popups-preview-no-preview' );
|
||||
const linkMsg = mw.msg( 'popups-preview-footer-read' );
|
||||
|
||||
return {
|
||||
el: renderPreview( model, showTitle, extractMsg, linkMsg ),
|
||||
el: renderPreview( model, null, linkMsg ),
|
||||
hasThumbnail: false,
|
||||
isTall: false
|
||||
};
|
||||
|
|
@ -221,12 +220,11 @@ export function createEmptyPreview( model ) {
|
|||
* @return {ext.popups.Preview}
|
||||
*/
|
||||
export function createDisambiguationPreview( model ) {
|
||||
const showTitle = true,
|
||||
extractMsg = mw.msg( 'popups-preview-disambiguation' ),
|
||||
linkMsg = mw.msg( 'popups-preview-disambiguation-link' );
|
||||
const extractMsg = mw.msg( 'popups-preview-disambiguation' );
|
||||
const linkMsg = mw.msg( 'popups-preview-disambiguation-link' );
|
||||
|
||||
return {
|
||||
el: renderPreview( model, showTitle, extractMsg, linkMsg ),
|
||||
el: renderPreview( model, extractMsg, linkMsg ),
|
||||
hasThumbnail: false,
|
||||
isTall: false
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const templateHTML = `
|
|||
<a class="mwe-popups-extract"></a>
|
||||
<footer>
|
||||
<a class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only mwe-popups-settings-button">
|
||||
<span class="mw-ui-icon mw-ui-icon-small mw-ui-icon-settings"></span>
|
||||
<span class="popups-icon popups-icon--size-small mw-ui-icon-settings"></span>
|
||||
<span class="mwe-popups-settings-button-label"></span>
|
||||
</a>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
|
||||
// Same as the --pointer-height in popup.less
|
||||
@previewPointerHeight: 8px;
|
||||
@minHeight: @previewFooterHeight + @previewPointerHeight;
|
||||
|
||||
.mwe-popups {
|
||||
background: #fff;
|
||||
|
|
@ -168,7 +169,6 @@
|
|||
width: @popupWidth;
|
||||
|
||||
.mwe-popups-extract {
|
||||
@minHeight: @previewFooterHeight + @previewPointerHeight;
|
||||
// On short summaries, we want to avoid an overlap with the gradient.
|
||||
min-height: @minHeight;
|
||||
max-height: 202px - @previewFooterHeight - @popupPadding;
|
||||
|
|
@ -198,29 +198,6 @@
|
|||
margin-bottom: @popupPadding + @previewPointerHeight;
|
||||
}
|
||||
|
||||
&.mwe-popups-type-generic,
|
||||
&.mwe-popups-type-disambiguation {
|
||||
.mwe-popups-extract {
|
||||
min-height: auto;
|
||||
padding-top: 4px;
|
||||
margin-top: 0;
|
||||
margin-bottom: var( --margin-bottom );
|
||||
--margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.mwe-popups-read-link {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// When the user dwells on the 'There was an issue displaying this preview'
|
||||
// text, which is a link to the page, then highlight the 'Go to this page'
|
||||
// link too.
|
||||
.mwe-popups-extract:hover + footer .mwe-popups-read-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Triangles/Pointers */
|
||||
&.mwe-popups-no-image-pointer {
|
||||
&::before {
|
||||
|
|
@ -494,18 +471,14 @@
|
|||
// clip-path cutting off the .mwe-popups-extract's margin. We don't want
|
||||
// this to apply to elements with the .mwe-popups-image-pointer class
|
||||
// because the pokey is on the image.
|
||||
&:not( .flipped-y ):not( .flipped-x-y ):not( .mwe-popups-image-pointer ):not( .mwe-popups-type-disambiguation ) .mwe-popups-extract {
|
||||
&:not( .flipped-y ):not( .flipped-x-y ):not( .mwe-popups-image-pointer ) .mwe-popups-extract {
|
||||
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-container {
|
||||
padding-top: var( --pointer-height );
|
||||
|
||||
.mwe-popups-extract {
|
||||
margin-bottom: ~'calc( var( --margin-bottom ) - var( --pointer-height ) )';
|
||||
}
|
||||
.mwe-popups-extract {
|
||||
margin-bottom: ~'calc( @{minHeight} - var( --pointer-height ) )';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,13 @@ import { createNodeFromTemplate, escapeHTML } from '../templateUtil';
|
|||
|
||||
const templateHTML = `
|
||||
<div class="mwe-popups-container">
|
||||
<div class="mw-ui-icon mw-ui-icon-element"></div>
|
||||
<strong class="mwe-popups-title"></strong>
|
||||
<a class="mwe-popups-extract">
|
||||
<span class="mwe-popups-message"></span>
|
||||
<div class="mwe-popups-scroll">
|
||||
<strong class="mwe-popups-title">
|
||||
<span class="popups-icon"></span>
|
||||
</strong>
|
||||
<div class="mwe-popups-message"></div>
|
||||
</div>
|
||||
</a>
|
||||
<footer>
|
||||
<a class="mwe-popups-read-link"></a>
|
||||
|
|
@ -19,34 +22,34 @@ const templateHTML = `
|
|||
`;
|
||||
|
||||
/**
|
||||
* Render generic and disambiguation previews
|
||||
*
|
||||
* @param {ext.popups.PagePreviewModel} model
|
||||
* @param {boolean} showTitle
|
||||
* @param {string} extractMsg
|
||||
* @param {string|null} message
|
||||
* @param {string} linkMsg
|
||||
* @return {JQuery}
|
||||
*/
|
||||
export function renderPreview(
|
||||
model, showTitle, extractMsg, linkMsg
|
||||
model, message, linkMsg
|
||||
) {
|
||||
const popup = renderPopup( model.type, createNodeFromTemplate( templateHTML ) );
|
||||
|
||||
// The following classes are used here:
|
||||
// * mw-icon-preview-reference
|
||||
// * mw-icon-preview-unknown
|
||||
// * mw-icon-preview-generic
|
||||
// * mw-icon-preview-disambiguation
|
||||
popup.querySelector( '.mw-ui-icon' ).classList.add( `mw-ui-icon-preview-${model.type}` );
|
||||
popup.querySelector( '.popups-icon' ).classList.add( `mw-ui-icon-preview-${model.type}` );
|
||||
popup.querySelector( '.mwe-popups-extract' ).setAttribute( 'href', model.url );
|
||||
popup.querySelector( '.mwe-popups-message' ).innerHTML = escapeHTML( extractMsg );
|
||||
const messageElement = popup.querySelector( '.mwe-popups-message' );
|
||||
if ( message ) {
|
||||
messageElement.innerHTML = escapeHTML( message );
|
||||
} else {
|
||||
messageElement.remove();
|
||||
}
|
||||
const readLink = popup.querySelector( '.mwe-popups-read-link' );
|
||||
readLink.innerHTML = escapeHTML( linkMsg );
|
||||
readLink.setAttribute( 'href', model.url );
|
||||
const title = popup.querySelector( '.mwe-popups-title' );
|
||||
if ( showTitle ) {
|
||||
title.innerHTML = escapeHTML( model.title );
|
||||
} else {
|
||||
title.remove();
|
||||
}
|
||||
|
||||
title.innerHTML += escapeHTML( model.title );
|
||||
return popup;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,36 @@
|
|||
.mwe-popups {
|
||||
.mwe-popups-title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin: 0 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.mwe-popups-type-generic& {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mwe-popups-extract .popups-icon {
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
&.mwe-popups-type-generic,
|
||||
&.mwe-popups-type-disambiguation {
|
||||
.mwe-popups-extract {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.mwe-popups-read-link {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// When the user dwells on the 'There was an issue displaying this preview'
|
||||
// text, which is a link to the page, then highlight the 'Go to this page'
|
||||
// link too.
|
||||
.mwe-popups-extract:hover + footer .mwe-popups-read-link,
|
||||
.mwe-popups-read-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const templateHTML = `
|
|||
<div class="mwe-popups-extract">
|
||||
<div class="mwe-popups-scroll">
|
||||
<strong class="mwe-popups-title">
|
||||
<span class="mw-ui-icon mw-ui-icon-element"></span>
|
||||
<span class="popups-icon"></span>
|
||||
<span class="mwe-popups-title-placeholder"></span>
|
||||
</strong>
|
||||
<div class="mw-parser-output"></div>
|
||||
|
|
@ -63,7 +63,7 @@ export function renderReferencePreview(
|
|||
// * mw-ui-icon-reference-news
|
||||
// * mw-ui-icon-reference-note
|
||||
// * mw-ui-icon-reference-web
|
||||
el.querySelector( '.mwe-popups-title .mw-ui-icon' )
|
||||
el.querySelector( '.mwe-popups-title .popups-icon' )
|
||||
.classList.add( `mw-ui-icon-reference-${type}` );
|
||||
el.querySelector( '.mw-parser-output' )
|
||||
.innerHTML = model.extract;
|
||||
|
|
@ -83,8 +83,8 @@ export function renderReferencePreview(
|
|||
const otherNode = document.createElement( 'div' );
|
||||
otherNode.classList.add( 'mwe-collapsible-placeholder' );
|
||||
const icon = document.createElement( 'span' );
|
||||
icon.classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-icon-infoFilled' );
|
||||
const label = document.createElement( 'div' );
|
||||
icon.classList.add( 'popups-icon', 'mw-ui-icon-infoFilled' );
|
||||
const label = document.createElement( 'span' );
|
||||
label.classList.add( 'mwe-collapsible-placeholder-label' );
|
||||
label.textContent = mw.msg( 'popups-refpreview-collapsible-placeholder' );
|
||||
otherNode.appendChild( icon );
|
||||
|
|
@ -109,7 +109,7 @@ export function renderReferencePreview(
|
|||
const settingsButton = document.createElement( 'button' );
|
||||
settingsButton.classList.add( 'cdx-button', 'cdx-button--fake-button', 'cdx-button--fake-button--enabled', 'cdx-button--weight-quiet', 'cdx-button--icon-only', 'mwe-popups-settings-button' );
|
||||
const settingsIcon = document.createElement( 'span' );
|
||||
settingsIcon.classList.add( 'mw-ui-icon', 'mw-ui-icon-small', 'mw-ui-icon-settings' );
|
||||
settingsIcon.classList.add( 'popups-icon', 'popups-icon--size-small', 'mw-ui-icon-settings' );
|
||||
const settingsButtonLabel = document.createElement( 'span' );
|
||||
settingsButtonLabel.textContent = mw.msg( 'popups-settings-icon-gear-title' );
|
||||
settingsButton.append( settingsIcon );
|
||||
|
|
|
|||
|
|
@ -6,23 +6,9 @@
|
|||
}
|
||||
|
||||
.mwe-popups.mwe-popups-type-reference {
|
||||
.mwe-popups-title {
|
||||
// align icon with outer padding
|
||||
margin: 0 0 12px 0;
|
||||
|
||||
.mw-ui-icon {
|
||||
padding: 0 8px 0 0;
|
||||
|
||||
&:hover {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mwe-popups-title .mw-ui-icon-reference-note {
|
||||
// There is currently no "reference-note" icon specified in extension.json
|
||||
.mw-ui-icon-reference-note {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mwe-popups-extract {
|
||||
|
|
@ -68,14 +54,5 @@
|
|||
font-weight: bold;
|
||||
margin: 1em 0;
|
||||
position: relative;
|
||||
|
||||
.mw-ui-icon {
|
||||
margin-left: -0.78em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mwe-collapsible-placeholder-label {
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export function renderSettingsDialog( model ) {
|
|||
<header>
|
||||
<div>
|
||||
<button class='cdx-button cdx-button--weight-quiet cdx-button--icon-only'>
|
||||
<span class='mw-ui-icon mw-ui-icon-popups-close close'></span>
|
||||
<span class='popups-icon mw-ui-icon-popups-close close'></span>
|
||||
<span>${closeLabel}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,7 @@ export function renderSettingsDialog( model ) {
|
|||
</form>
|
||||
</main>
|
||||
<div class='mwe-popups-settings-help' style='display:none;'>
|
||||
<div class="mw-ui-icon mw-ui-icon-footer"></div>
|
||||
<div class="popups-icon mw-ui-icon-footer"></div>
|
||||
<p>${helpText}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@
|
|||
|
||||
// Icon is larger than mw-ui-icon-large
|
||||
// Thus we hack it to get it to the size we want.
|
||||
.mw-ui-icon::before,
|
||||
.mw-ui-icon {
|
||||
.popups-icon::before,
|
||||
.popups-icon {
|
||||
background-size: contain;
|
||||
width: @width-popups-settings-help-icon;
|
||||
max-width: none;
|
||||
|
|
|
|||
|
|
@ -198,13 +198,13 @@ QUnit.test( 'createEmptyPreview(model)', ( assert ) => {
|
|||
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-title' ).text().trim(),
|
||||
'',
|
||||
'<popups-preview-no-preview>',
|
||||
'Empty preview title is hidden.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-extract' ).text().trim(),
|
||||
'<popups-preview-no-preview>',
|
||||
'Empty preview extract is correct.'
|
||||
$( emptyPreview.el ).find( '.mwe-popups-message' ).length,
|
||||
0,
|
||||
'No preview message text.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-read-link' ).text().trim(),
|
||||
|
|
@ -236,13 +236,13 @@ QUnit.test( 'createEmptyPreview(null model)', ( assert ) => {
|
|||
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-title' ).text().trim(),
|
||||
'',
|
||||
'<popups-preview-no-preview>',
|
||||
'Empty preview title is hidden.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-extract' ).text().trim(),
|
||||
'<popups-preview-no-preview>',
|
||||
'Empty preview extract is correct.'
|
||||
$( emptyPreview.el ).find( '.mwe-popups-message' ).length,
|
||||
0,
|
||||
'No preview message text.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mwe-popups-read-link' ).text().trim(),
|
||||
|
|
@ -269,8 +269,8 @@ QUnit.test( 'createPreviewWithType(model with unknown type)', ( assert ) => {
|
|||
'Popup type is safely espaced'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( emptyPreview.el ).find( '.mw-ui-icon' ).attr( 'class' ),
|
||||
'mw-ui-icon mw-ui-icon-element mw-ui-icon-preview-unknown',
|
||||
$( emptyPreview.el ).find( '.popups-icon' ).attr( 'class' ),
|
||||
'popups-icon mw-ui-icon-preview-unknown',
|
||||
'Icon type is safely espaced'
|
||||
);
|
||||
} );
|
||||
|
|
@ -305,9 +305,9 @@ QUnit.test( 'createDisambiguationPreview(model)', ( assert ) => {
|
|||
'Preview title is show.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( preview.el ).find( '.mwe-popups-extract' ).text().trim(),
|
||||
$( preview.el ).find( '.mwe-popups-message' ).text().trim(),
|
||||
'<popups-preview-disambiguation>',
|
||||
'Preview extract is correct.'
|
||||
'Preview message is correct.'
|
||||
);
|
||||
assert.strictEqual(
|
||||
$( preview.el ).find( '.mwe-popups-read-link' ).text().trim(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue