Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/220751
Change subject: Update ULS settings UI style mediawiki.ui style
......................................................................
Update ULS settings UI style mediawiki.ui style
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
Change-Id: Ibbb2068b5036537f298fad6c49169a5b986304d5
---
M Resources.php
M extension.json
M resources/css/ext.uls.css
M resources/css/ext.uls.displaysettings.css
M resources/js/ext.uls.displaysettings.js
M resources/js/ext.uls.inputsettings.js
M resources/js/ext.uls.languagesettings.js
7 files changed, 42 insertions(+), 54 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UniversalLanguageSelector
refs/changes/51/220751/1
diff --git a/Resources.php b/Resources.php
index 0d05f64..21d8f2a 100644
--- a/Resources.php
+++ b/Resources.php
@@ -34,6 +34,8 @@
'ext.uls.mediawiki',
'ext.uls.webfonts',
'mediawiki.api.parse',
+ 'mediawiki.ui.checkbox',
+ 'mediawiki.ui.button',
),
) + $resourcePaths;
@@ -101,6 +103,8 @@
'ext.uls.languagesettings',
'ext.uls.mediawiki',
'jquery.ime',
+ 'mediawiki.ui.button',
+ 'mediawiki.ui.radio',
),
) + $resourcePaths;
@@ -129,12 +133,12 @@
'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,
// but ULS itself is lazy-loaded
'jquery.uls.grid',
+ 'mediawiki.ui.button'
),
) + $resourcePaths;
diff --git a/extension.json b/extension.json
index 727c6d4..bc3b85f 100644
--- a/extension.json
+++ b/extension.json
@@ -90,7 +90,9 @@
"ext.uls.languagesettings",
"ext.uls.mediawiki",
"ext.uls.webfonts",
- "mediawiki.api.parse"
+ "mediawiki.api.parse",
+ "mediawiki.ui.checkbox",
+ "mediawiki.ui.button"
],
"localBasePath": "resources",
"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -161,7 +163,9 @@
"ext.uls.ime",
"ext.uls.languagesettings",
"ext.uls.mediawiki",
- "jquery.ime"
+ "jquery.ime",
+ "mediawiki.ui.button",
+ "mediawiki.ui.radio"
],
"localBasePath": "resources",
"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -192,7 +196,8 @@
"ext.uls.buttons",
"ext.uls.messages",
"ext.uls.preferences",
- "jquery.uls.grid"
+ "jquery.uls.grid",
+ "mediawiki.ui.button"
],
"localBasePath": "resources",
"remoteExtPath": "UniversalLanguageSelector/resources"
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index e02dcf5..cd9692c 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -23,9 +23,10 @@
}
.uls-ui-languages button {
- width: 23%;
+ width: 22%;
text-overflow: ellipsis;
- margin-right: 4%;
+ margin-right: 2%;
+ white-space: nowrap;
}
button.uls-more-languages {
diff --git a/resources/css/ext.uls.displaysettings.css
b/resources/css/ext.uls.displaysettings.css
index 90fd149..7496396 100644
--- a/resources/css/ext.uls.displaysettings.css
+++ b/resources/css/ext.uls.displaysettings.css
@@ -23,24 +23,6 @@
z-index: 1;
}
-.uls-button-group > button.button {
- border-radius: 0;
- float: left;
- padding: 8px 10px;
- min-width: 80px;
- margin: 0;
-}
-
-.uls-button-group > button.button:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
-}
-
-.uls-button-group > button.button:last-child {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
-}
-
.ext-uls-sub-panel {
border-top: 1px solid #EEEEEE;
padding-top: 25px;
@@ -64,10 +46,6 @@
.uls-font-label,
.uls-font-select {
font-size: 10pt;
-}
-
-.uls-font-select {
- min-height: 16pt;
}
.uls-content-fonts:hover,
diff --git a/resources/js/ext.uls.displaysettings.js
b/resources/js/ext.uls.displaysettings.js
index 3d90e05..9b6c226 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -23,9 +23,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-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>'
+ '</div>'
+ '</div>'
@@ -80,12 +81,14 @@
// 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>'
@@ -242,8 +245,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-checked' );
+ button.addClass( 'mw-ui-checked' );
displaySettings.prepareUIFonts();
displaySettings.preview(
displaySettings.uiLanguage );
};
@@ -253,7 +256,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,
@@ -261,7 +264,7 @@
} );
if ( language === this.uiLanguage ) {
- $button.addClass( 'down' );
+ $button.addClass( 'mw-ui-checked' );
}
$button.data( 'language', language );
@@ -282,7 +285,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
@@ -578,7 +581,7 @@
$tabButtons.on( 'click', function () {
var $button = $( this );
- if ( $button.hasClass( 'down' ) ) {
+ if ( $button.hasClass( 'mw-ui-checked' ) ) {
return;
}
@@ -593,8 +596,8 @@
} );
displaySettings.$parent.position();
- $tabButtons.filter( '.down' ).removeClass(
'down' );
- $button.addClass( 'down' );
+ $tabButtons.filter( '.mw-ui-checked'
).removeClass( 'mw-ui-checked' );
+ $button.addClass( 'mw-ui-checked' );
} );
diff --git a/resources/js/ext.uls.inputsettings.js
b/resources/js/ext.uls.inputsettings.js
index c08de49..f805a37 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 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 class="eleven columns
uls-input-settings-disable-info"></div>'
+ + '<div class="six columns uls-input-settings-toggle">'
+ + '<button class="active mw-ui-constructive mw-ui-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( 'label' ).remove();
+ $imeListContainer.empty();
if ( !imes ) {
$imeListContainer.append( $( '<label>' )
@@ -169,7 +169,6 @@
$imeLabel = $( '<label>' ).attr( {
'for': imeId,
- 'class': 'imelabel'
} );
$inputMethodItem = $( '<input type="radio">' ).attr( {
@@ -178,8 +177,6 @@
value: imeId,
checked: selected
} );
-
- $imeLabel.append( $inputMethodItem );
if ( imeId === 'system' ) {
name = $.i18n( 'ext-uls-disable-input-method' );
@@ -209,7 +206,7 @@
$helplink
);
- return $imeLabel;
+ return $( '<div>' ).addClass( 'mw-ui-radio' ).append(
$inputMethodItem, $imeLabel );
},
/**
@@ -274,8 +271,8 @@
$.ime.preferences.setLanguage(
language );
}
// Mark the button selected
- $( '.uls-ui-languages .button'
).removeClass( 'down' );
- button.addClass( 'down' );
+ $( '.uls-ui-languages .mw-ui-button'
).removeClass( 'mw-ui-checked' );
+ button.addClass( 'mw-ui-checked' );
inputSettings.prepareInputmethods(
language );
};
}
@@ -286,7 +283,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,
@@ -318,7 +315,7 @@
$languages = this.$template.find( '.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
ime settings
diff --git a/resources/js/ext.uls.languagesettings.js
b/resources/js/ext.uls.languagesettings.js
index 5f93693..42a8f21 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="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 uls-settings-cancel"
data-i18n="ext-uls-language-settings-cancel"></button>' +
+ '<button class="mw-ui-button mw-ui-progressive active
uls-settings-apply" data-i18n="ext-uls-language-settings-apply"
disabled></button>' +
'</div>' +
'</div>' +
'</div>';
--
To view, visit https://gerrit.wikimedia.org/r/220751
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibbb2068b5036537f298fad6c49169a5b986304d5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Santhosh <santhosh.thottin...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
