Update the inputmethod settings as per design

Design: http://dl.dropbox.com/u/30377416/i18n/visual/input-settings.pdf

Do not show the language list and input methods if IME is disabled
And do not show descriptive text if IME is enabled.

Change-Id: I49e07cbadf7e253e4fb0d5a59029d9884308c06a

i18n/en.json

@@ -36,7 +36,6 @@
 "jquery-ime-help": "Help",
 "ext-uls-input-disable": "Disable input method tools",
 "ext-uls-input-enable": "Enable input method tools",
-"ext-uls-input-disable-info": "Input method tools are disabled.",
+"ext-uls-input-disable-info": "Input method tools are disabled."
-"ext-uls-input-enable-info": "Input method tools are enabled."
 }
 

i18n/qqq.json

@@ -37,6 +37,5 @@
 	"jquery-ime-help": "Text for help link",
 	"ext-uls-input-disable": "Label for disable input tools button",
 	"ext-uls-input-enable": "Label for enable input tools button",
-	"ext-uls-input-disable-info": "Info text for disable input tools button",
+	"ext-uls-input-disable-info": "Info text for the disable input tools button"
-	"ext-uls-input-enable-info": "Info text for  disable input tools button"
 }

resources/js/ext.uls.inputsettings.js

@@ -28,7 +28,7 @@
 		+ '</div>'
 
 		// "Language for ime", title above the buttons row
-		+ '<div class="row">'
+		+ '<div class="row uls-input-settings-languages-title">'
 		+ '<div class="eleven columns">'
 		+ '<h4 data-i18n="ext-uls-input-settings-ui-language"></h4>'
 		+ '</div>'
@@ -88,8 +88,18 @@
 			this.$parent.$settingsPanel.empty();
 			this.$imes = $( 'body' ).data( 'ime' );
 			this.$parent.$settingsPanel.append( this.$template );
+			if ( $.ime.preferences.isEnabled() ) {
 				this.prepareLanguages();
 				this.prepareInputmethods( this.imeLanguage );
+			} else {
+
+				// Hide the language list
+				this.$template.find( 'div.uls-input-settings-languages-title' ).hide();
+				this.$template.find( 'div.uls-ui-languages' ).hide();
+
+				//  Hide input methods
+				this.$template.find( 'div.uls-input-settings-inputmethods-list' ).hide();
+			}
 			this.prepareToggleButton();
 			this.$template.i18n();
 			this.listen();
@@ -101,8 +111,11 @@
 
 			imes = $.ime.languages[language];
 			this.imeLanguage = language;
+
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
+
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
+			$imeListContainer.show();
 			$imeListContainer.find( 'label' ).remove();
 
 			if ( !imes ) {
@@ -178,6 +191,9 @@
 			SUGGESTED_LANGUAGES_NUMBER = 3;
 			imeSettings = this;
 			$languages = this.$template.find( 'div.uls-ui-languages' );
+			this.$template.find( 'div.uls-ui-languages' ).show();
+			this.$template.find( 'div.uls-input-settings-languages-title' ).show();
+
 			suggestedLanguages = this.frequentLanguageList()
 				// Common world languages, for the case that there are
 				// too few suggested languages
@@ -300,10 +316,10 @@
 
 			if ( $.ime.preferences.isEnabled() ) {
 				$toggleButton.data( 'i18n', 'ext-uls-input-disable' );
-				$toggleButtonDesc.data( 'i18n', 'ext-uls-input-enable-info' );
+				$toggleButtonDesc.hide();
 			} else {
 				$toggleButton.data( 'i18n', 'ext-uls-input-enable' );
-				$toggleButtonDesc.data( 'i18n', 'ext-uls-input-disable-info' );
+				$toggleButtonDesc.data( 'i18n', 'ext-uls-input-disable-info' ).show();
 			}
 
 			$toggleButton.i18n();
@@ -377,9 +393,9 @@
 
 			$.ime.preferences.disable();
 			$.ime.preferences.save( function () {
-				// Update the toggle button
-				inputSettings.prepareToggleButton();
 				mw.ime.disable();
+				// render this again.
+				inputSettings.render();
 			} );
 		},
 
@@ -391,9 +407,9 @@
 
 			$.ime.preferences.enable();
 			$.ime.preferences.save( function () {
-				// Update the toggle button
-				inputSettings.prepareToggleButton();
 				mw.ime.setup();
+				// render this again.
+				inputSettings.render();
 			} );
 
 		},