golem
/
MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add icons for all the types of issues 

More hackery!
This adds some tests and ensures that our own icons are mapped to the
existing template icons.

Bug: T187916
Change-Id: I49073f22995c6730369235d6039939915ba2079c
This commit is contained in:
jdlrobson 2018-03-14 17:23:18 -07:00
parent eaa2692da0
commit cfd5fbbde8
13 changed files with 123 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/Minerva.hooks.php
View File

@ -91,9 +91,11 @@ class MinervaHooks {
'targets' => [ 'mobile', 'desktop' ],
'scripts' => [
// additional scaffolding (minus initialisation scripts)
'resources/skins.minerva.scripts/utils.js',
'resources/skins.minerva.scripts/DownloadIcon.js',
// test files
'tests/qunit/skins.minerva.scripts/test_DownloadIcon.js',
'tests/qunit/skins.minerva.scripts/test_utils.js',
'tests/qunit/skins.minerva.notifications.badge/test_NotificationBadge.js'
],
];

1
resources/skins.minerva.icons.images.scripts/issue-content.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-content</title><g id="ambox-content" fill="none" fill-rule="evenodd"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm1 16H9v-2h2v2zm0-4H9V4h2v8z" id="Page-1" fill="#FF5D01"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

1
resources/skins.minerva.icons.images.scripts/issue-default.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-default</title><g id="ambox-default" fill="none" fill-rule="evenodd"><path d="M19.638 17.36L11.528 3.3a1.85 1.85 0 0 0-1.53-1.09 1.85 1.85 0 0 0-1.52 1.09L.358 17.36C-.482 18.81.208 20 1.878 20h16.24c1.67 0 2.36-1.19 1.52-2.64zm-8.64-.36h-2v-2h2v2zm0-4h-2V7h2v6z" id="Page-1" fill="#54595D"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

1
resources/skins.minerva.icons.images.scripts/issue-delete.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-speedy</title><g id="ambox-speedy" fill="none" fill-rule="evenodd"><path d="M19.638 17.36L11.528 3.3a1.85 1.85 0 0 0-1.53-1.09 1.85 1.85 0 0 0-1.52 1.09L.358 17.36C-.482 18.81.208 20 1.878 20h16.24c1.67 0 2.36-1.19 1.52-2.64zm-8.64-.36h-2v-2h2v2zm0-4h-2V7h2v6z" id="Page-1" fill="#D33"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

1
resources/skins.minerva.icons.images.scripts/issue-move.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-move</title><g id="ambox-move" fill="none" fill-rule="evenodd"><path id="left" fill="#36C" d="M18 13H8V9l-6 5 6 5v-4h10z"/><path id="left-copy" fill="#D33" transform="rotate(-180 10 6)" d="M18 5H8V1L2 6l6 5V7h10z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

1
resources/skins.minerva.icons.images.scripts/issue-pov.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-content.ambox-pov</title><g id="ambox-content.ambox-pov" fill="none" fill-rule="evenodd"><path d="M5 9L1 4h8L5 9zm-2.659 5.251l-.592-1.91 16.41-5.092.592 1.91-16.41 5.092zM15 12l4 5h-8l4-5z" id="Combined-Shape" fill="#54595D"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

1
resources/skins.minerva.icons.images.scripts/issue-protection.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-protection</title><g id="ambox-protection" fill="none" fill-rule="evenodd"><path d="M16.07 8H15V5s0-5-5-5-5 5-5 5v3H3.93A1.93 1.93 0 0 0 2 9.93v8.15A1.93 1.93 0 0 0 3.93 20h12.14A1.93 1.93 0 0 0 18 18.07V9.93A1.93 1.93 0 0 0 16.07 8zM10 16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm3-8H7V5.5C7 4 7 2 10 2s3 2 3 3.5V8z" id="Page-1" fill="#54595D"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 455 B

1
resources/skins.minerva.icons.images.scripts/issue-speedy.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-speedy</title><g id="ambox-speedy" fill="none" fill-rule="evenodd"><path d="M19.638 17.36L11.528 3.3a1.85 1.85 0 0 0-1.53-1.09 1.85 1.85 0 0 0-1.52 1.09L.358 17.36C-.482 18.81.208 20 1.878 20h16.24c1.67 0 2.36-1.19 1.52-2.64zm-8.64-.36h-2v-2h2v2zm0-4h-2V7h2v6z" id="Page-1" fill="#D33"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

1
resources/skins.minerva.icons.images.scripts/issue-style.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>ambox-style</title><g id="ambox-style" fill="none" fill-rule="evenodd"><g id="Group" transform="translate(2 1)"><path d="M16.09 10.44c-1.37-.326-3.422-2.752-4.825-4.612l-8.81 6.155 2.33 3.335c.816 1.169 2.28 1.81 4.02 1.66a23.12 23.12 0 0 1-1.583-1.988.357.357 0 0 1 .585-.409c.336.48 1.083 1.467 1.849 2.266.838-.189 1.722-.553 2.615-1.121-1.297-.822-2.184-2.354-2.23-2.436a.357.357 0 0 1 .619-.355c.011.02.991 1.709 2.271 2.347.931-.66 1.61-1.302 2.102-1.891-2.096-.398-3.142-1.86-3.194-1.934a.357.357 0 0 1 .584-.41c.009.012.353.49 1.023.936.63.42 1.326.673 2.075.759.586-.88.758-1.583.807-1.961a.31.31 0 0 0-.239-.341z" id="Combined-Shape" fill="#F5A623" fill-rule="nonzero"/><path d="M9.716 3.65a.928.928 0 0 0-1.293-.229L6.024 5.096 2.65.265a.62.62 0 0 0-.862-.153L.265 1.175a.619.619 0 0 0-.153.862l3.375 4.832-2.333 1.63a.928.928 0 0 0-.23 1.292l1.212 1.735 8.796-6.144A44.037 44.037 0 0 1 9.716 3.65z" id="Shape" fill="#774B20"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

