From f083eb271671cfee34f4835adacb78789d218a44 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Mon, 1 Feb 2021 14:56:31 -0800
Subject: [PATCH] Add language icon to language button

The sidebar currently uses mw-ui-icon so we continue this
practice, however we provide a general rule to ensure all icons
rendered through it default to 20x20. This didn't impact the side
bar icon as that already specifies a height of 20px.

Bug: T268241
Change-Id: I6f8e8400da048a97cbf59c3e6ad918763fc91041
---
 includes/SkinVector.php                       |  1 +
 includes/templates/Menu.mustache              |  2 +-
 .../skins.vector.styles/LanguageButton.less   | 19 +++++++++++++++++++
 resources/skins.vector.styles/skin.less       |  1 +
 skin.json                                     | 15 ++++++++++++++-
 skinStyles/mediawiki.ui.icon.less             |  6 ++++++
 6 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 resources/skins.vector.styles/LanguageButton.less
 create mode 100644 skinStyles/mediawiki.ui.icon.less

diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 6d2812d..a99fdcc 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -236,6 +236,7 @@ class SkinVector extends SkinMustache {
 				'vector-language-button-label',
 				count( $this->getLanguages() )
 			)->parse();
+			$portletData['icon'] = 'language';
 		}
 		$class = $portletData['class'];
 		$portletData['class'] = trim( "$class $extraClasses[$type]" );
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index d810c9e..917c668 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -8,7 +8,7 @@
 	{{#is-dropdown}}
 	<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<h3 id="{{id}}-label">
+	<h3 id="{{id}}-label" {{#icon}}class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-{{.}}"{{/icon}}>
 		<span>{{label}}</span>
 	</h3>
 	<div class="vector-menu-content">
diff --git a/resources/skins.vector.styles/LanguageButton.less b/resources/skins.vector.styles/LanguageButton.less
new file mode 100644
index 0000000..c66ac37
--- /dev/null
+++ b/resources/skins.vector.styles/LanguageButton.less
@@ -0,0 +1,19 @@
+@import 'mediawiki.ui/mixins.buttons.less';
+
+// mw-body-header class can be removed when language button is the default.
+// e.g. upon removal of SkinVector::isLanguagesInHeader
+.mw-body-header .mw-portlet-lang {
+	h3 {
+		padding-right: 40px;
+	}
+
+	.vector-menu-content {
+		top: auto;
+		right: 0;
+		box-sizing: border-box;
+	}
+
+	.after-portlet {
+		margin-top: 8px;
+	}
+}
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index c1676c4..a295f88 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -18,6 +18,7 @@
 	@import 'TabWatchstarLink.less';
 	@import 'MenuDropdown.less';
 	@import 'MenuPortal.less';
+	@import 'LanguageButton.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';
 	@import 'Footer.less';
diff --git a/skin.json b/skin.json
index eaec31f..1519fb2 100644
--- a/skin.json
+++ b/skin.json
@@ -26,6 +26,7 @@
 					],
 					"styles": [
 						"skins.vector.styles",
+						"skins.vector.icons",
 						"mediawiki.ui.icon"
 					],
 					"messages": [
@@ -114,6 +115,17 @@
 			],
 			"styles": [ "resources/skins.vector.styles.responsive.less" ]
 		},
+		"skins.vector.icons": {
+			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
+			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
+			"useDataURI": false,
+			"defaultColor": "#54595d",
+			"class": "ResourceLoaderOOUIIconPackModule",
+			"variants": [],
+			"icons": [
+				"language"
+			]
+		},
 		"skins.vector.js": {
 			"packageFiles": [
 				"resources/skins.vector.js/skin.js",
@@ -171,7 +183,8 @@
 			"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
 			"+oojs-ui-core.styles": "skinStyles/ooui.less",
 			"mediawiki.special": "skinStyles/mediawiki.special.less",
-			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
+			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
+			"+mediawiki.ui.icon": "skinStyles/mediawiki.ui.icon.less"
 		}
 	},
 	"config": {
diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less
new file mode 100644
index 0000000..9fb3bef
--- /dev/null
+++ b/skinStyles/mediawiki.ui.icon.less
@@ -0,0 +1,6 @@
+// The .mw-page-container class is used to restrict this to the modern Vector.
+// This element is not needed in legacy Vector.
+.mw-page-container .mw-ui-icon:before {
+	// mw-ui-icon in core defaults to 24x24. The style guide now requests 20x20.
+	background-size: 20px auto;
+}