From 91eff55c8c1ee44c6db4e27ad54ca417387ae51c Mon Sep 17 00:00:00 2001
From: Santhosh Thottingal <santhosh.thottingal@gmail.com>
Date: Mon, 30 Mar 2015 10:37:26 +0530
Subject: [PATCH] Revert "Update inputs to use mw-ui styles"

This reverts commit 30d26a4fd2a239f8874f1983972a266246b79548.

Some issues in this patch were identified, see T52599.

Reverting so that MLEB can be released and issues fixed and
tested properly after the release.

Change-Id: I35c1eb2db5ead8ca75dc2724997d789c83c69b6d
---
 Resources.php                            |  4 +---
 resources/css/ext.uls.inputsettings.css  |  6 +++++-
 resources/js/ext.uls.displaysettings.js  | 26 ++++++++++++------------
 resources/js/ext.uls.inputsettings.js    | 25 ++++++++++-------------
 resources/js/ext.uls.languagesettings.js |  4 ++--
 5 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/Resources.php b/Resources.php
index a2298a55..4e0a8cf2 100644
--- a/Resources.php
+++ b/Resources.php
@@ -34,7 +34,6 @@ $wgResourceModules['ext.uls.displaysettings'] = array(
 		'ext.uls.mediawiki',
 		'ext.uls.webfonts',
 		'mediawiki.api.parse',
-		'mediawiki.ui.checkbox',
 	),
 ) + $resourcePaths;
 
@@ -102,7 +101,6 @@ $wgResourceModules['ext.uls.inputsettings'] = array(
 		'ext.uls.languagesettings',
 		'ext.uls.mediawiki',
 		'jquery.ime',
-		'mediawiki.ui.radio',
 	),
 ) + $resourcePaths;
 
@@ -131,6 +129,7 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
 	'scripts' => 'resources/js/ext.uls.languagesettings.js',
 	'styles' => 'resources/css/ext.uls.languagesettings.css',
 	'dependencies' => array(
+		'ext.uls.buttons',
 		'ext.uls.messages',
 		'ext.uls.preferences',
 		// The grid styles are used here,
@@ -255,7 +254,6 @@ $wgResourceModules['jquery.uls'] = array(
 		'jquery.i18n',
 		'jquery.uls.data',
 		'jquery.uls.grid',
-		'mediawiki.ui.input',
 	),
 ) + $resourcePaths;
 
