From bdb7b9c3d3aa922b170cd2d6916b5bfb5be77941 Mon Sep 17 00:00:00 2001
From: Niharika Kohli <niharikakohli29@gmail.com>
Date: Tue, 30 Sep 2014 21:00:53 +0530
Subject: [PATCH] Compact Links: Redesign the more languages button

Change-Id: Ie4d1cb5bf89ac47bac141b0f5a83452cfa9a0783
---
 i18n/en.json                               |  4 ++--
 resources/css/ext.uls.compactlinks.css     | 21 ++++++++++-----------
 resources/images/compact-links-trigger.svg |  1 +
 resources/js/ext.uls.compactlinks.js       | 10 +++-------
 4 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 resources/images/compact-links-trigger.svg

diff --git a/i18n/en.json b/i18n/en.json
index 72aeaefe..1f9d8639 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -60,7 +60,7 @@
 	"ext-uls-input-disable-notification-info-personal": "You can enable the input tools at any time from the language settings.",
 	"ext-uls-input-disable-notification-info-interlanguage": "You can enable the input tools at any time from the language settings next to the language list.",
 	"ext-uls-language-settings-applying": "Applying...",
-	"ext-uls-compact-link-count": "{{PLURAL:$1|One more language|$1 more languages}}",
+	"ext-uls-compact-link-count": "{{PLURAL:$1|One more|$1 more}}",
 	"apihelp-languagesearch-description": "Search for language names in any script.",
 	"apihelp-languagesearch-param-search": "Search string.",
 	"apihelp-languagesearch-param-typos": "Number of spelling mistakes allowed in the search string.",
@@ -71,4 +71,4 @@
 	"apihelp-ulslocalization-param-language": "Language string.",
 	"apihelp-ulslocalization-example-1": "Get Tamil localization",
 	"apihelp-ulslocalization-example-2": "Get Hindi localization"
-}
+}
\ No newline at end of file
diff --git a/resources/css/ext.uls.compactlinks.css b/resources/css/ext.uls.compactlinks.css
index 56760976..6d68408d 100644
--- a/resources/css/ext.uls.compactlinks.css
+++ b/resources/css/ext.uls.compactlinks.css
@@ -1,21 +1,20 @@
-#more-lang-label {
-	color: #8b8989;
-	display: block;
-	font-size: 12px;
-	line-height: 1.2;
-	margin: 5px 0;
-}
-
 #p-lang .body ul .uls-trigger,
 #p-lang .pBody ul .uls-trigger {
 	background-image: none;
 	padding: 0;
 }
 
-.mw-interlanguage-selector {
+.mw-interlanguage-selector,
+.mw-interlanguage-selector:active {
 	cursor: pointer;
-	margin: 2px 0;
-	padding: 0 8px;
+	padding: 4px 6px 4px 25px;
+	font-size: 13px;
+	font-weight: 400;
+	background-image: url( ../images/compact-links-trigger.svg );
+	background-size: 17px;
+	background-repeat: no-repeat;
+	background-position: 9% 8%;
+	margin-top: 4px;
 }
 
 .interlanguage-uls-menu:after,
diff --git a/resources/images/compact-links-trigger.svg b/resources/images/compact-links-trigger.svg
new file mode 100644
index 00000000..1161d4f2
--- /dev/null
+++ b/resources/images/compact-links-trigger.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" enable-background="new 0 0 612 792"><g fill="#777"><path d="M291.3 439.4c-39.5-38.9-73.9-72.7-93.7-150.5h138.4v-58.6h-138.4v-77.1h-59.3v77.8h-138.3v58.7h138.3v19.8c-19.7 76.9-43.3 126-138.3 173.8l19.8 58.7c89.9-48.4 137.1-107.7 158.1-175.3 19.8 51 53.5 91.8 91.8 130l21.6-57.3zM473.7 250h-79l-138.4 388.9h59.3l39.5-116.7h158.1l39.5 116.7h59.3l-138.3-388.9zm-98.8 214.2l59.3-155.5 59.3 155.6-118.6-.1z"/></g></svg>
\ No newline at end of file
diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js
index 20c44e9f..fe06882e 100644
--- a/resources/js/ext.uls.compactlinks.js
+++ b/resources/js/ext.uls.compactlinks.js
@@ -287,20 +287,16 @@
 		 * Add the trigger at the bottom of the language list
 		 */
 		addTrigger: function () {
-			var $trigger, $triggerLabel;
+			var $trigger;
 
 			$trigger = $( '<button>' )
 				.addClass( 'mw-interlanguage-selector mw-ui-button active' )
-				.html( '&#8230' ); // '…'
-
-			$triggerLabel = $( '<label>' )
-				.attr( 'id', 'more-lang-label' )
-				.text( $.i18n(
+				.html( $.i18n(
 					'ext-uls-compact-link-count',
 					mw.language.convertNumber( this.listSize - this.compactSize )
 				) );
 
-			this.$interlanguageList.append( $trigger, $triggerLabel );
+			this.$interlanguageList.append( $trigger );
 			this.$trigger = $trigger;
 		},