22
resources/skins.minerva.scripts/cleanuptemplates.js
View File

@ -3,6 +3,8 @@
( function () {
var action = mw.config.get( 'wgAction' ),
page = M.getCurrentPage(),
getIconFromAmbox = M.require( 'skins.minerva.scripts/utils' )
.getIconFromAmbox,
overlayManager = M.require( 'skins.minerva.scripts/overlayManager' ),
CleanupOverlay = M.require( 'mobile.issues/CleanupOverlay' );
@ -11,7 +13,10 @@
* friendly for mobile display.
* @param {Object} $box element to extract the message from
* @ignore
* @return {string} html of message.
* @typedef {object} IssueSummary
* @prop {string} icon HTML string.
* @prop {string} text HTML string.
* @return {IssueSummary}
*/
function extractMessage( $box ) {
var selector = '.mbox-text, .ambox-text',
@ -28,7 +33,10 @@
$( '<p>' ).html( contents ).appendTo( $container );
}
} );
return $container.html();
return {
icon: getIconFromAmbox( $box ).toHtmlString(),
text: $container.html()
};
}
/**
@ -61,16 +69,12 @@
$metadata.find( '.NavFrame' ).remove();
$metadata.each( function () {
var content,
var issue,
$this = $( this );
if ( $this.find( selector ).length === 0 ) {
content = extractMessage( $this );
if ( content ) {
issues.push( {
text: content
} );
}
issue = extractMessage( $this );
issues.push( issue );
}
} );

44
resources/skins.minerva.scripts/utils.js Normal file
View File

@ -0,0 +1,44 @@
( function ( M ) {
var Icon = M.require( 'mobile.startup/Icon' );
function getIconFromAmbox( $box ) {
var glyph,
names = [
'speedy',
'delete',
'protection',
'pov',
'move',
'style',
'content'
];
// since objects have no concept of ordering we repeat ourselves here
names.forEach( function ( name ) {
if ( !glyph && $box.hasClass( 'ambox-' + name ) ) {
// with a match, exit
glyph = name;
}
} );
glyph = glyph || 'default';
return new Icon( {
glyphPrefix: 'minerva',
name: 'issue-' + glyph
} );
}
/**
* @module skins.minerva.scripts/utils
*/
M.define( 'skins.minerva.scripts/utils', {
/**
* Extract an icon for use with the issue.
* @param {jQuery.Object} $box element to extract the icon from
* @return {Icon} representing the icon
*/
getIconFromAmbox: getIconFromAmbox
} );
}( mw.mobileFrontend ) );

9
skin.json
View File

@ -168,6 +168,14 @@
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-minerva-{name}:before",
"images": {
"issue-speedy": "resources/skins.minerva.icons.images.scripts/issue-speedy.svg",
"issue-delete": "resources/skins.minerva.icons.images.scripts/issue-delete.svg",
"issue-protection": "resources/skins.minerva.icons.images.scripts/issue-protection.svg",
"issue-default": "resources/skins.minerva.icons.images.scripts/issue-default.svg",
"issue-pov": "resources/skins.minerva.icons.images.scripts/issue-pov.svg",
"issue-style": "resources/skins.minerva.icons.images.scripts/issue-style.svg",
"issue-content": "resources/skins.minerva.icons.images.scripts/issue-content.svg",
"issue-move": "resources/skins.minerva.icons.images.scripts/issue-move.svg",
"download": "resources/skins.minerva.icons.images.scripts/download.svg"
}
},
@ -279,6 +287,7 @@
"resources/skins.minerva.scripts/mobileRedirect.js",
"resources/skins.minerva.scripts/search.js",
"resources/skins.minerva.scripts/references.js",
"resources/skins.minerva.scripts/utils.js",
"resources/skins.minerva.scripts/cleanuptemplates.js"
]
},

47
tests/qunit/skins.minerva.scripts/test_utils.js Normal file
View File

@ -0,0 +1,47 @@
( function ( M ) {
var utils = M.require( 'skins.minerva.scripts/utils' ),
getIconFromAmbox = utils.getIconFromAmbox;
QUnit.module( 'Minerva utils' );
QUnit.test( 'getIconFromAmbox', function ( assert ) {
var tests = [
[
'', 'issue-default'
],
[
'ambox', 'issue-default'
],
[
'ambox-content ambox-speedy', 'issue-speedy'
],
[
'ambox-content ambox-delete', 'issue-delete'
],
[
'ambox-content', 'issue-content'
],
[
'ambox-content ambox-pov', 'issue-pov'
],
[
'ambox-content ambox-style', 'issue-style'
],
[
'ambox-content ambox-move', 'issue-move'
],
[
'ambox-content ambox-protection', 'issue-protection'
]
];
tests.forEach( function ( test, i ) {
var $box = $( '<div>' );
$box.addClass( test[0] );
assert.strictEqual(
getIconFromAmbox( $box ).options.name,
test[1],
i
);
} );
} );
}( mw.mobileFrontend ) );