Create mobile thanks using the mobile library

The thanks icon had styling issues as it didn't use the mobile
icon and button fundamental components.

The icon should also be inside the button, the element should not
be both a button and an icon.

Bug: T229440
Change-Id: I0136466fe1452f904961b89ae7677fc1a511adab
This commit is contained in:
jdlrobson 2019-09-13 11:32:59 -07:00 committed by Pmiazga
parent eae0f237df
commit 7a7f751b42
2 changed files with 18 additions and 4 deletions

View file

@ -65,7 +65,7 @@
"ResourceModules": {
"ext.thanks.images": {
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-{name}:before",
"selector": ".mw-ui-icon-thanks-{name}:before",
"defaultColor": "#fff",
"images": {
"userTalk": {
@ -127,6 +127,7 @@
"thanks-thanked-notice"
],
"dependencies": [
"mobile.startup",
"ext.thanks.images",
"mediawiki.api",
"mediawiki.jqueryMsg",

View file

@ -1,6 +1,9 @@
( function () {
// To allow users to cancel a thanks in the event of an accident, the action is delayed.
var THANKS_DELAY = 2000,
mobile = mw.mobileFrontend.require( 'mobile.startup' ),
Button = mobile.Button,
Icon = mobile.Icon,
msgOptions = {
// tag ensures that only one message in workflow is shown at any time
tag: 'thanks'
@ -59,9 +62,19 @@
*/
function createThankLink( name, rev, gender ) {
var timeout,
$button = $( '<button>' ).addClass(
'mw-mf-action-button mw-ui-button mw-ui-progressive mw-ui-icon mw-ui-icon-before mw-ui-icon-userTalk'
).text( mw.message( 'thanks-button-thank', mw.user, gender ).text() );
button = new Button( {
progressive: true,
additionalClassNames: 'mw-mf-action-button'
} ),
$button = button.$el;
// append icon
new Icon( {
name: 'userTalk',
glyphPrefix: 'thanks',
hasText: true,
label: mw.message( 'thanks-button-thank', mw.user, gender ).text()
} ).$el.appendTo( $button );
// Don't make thank button for self
if ( name === mw.config.get( 'wgUserName' ) ) {