bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ULS settings UI style to mediawiki.ui style

Browse Source 
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
This commit is contained in:
Santhosh Thottingal
2016-02-18 12:47:44 +05:30
committed by Nikerabbit
parent ce6f8734a9
commit a3c63f1efc
7 changed files with 47 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/ext.uls.displaysettings.js
View File

@@ -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' );
} );