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

Update inputs to use mw-ui styles

Browse Source 
Replaces many of the styles with the new standard ones in mw-ui, which is
present in v1.22 of Mediawiki, the current lowest supported version of
ULS.

Might require a follow-up to reduce the amount of redundant CSS present

Bug: T52599
Change-Id: Id186ece6513f154e0388bc4170c21bdabb59038a
This commit is contained in:
Evan McIntire
2015-02-26 23:41:23 -05:00
committed by Nikerabbit
parent 57b617f775
commit 30d26a4fd2
5 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Resources.php
View File

@@ -34,6 +34,7 @@ $wgResourceModules['ext.uls.displaysettings'] = array(
'ext.uls.mediawiki', 'ext.uls.mediawiki',
'ext.uls.webfonts', 'ext.uls.webfonts',
'mediawiki.api.parse', 'mediawiki.api.parse',
'mediawiki.ui.checkbox',
), ),
) + $resourcePaths; ) + $resourcePaths;
@@ -101,6 +102,7 @@ $wgResourceModules['ext.uls.inputsettings'] = array(
'ext.uls.languagesettings', 'ext.uls.languagesettings',
'ext.uls.mediawiki', 'ext.uls.mediawiki',
'jquery.ime', 'jquery.ime',
'mediawiki.ui.radio',
), ),
) + $resourcePaths; ) + $resourcePaths;
@@ -129,7 +131,6 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
'scripts' => 'resources/js/ext.uls.languagesettings.js', 'scripts' => 'resources/js/ext.uls.languagesettings.js',
'styles' => 'resources/css/ext.uls.languagesettings.css', 'styles' => 'resources/css/ext.uls.languagesettings.css',
'dependencies' => array( 'dependencies' => array(
'ext.uls.buttons',
'ext.uls.messages', 'ext.uls.messages',
'ext.uls.preferences', 'ext.uls.preferences',
// The grid styles are used here, // The grid styles are used here,
@@ -254,6 +255,7 @@ $wgResourceModules['jquery.uls'] = array(
'jquery.i18n', 'jquery.i18n',
'jquery.uls.data', 'jquery.uls.data',
'jquery.uls.grid', 'jquery.uls.grid',
'mediawiki.ui.input',
), ),
) + $resourcePaths; ) + $resourcePaths;

6
resources/css/ext.uls.inputsettings.css
View File

@@ -12,7 +12,7 @@ div.input-settings-block {
} }
.imelabel { .imelabel {
display: block; display: inline;
padding-bottom: 10px; padding-bottom: 10px;
font-size: 10pt; font-size: 10pt;
line-height: 16pt; line-height: 16pt;
@@ -22,10 +22,6 @@ div.input-settings-block {
padding-left: 5px; padding-left: 5px;
} }
.imelabel input {
float: left;
}
.uls-ime-menu-settings-item { .uls-ime-menu-settings-item {
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;

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

@@ -23,9 +23,9 @@
+ '<div class="row">' // Tab switcher buttons + '<div class="row">' // Tab switcher buttons
+ '<div class="twelve columns uls-display-settings-tab-switcher">' + '<div class="twelve columns uls-display-settings-tab-switcher">'
+ '<div class="uls-button-group">' + '<div class="uls-button-group mw-ui-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-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="button" data-i18n="ext-uls-display-settings-fonts-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>' + '</div>'
+ '</div>' + '</div>'
@@ -79,9 +79,9 @@
// Webfonts enabling checkbox with label // Webfonts enabling checkbox with label
+ '<div class="row">' + '<div class="row">'
+ '<div class="eleven columns">' + '<div class="eleven columns mw-ui-checkbox">'
+ '<label class="checkbox">'
+ '<input type="checkbox" id="webfonts-enable-checkbox" />' + '<input type="checkbox" id="webfonts-enable-checkbox" />'
+ '<label class="checkbox" for="webfonts-enable-checkbox">'
+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> ' + '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> ' + '<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>' + '<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 () { return function () {
displaySettings.markDirty(); displaySettings.markDirty();
displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage; displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
$( 'div.uls-ui-languages button.button' ).removeClass( 'down' ); $( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-checked' );
button.addClass( 'down' ); button.addClass( 'mw-ui-checked' );
displaySettings.prepareUIFonts(); displaySettings.prepareUIFonts();
displaySettings.preview( displaySettings.uiLanguage ); displaySettings.preview( displaySettings.uiLanguage );
}; };
@@ -253,7 +253,7 @@
for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) { for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
language = languagesForButtons[i]; language = languagesForButtons[i];
$button = $( '<button>' ) $button = $( '<button>' )
.addClass( 'button uls-language-button autonym' ) .addClass( 'mw-ui-button uls-language-button autonym' )
.text( $.uls.data.getAutonym( language ) ) .text( $.uls.data.getAutonym( language ) )
.prop( { .prop( {
lang: language, lang: language,
@@ -261,7 +261,7 @@
} ); } );
if ( language === this.uiLanguage ) { if ( language === this.uiLanguage ) {
$button.addClass( 'down' ); $button.addClass( 'mw-ui-checked' );
} }
$button.data( 'language', language ); $button.data( 'language', language );
@@ -282,7 +282,7 @@
$languages = this.$template.find( 'div.uls-ui-languages' ); $languages = this.$template.find( 'div.uls-ui-languages' );
$moreLanguagesButton = $( '<button>' ) $moreLanguagesButton = $( '<button>' )
.prop( 'class', 'uls-more-languages' ) .prop( 'class', 'uls-more-languages' )
.addClass( 'button' ).text( '...' ); .addClass( 'mw-ui-button' ).text( '...' );
$languages.append( $moreLanguagesButton ); $languages.append( $moreLanguagesButton );
// Show the long language list to select a language for display settings // Show the long language list to select a language for display settings
@@ -578,7 +578,7 @@
$tabButtons.on( 'click', function () { $tabButtons.on( 'click', function () {
var $button = $( this ); var $button = $( this );
if ( $button.hasClass( 'down' ) ) { if ( $button.hasClass( 'mw-ui-checked' ) ) {
return; return;
} }
@@ -593,8 +593,8 @@
} ); } );
displaySettings.$parent.position(); displaySettings.$parent.position();
$tabButtons.filter( '.down' ).removeClass( 'down' ); $tabButtons.filter( '.mw-ui-checked' ).removeClass( 'mw-ui-checked' );
$button.addClass( 'down' ); $button.addClass( 'mw-ui-checked' );
} ); } );