diff --git a/resources/css/ext.uls.inputsettings.css b/resources/css/ext.uls.inputsettings.css
index bb9484c1..10658075 100644
--- a/resources/css/ext.uls.inputsettings.css
+++ b/resources/css/ext.uls.inputsettings.css
@@ -12,7 +12,7 @@ div.input-settings-block {
 }
 
 .imelabel {
-	display: inline;
+	display: block;
 	padding-bottom: 10px;
 	font-size: 10pt;
 	line-height: 16pt;
@@ -22,6 +22,10 @@ div.input-settings-block {
 	padding-left: 5px;
 }
 
+.imelabel input {
+	float: left;
+}
+
 .uls-ime-menu-settings-item {
 	background-color: #f0f0f0;
 	border-radius: 0 0 5px 5px;
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 4a06124b..3d90e05a 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -23,9 +23,9 @@
 
 		+ '<div class="row">' // Tab switcher buttons
 		+ '<div class="twelve columns uls-display-settings-tab-switcher">'
-		+ '<div class="uls-button-group mw-ui-button-group">'
-		+ '<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-checked" 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 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>'
 		+ '</div>'
 		+ '</div>'
@@ -79,9 +79,9 @@
 
 		// Webfonts enabling checkbox with label
 		+ '<div class="row">'
-		+ '<div class="eleven columns mw-ui-checkbox">'
+		+ '<div class="eleven columns">'
+		+ '<label class="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>'
@@ -242,8 +242,8 @@
 				return function () {
 					displaySettings.markDirty();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
-					$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-checked' );
-					button.addClass( 'mw-ui-checked' );
+					$( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
+					button.addClass( 'down' );
 					displaySettings.prepareUIFonts();
 					displaySettings.preview( displaySettings.uiLanguage );
 				};
@@ -253,7 +253,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[i];
 				$button = $( '<button>' )
-					.addClass( 'mw-ui-button uls-language-button autonym' )
+					.addClass( 'button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -261,7 +261,7 @@
 					} );
 
 				if ( language === this.uiLanguage ) {
-					$button.addClass( 'mw-ui-checked' );
+					$button.addClass( 'down' );
 				}
 
 				$button.data( 'language', language );
@@ -282,7 +282,7 @@
 			$languages = this.$template.find( 'div.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'mw-ui-button' ).text( '...' );
+				.addClass( 'button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for display settings
@@ -578,7 +578,7 @@
 			$tabButtons.on( 'click', function () {
 				var $button = $( this );
 
-				if ( $button.hasClass( 'mw-ui-checked' ) ) {
+				if ( $button.hasClass( 'down' ) ) {
 					return;
 				}
 
@@ -593,8 +593,8 @@
 				} );
 
 				displaySettings.$parent.position();
-				$tabButtons.filter( '.mw-ui-checked' ).removeClass( 'mw-ui-checked' );
-				$button.addClass( 'mw-ui-checked' );
+				$tabButtons.filter( '.down' ).removeClass( 'down' );
+				$button.addClass( 'down' );
 
 			} );
 
diff --git a/resources/js/ext.uls.inputsettings.js b/resources/js/ext.uls.inputsettings.js
index cd61fda0..c08de49f 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -48,9 +48,9 @@
 
 		// Disable IME system button
 		+ '<div class="row">'
-		+ '<div class="eleven columns uls-input-settings-disable-info"></div>'
-		+ '<div class="six columns uls-input-settings-toggle">'
-		+ '<button class="mw-ui-button uls-input-toggle-button"></button>'
+		+ '<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>'
 		+ '</div>';
 
@@ -119,7 +119,7 @@
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
 
-			$imeListContainer.find( 'div, label' ).remove();
+			$imeListContainer.find( 'label' ).remove();
 
 			if ( !imes ) {
 				$imeListContainer.append( $( '<label>' )
@@ -159,7 +159,7 @@
 		 * @return {Object} jQuery object corresponding to the input method item.
 		 */
 		renderInputmethodOption: function ( imeId, selected ) {
-			var $imeHolder, $imeLabel, name, description, $helplink, inputmethod, $inputMethodItem;
+			var $imeLabel, name, description, $helplink, inputmethod, $inputMethodItem;
 
 			if ( imeId !== 'system' && !$.ime.sources[imeId] ) {
 				// imeId not known for jquery.ime.
@@ -167,8 +167,6 @@
 				return $();
 			}
 
-			$imeHolder = $( '<div>' ).addClass( 'mw-ui-radio' );
-
 			$imeLabel = $( '<label>' ).attr( {
 				'for': imeId,
 				'class': 'imelabel'
@@ -181,7 +179,7 @@
 				checked: selected
 			} );
 
-			$imeHolder.append( $inputMethodItem );
+			$imeLabel.append( $inputMethodItem );
 
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
@@ -211,8 +209,7 @@
 				$helplink
 			);
 
-			$imeHolder.append( $imeLabel );
-			return $imeHolder;
+			return $imeLabel;
 		},
 
 		/**
@@ -277,8 +274,8 @@
 						$.ime.preferences.setLanguage( language );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-checked' );
-					button.addClass( 'mw-ui-checked' );
+					$( '.uls-ui-languages .button' ).removeClass( 'down' );
+					button.addClass( 'down' );
 					inputSettings.prepareInputmethods( language );
 				};
 			}
@@ -289,7 +286,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[i];
 				$button = $( '<button>' )
-					.addClass( 'mw-ui-button uls-language-button autonym' )
+					.addClass( 'button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -321,7 +318,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'mw-ui-button' ).text( '...' );
+				.addClass( '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 d1998562..5f93693a 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -34,8 +34,8 @@
 	// Apply and Cancel buttons
 	buttonsRow = '<div class="row language-settings-buttons">' +
 		'<div class="eleven columns">' +
-		'<button class="mw-ui-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
-		'<button class="mw-ui-button mw-ui-constuctive uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+		'<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>' +
 		'</div>' +
 		'</div>' +
 		'</div>';