From 809a9726763dd04c2cecc67fb4fc78646e9e7708 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Tue, 21 Sep 2021 14:56:09 -0500
Subject: [PATCH] Fix sticky header language button

- Fixes blank sticky header language button when no languages are present
- Adds arrow to sticky header language button

Bug: T289815
Change-Id: I36dc5fb0aad9c3ca1fced0d46e5167e8707f6731
---
 includes/SkinVector.php                       |  2 +-
 .../components/LanguageButton.less            | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 3e8262f..57cc0ba 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -325,7 +325,7 @@ class SkinVector extends SkinMustache {
 	 */
 	private function getStickyHeaderData() {
 		return [
-			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
+			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : null,
 			'data-button-start' => [
 				'href' => '#p-search',
 				'label' => $this->msg( 'search' ),
diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less
index 07f5c34..185af44 100644
--- a/resources/skins.vector.styles/components/LanguageButton.less
+++ b/resources/skins.vector.styles/components/LanguageButton.less
@@ -68,3 +68,24 @@
 #p-lang-btn.mw-portlet-empty {
 	display: none;
 }
+
+#p-lang-btn-sticky-header {
+	@button-padding: 12px;
+	@arrow-width: 18px;
+	position: relative;
+	padding-right: calc( @button-padding + @arrow-width );
+
+	&:after {
+		content: '';
+		background-image: url( ../common/images/arrow-down.svg );
+		background-position: 100% 50%;
+		background-repeat: no-repeat;
+		position: absolute;
+		top: 0;
+		right: @button-padding;
+		bottom: 0;
+		width: @arrow-width;
+		// Modify the color of the image from the default #202122 to approx. #404244 to match the text.
+		opacity: 0.84;
+	}
+}