From a3c63f1efc2e584dfe991e3803791cd03a54138e Mon Sep 17 00:00:00 2001
From: Santhosh Thottingal <santhosh.thottingal@gmail.com>
Date: Thu, 18 Feb 2016 12:47:44 +0530
Subject: [PATCH] Update ULS settings UI style to mediawiki.ui style

The ext.uls.buttons style can be removed but Translate extension use that.
Once it is separated we can remove it from ULS.

Testplan:
Use ULS settings and notice the style difference of buttons, checkboxes
and radio buttons. No functionality should be affected and UI should not
be broken in any ways.

This was once attempted in Id186ece6513f154e0388bc4170c21bdabb59038a
but we had to revert because of incompleteness

Bug: T52599
Bug: T127020
Change-Id: Ibbb2068b5036537f298fad6c49169a5b986304d5
---
 extension.json                             | 11 ++++++---
 resources/css/ext.uls.css                  |  7 ++++--
 resources/css/ext.uls.displaysettings.less | 22 ------------------
 resources/css/ext.uls.languagesettings.css |  5 ++++
 resources/js/ext.uls.displaysettings.js    | 27 ++++++++++++----------
 resources/js/ext.uls.inputsettings.js      | 27 ++++++++++------------
 resources/js/ext.uls.languagesettings.js   |  4 ++--
 7 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/extension.json b/extension.json
index 61fd58ae..cc51b85b 100644
--- a/extension.json
+++ b/extension.json
@@ -116,7 +116,9 @@
 				"ext.uls.mediawiki",
 				"ext.uls.webfonts",
 				"mediawiki.api.parse",
-				"mediawiki.Uri"
+				"mediawiki.Uri",
+				"mediawiki.ui.checkbox",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -181,7 +183,9 @@
 				"ext.uls.ime",
 				"ext.uls.languagesettings",
 				"ext.uls.mediawiki",
-				"jquery.ime"
+				"jquery.ime",
+				"mediawiki.ui.button",
+				"mediawiki.ui.radio"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -211,7 +215,8 @@
 				"ext.uls.buttons",
 				"ext.uls.messages",
 				"ext.uls.preferences",
