From 7a7f751b424a2329875bbd8cd9ad8d33f2b261e1 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 13 Sep 2019 11:32:59 -0700
Subject: [PATCH] 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
---
 extension.json                   |  3 ++-
 modules/ext.thanks.mobilediff.js | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/extension.json b/extension.json
index b92141b7..fe11d70b 100644
--- a/extension.json
+++ b/extension.json
@@ -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",
diff --git a/modules/ext.thanks.mobilediff.js b/modules/ext.thanks.mobilediff.js
index 443d2789..a384e1c2 100644
--- a/modules/ext.thanks.mobilediff.js
+++ b/modules/ext.thanks.mobilediff.js
@@ -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' ) ) {