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

Add default OOUI reference icon to all reference popups

Browse source 
I tried hard to keep the CSS as small and robust as possible. The
icon will be align with the text by adding a negativ margin. With
that we also decided against using RTL and LTR specific icons that
are positioned at the edge of the canvas for now.

Bug: T213907
Change-Id: I98888114e1c50e249cf31e71749323bd4f69da3f
This commit is contained in:
Thiemo Kreuz 2019-01-24 18:48:13 +01:00 committed by WMDE-Fisch
parent bb60d5b716
commit 0c889c4cd4
6 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
extension.json
View file

@ -100,7 +100,8 @@
"ltr": "resources/ext.popups.images/multiple-articles-ltr.svg",
"rtl": "resources/ext.popups.images/multiple-articles-rtl.svg"
}
}
},
"preview-reference": "resources/ext.popups.images/reference.svg"
}
},
"ext.popups": {

BIN
resources/dist/index.js vendored
View file

Binary file not shown.

BIN
resources/dist/index.js.map.json vendored
View file

Binary file not shown.

7
resources/ext.popups.images/reference.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>
reference
</title>
<path d="M15 1v9l-2.78-2.78L9.44 10V1H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 270 B

5
src/ui/templates/referencePreview/referencePreview.js
View file

@ -20,7 +20,10 @@ export function renderReferencePreview(
return renderPopup( model.type,
`
<strong class='mwe-popups-title'>${ title }</strong>
<strong class='mwe-popups-title'>
<span class='mw-ui-icon mw-ui-icon-element mw-ui-icon-preview-reference'></span>
${ title }
</strong>
<div class='mwe-popups-extract'>
<span class='mwe-popups-message'>${ model.extract }</span>
</div>

22
src/ui/templates/referencePreview/referencePreview.less
View file

@ -1,5 +1,21 @@
.mwe-popups-type-reference {
.mwe-popups-title {
margin-top: @popupPadding;
.mwe-popups-type-reference .mwe-popups-title {
margin-top: @popupPadding;
.mw-ui-icon {
vertical-align: middle;
&.mw-ui-icon-element {
min-width: @iconSize;
width: @iconSize;
&:before {
margin: 0;
}
}
&.mw-ui-icon-preview-reference {
/* align narrow icon with the text */
margin-left: -2px;
}
}
}