25
resources/js/ext.uls.inputsettings.js
View File

@@ -48,9 +48,9 @@
// Disable IME system button // Disable IME system button
+ '<div class="row">' + '<div class="row">'
+ '<div class="eleven columns button uls-input-settings-disable-info"></div>' + '<div class="eleven columns uls-input-settings-disable-info"></div>'
+ '<div class="six columns button uls-input-settings-toggle">' + '<div class="six columns uls-input-settings-toggle">'
+ '<button class="active green button uls-input-toggle-button"></button>' + '<button class="mw-ui-button uls-input-toggle-button"></button>'
+ '</div>' + '</div>'
+ '</div>'; + '</div>';
@@ -119,7 +119,7 @@
$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' ); $imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' ); $imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
$imeListContainer.find( 'label' ).remove(); $imeListContainer.find( 'div, label' ).remove();
if ( !imes ) { if ( !imes ) {
$imeListContainer.append( $( '<label>' ) $imeListContainer.append( $( '<label>' )
@@ -159,7 +159,7 @@
* @return {Object} jQuery object corresponding to the input method item. * @return {Object} jQuery object corresponding to the input method item.
*/ */
renderInputmethodOption: function ( imeId, selected ) { renderInputmethodOption: function ( imeId, selected ) {
var $imeLabel, name, description, $helplink, inputmethod, $inputMethodItem; var $imeHolder, $imeLabel, name, description, $helplink, inputmethod, $inputMethodItem;
if ( imeId !== 'system' && !$.ime.sources[imeId] ) { if ( imeId !== 'system' && !$.ime.sources[imeId] ) {
// imeId not known for jquery.ime. // imeId not known for jquery.ime.
@@ -167,6 +167,8 @@
return $(); return $();
} }
$imeHolder = $( '<div>' ).class( 'mw-ui-radio' );
$imeLabel = $( '<label>' ).attr( { $imeLabel = $( '<label>' ).attr( {
'for': imeId, 'for': imeId,
'class': 'imelabel' 'class': 'imelabel'
@@ -179,7 +181,7 @@
checked: selected checked: selected
} ); } );
$imeLabel.append( $inputMethodItem ); $imeHolder.append( $inputMethodItem );
if ( imeId === 'system' ) { if ( imeId === 'system' ) {
name = $.i18n( 'ext-uls-disable-input-method' ); name = $.i18n( 'ext-uls-disable-input-method' );
@@ -209,7 +211,8 @@
$helplink $helplink
); );
return $imeLabel; $imeHolder.append( $imeLabel );
return $imeHolder;
}, },
/** /**
@@ -274,8 +277,8 @@
$.ime.preferences.setLanguage( language ); $.ime.preferences.setLanguage( language );
} }
// Mark the button selected // Mark the button selected
$( '.uls-ui-languages .button' ).removeClass( 'down' ); $( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-checked' );
button.addClass( 'down' ); button.addClass( 'mw-ui-checked' );
inputSettings.prepareInputmethods( language ); inputSettings.prepareInputmethods( language );
}; };
} }
@@ -286,7 +289,7 @@
for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) { for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
language = languagesForButtons[i]; language = languagesForButtons[i];
$button = $( '<button>' ) $button = $( '<button>' )
.addClass( 'button uls-language-button autonym' ) .addClass( 'mw-ui-button uls-language-button autonym' )
.text( $.uls.data.getAutonym( language ) ) .text( $.uls.data.getAutonym( language ) )
.prop( { .prop( {
lang: language, lang: language,
@@ -318,7 +321,7 @@
$languages = this.$template.find( '.uls-ui-languages' ); $languages = this.$template.find( '.uls-ui-languages' );
$moreLanguagesButton = $( '<button>' ) $moreLanguagesButton = $( '<button>' )
.prop( 'class', 'uls-more-languages' ) .prop( 'class', 'uls-more-languages' )
.addClass( 'button' ).text( '...' ); .addClass( 'mw-ui-button' ).text( '...' );
$languages.append( $moreLanguagesButton ); $languages.append( $moreLanguagesButton );
// Show the long language list to select a language for ime settings // Show the long language list to select a language for ime settings

4
resources/js/ext.uls.languagesettings.js
View File

@@ -34,8 +34,8 @@
// Apply and Cancel buttons // Apply and Cancel buttons
buttonsRow = '<div class="row language-settings-buttons">' + buttonsRow = '<div class="row language-settings-buttons">' +
'<div class="eleven columns">' + '<div class="eleven columns">' +
'<button class="button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' + '<button class="mw-ui-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 mw-ui-constuctive uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';