Visual indication while saving the settings

* Button label change to "applying changes"
* Button become disabled
* Cursor changes to "progress"

Bug: 53772
Change-Id: I1de459590ea9b357965a73f274d566eba8c04482

i18n/en.json

@@ -47,5 +47,6 @@
 "ext-uls-input-disable-notification-undo": "Undo",
 "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-language-settings-preferences-link": "More language settings"
 }

i18n/qqq.json

@@ -48,5 +48,6 @@
     "ext-uls-input-disable-notification-undo": "Undo link text in the input method disable notification bubble",
     "ext-uls-input-disable-notification-info-personal": "Notification bubble text when input methods are disabled, appears if the ULS is at personal toolbar",
     "ext-uls-input-disable-notification-info-interlanguage": "Notification bubble text when input methods are disabled, appears if the ULS is at interlanguage toolbar",
+    "ext-uls-language-settings-applying": "Label for apply settings button in language settings screen, while settings being saved. Please keep it short.",
     "ext-uls-language-settings-preferences-link": "Text for the link showin in user preference screen"
-}
+}

resources/css/ext.uls.languagesettings.css

@@ -120,3 +120,7 @@
 label.checkbox input[type="checkbox"] {
 	float: left;
 }
+
+.waiting {
+	cursor: progress;
+}

resources/js/ext.uls.displaysettings.js

@@ -573,6 +573,7 @@
 				return;
 			}
 
+			displaySettings.$parent.setBusy( true );
 			// Save the preferences
 			mw.webfonts.preferences.save( function ( result ) {
 				var newFonts = mw.webfonts.preferences.registry.fonts || {},
@@ -595,6 +596,7 @@
 				displaySettings.dirty = false;
 				// Update the back-up preferences for the case of canceling
 				displaySettings.savedRegistry = $.extend( true, {}, mw.webfonts.preferences );
+				displaySettings.$parent.setBusy( false );
 			} );
 		},
 

resources/js/ext.uls.inputsettings.js

@@ -507,6 +507,7 @@
 				// No changes to save in this module.
 				return;
 			}
+			inputSettings.$parent.setBusy( true );
 
 			if ( previousLanguage ) {
 				previousIM = inputSettings.savedRegistry.imes[previousLanguage];
@@ -530,6 +531,7 @@
 				inputSettings.dirty = false;
 				// Update the back-up preferences for the case of canceling
 				inputSettings.savedRegistry = $.extend( true, {}, $.ime.preferences.registry );
+				inputSettings.$parent.setBusy( false );
 			} );
 		},
 

resources/js/ext.uls.languagesettings.js

@@ -234,6 +234,28 @@
 			this.$window.hide();
 		},
 
+		/**
+		 * Put the language settings panel in busy mode.
+		 * Busy mode means displaying a progress cursor,
+		 * and showing the 'apply' button as disabled and with
+		 * a different label.
+		 * @param {boolean} busy set true to put the panel in busy mode,
+		 *     false to unset the busy mode.
+		 */
+		setBusy: function ( busy ) {
+			var $applyButton = this.$window.find( 'button.uls-settings-apply' );
+
+			if ( busy ) {
+				this.$window.addClass( 'waiting' );
+				$applyButton
+					.text( $.i18n( 'ext-uls-language-settings-applying' ) )
+					.prop( 'disabled', true );
+			} else {
+				this.$window.removeClass( 'waiting' );
+				$applyButton.text( $.i18n( 'ext-uls-language-settings-apply' ) );
+			}
+		},
+
 		/**
 		 * Close this language settings window, and
 		 * call onClose if defined from the previous context.