-				"jquery.uls.grid"
+				"jquery.uls.grid",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index e02dcf54..a0fa04df 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -23,9 +23,12 @@
 }
 
 .uls-ui-languages button {
-	width: 23%;
+	width: 22%;
 	text-overflow: ellipsis;
-	margin-right: 4%;
+	margin-right: 2%;
+	white-space: nowrap;
+	overflow: hidden;
+	padding: 0.5em 0;
 }
 
 button.uls-more-languages {
diff --git a/resources/css/ext.uls.displaysettings.less b/resources/css/ext.uls.displaysettings.less
index 01dedd47..d8204705 100644
--- a/resources/css/ext.uls.displaysettings.less
+++ b/resources/css/ext.uls.displaysettings.less
@@ -21,24 +21,6 @@ div.display-settings-block {
 	z-index: 1;
 }
 
-.uls-button-group > button.button {
-	border-radius: 0;
-	float: left;
-	padding: 8px 10px;
-	min-width: 80px;
-	margin: 0;
-}
-
-.uls-button-group > button.button:first-child {
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-}
-
-.uls-button-group > button.button:last-child {
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
 .ext-uls-sub-panel {
 	border-top: 1px solid #EEEEEE;
 	padding-top: 25px;
@@ -64,10 +46,6 @@ div.display-settings-block {
 	font-size: 10pt;
 }
 
-.uls-font-select {
-	min-height: 16pt;
-}
-
 .uls-content-fonts:hover,
 .uls-ui-fonts:hover {
 	background-color: #F6F6F6;
diff --git a/resources/css/ext.uls.languagesettings.css b/resources/css/ext.uls.languagesettings.css
index 223d1a1a..4711c5c2 100644
--- a/resources/css/ext.uls.languagesettings.css
+++ b/resources/css/ext.uls.languagesettings.css
@@ -120,6 +120,11 @@
 	font-size: 10pt;
 }
 
+/* mediawiki.ui does not have a pressed state style. */
+#languagesettings-panels .mw-ui-pressed {
+	background-color: #D8D8D8;
+}
+
 .checkbox input[type="checkbox"] {
 	margin-left: 0;
 }
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 436ad276..555bfd1d 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -24,9 +24,10 @@
 
 		+ '<div class="row">' // Tab switcher buttons
 		+ '<div class="twelve columns uls-display-settings-tab-switcher">'
-		+ '<div class="uls-button-group">'
-		+ '<button id="uls-display-settings-language-tab" class="button down" data-i18n="ext-uls-display-settings-language-tab"></button>'
-		+ '<button id="uls-display-settings-fonts-tab" class="button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
+		+ '<div class="uls-button-group mw-ui-button-group">'
+		+ '<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-pressed" '
+		+ 'data-i18n="ext-uls-display-settings-language-tab"></button>'
+		+ '<button id="uls-display-settings-fonts-tab" class="mw-ui-button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
 		+ '</div>'
 		+ '</div>'
 		+ '</div>'
@@ -81,14 +82,16 @@
 		// Webfonts enabling checkbox with label
 		+ '<div class="row">'
 		+ '<div class="eleven columns">'
-		+ '<label class="checkbox">'
+		+ '<div class="mw-ui-checkbox">'
 		+ '<input type="checkbox" id="webfonts-enable-checkbox" />'
+		+ '<label class="checkbox" for="webfonts-enable-checkbox" >'
 		+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
 		+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> '
 		+ '<a target="_blank" href="https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>'
 		+ '</label>'
 		+ '</div>'
 		+ '</div>'
+		+ '</div>'
 
 		+ '</div>'; // End font settings section
 
@@ -243,8 +246,8 @@
 				return function () {
 					displaySettings.markDirty();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
-					$( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
-					button.addClass( 'down' );
+					$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
+					button.addClass( 'mw-ui-pressed' );
 					displaySettings.prepareUIFonts();
 					displaySettings.preview( displaySettings.uiLanguage );
 				};
@@ -254,7 +257,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -262,7 +265,7 @@
 					} );
 
 				if ( language === this.uiLanguage ) {
-					$button.addClass( 'down' );
+					$button.addClass( 'mw-ui-pressed' );
 				}
 
 				$button.data( 'language', language );
@@ -283,7 +286,7 @@
 			$languages = this.$template.find( 'div.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for display settings
@@ -581,7 +584,7 @@
 			$tabButtons.on( 'click', function () {
 				var $button = $( this );
 
-				if ( $button.hasClass( 'down' ) ) {
+				if ( $button.hasClass( 'mw-ui-pressed' ) ) {
 					return;
 				}
 
@@ -596,8 +599,8 @@
 				} );
 
 				displaySettings.$parent.position();
-				$tabButtons.filter( '.down' ).removeClass( 'down' );
-				$button.addClass( 'down' );
+				$tabButtons.removeClass( 'mw-ui-pressed' );
+				$button.addClass( 'mw-ui-pressed' );
 
 			} );
 
diff --git a/resources/js/ext.uls.inputsettings.js b/resources/js/ext.uls.inputsettings.js
index d628ae0a..2a47444f 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -49,9 +49,9 @@
 
 		// Disable IME system button
 		+ '<div class="row">'
-		+ '<div class="eleven columns button uls-input-settings-disable-info"></div>'
-		+ '<div class="six columns button uls-input-settings-toggle">'
-		+ '<button class="active green button uls-input-toggle-button"></button>'
+		+ '<div class="eleven columns uls-input-settings-disable-info"></div>'
+		+ '<div class="ten columns uls-input-settings-toggle">'
+		+ '<button class="active mw-ui-constructive mw-ui-button uls-input-toggle-button"></button>'
 		+ '</div>'
 		+ '</div>';
 
@@ -120,7 +120,7 @@
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
 
-			$imeListContainer.find( 'label' ).remove();
+			$imeListContainer.empty();
 
 			if ( !imes ) {
 				$imeListContainer.append( $( '<label>' )
@@ -168,10 +168,7 @@
 				return $();
 			}
 
-			$imeLabel = $( '<label>' ).attr( {
-				'for': imeId,
-				'class': 'imelabel'
-			} );
+			$imeLabel = $( '<label>' ).attr( 'for', imeId );
 
 			$inputMethodItem = $( '<input type="radio">' ).attr( {
 				name: 'ime',
@@ -180,8 +177,6 @@
 			} )
 			.prop( 'checked', selected );
 
-			$imeLabel.append( $inputMethodItem );
-
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
 				description = '';
@@ -210,7 +205,9 @@
 				$helplink
 			);
 
-			return $imeLabel;
+			return $( '<div>' )
+				.addClass( 'mw-ui-radio twelve columns' )
+				.append( $inputMethodItem, $imeLabel );
 		},
 
 		/**
@@ -275,8 +272,8 @@
 						$.ime.preferences.setLanguage( language );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .button' ).removeClass( 'down' );
-					button.addClass( 'down' );
+					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
+					button.addClass( 'mw-ui-pressed' );
 					inputSettings.prepareInputmethods( language );
 				};
 			}
@@ -287,7 +284,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -319,7 +316,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for ime settings
diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js
index c18b6690..a27a67ec 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -35,8 +35,8 @@
 	// Apply and Cancel buttons
 	buttonsRow = '<div class="row language-settings-buttons">' +
 		'<div class="eleven columns">' +
-		'<button class="button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
-		'<button class="button active blue uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+		'<button class="mw-ui-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
+		'<button class="mw-ui-button mw-ui-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
 		'</div>' +
 		'</div>' +
 		'</div>';