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

Revert "Use Codex styles for buttons in language overlay"

Browse Source 
This reverts commit d29050d080.

Reason for revert: I had mistakenly assumed the @wikimedia/codex
module was loaded on clicking the language button. It appears to
be added on page load.

Given T248718 it's still unclear what our policy on loading
@wikimedia/codex on page load is and given several people are out
I think it would be better to attempt this again next week, possibly
delaying further if needed.

Bug: T353071
Bug: T248718
Change-Id: I09334a1faec06a7400e61013ddda374156bf5d72
This commit is contained in:
Jdlrobson
2023-12-08 21:29:24 +00:00
committed by jenkins-bot
parent 7124612558
commit 5481573341
11 changed files with 42 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
extension.json
View File

@@ -172,8 +172,7 @@
"dependencies": [ "dependencies": [
"mediawiki.jqueryMsg", "mediawiki.jqueryMsg",
"mediawiki.language", "mediawiki.language",
"ext.uls.common", "ext.uls.common"
"@wikimedia/codex"
], ],
"messages": [ "messages": [
"ext-uls-compact-link-count", "ext-uls-compact-link-count",
@@ -210,7 +209,9 @@
"ext.uls.mediawiki", "ext.uls.mediawiki",
"ext.uls.webfonts", "ext.uls.webfonts",
"mediawiki.api", "mediawiki.api",
"@wikimedia/codex", "mediawiki.ui.radio",
"mediawiki.ui.checkbox",
"mediawiki.ui.button",
"mediawiki.user" "mediawiki.user"
] ]
}, },
@@ -278,7 +279,7 @@
"ext.uls.messages", "ext.uls.messages",
"ext.uls.preferences", "ext.uls.preferences",
"jquery.uls.grid", "jquery.uls.grid",
"@wikimedia/codex" "mediawiki.ui.button"
] ]
}, },
"ext.uls.mediawiki": { "ext.uls.mediawiki": {
@@ -346,7 +347,7 @@
"dependencies": [ "dependencies": [
"mediawiki.api", "mediawiki.api",
"mediawiki.jqueryMsg", "mediawiki.jqueryMsg",
"@wikimedia/codex", "mediawiki.ui.button",
"mediawiki.Uri" "mediawiki.Uri"
], ],
"messages": [ "messages": [

3
resources/css/ext.uls.displaysettings.less
View File

@@ -9,8 +9,7 @@
.uls-button-group { .uls-button-group {
display: inline-block; display: inline-block;
position: relative; position: relative;
// The 1px are needed to handle overflow in .cdx-button-group in 1.39 padding: 0;
padding: 1px 0 0 1px;
left: -20px; left: -20px;
z-index: 1; z-index: 1;
} }

4
resources/css/ext.uls.inputsettings.less
View File

@@ -96,8 +96,8 @@
} }
} }
.uls-input-settings .cdx-radio { .uls-input-settings-inputmethods-list .mw-ui-radio {
position: relative; display: block;
} }
.uls-ime-notification-bubble .link { .uls-ime-notification-bubble .link {

10
resources/css/ext.uls.languagesettings.less
View File

@@ -130,20 +130,14 @@
margin-left: 15px; margin-left: 15px;
} }
// This can be removed when 1.39 support is dropped.
.uls-input-settings-inputmethods-list .cdx-radio__label,
.checkbox.cdx-checkbox__label {
padding-left: ~'calc(1.25em + 8px)';
}
.uls-ui-languages p, .uls-ui-languages p,
.checkbox { .checkbox {
color: @color-subtle; color: @color-subtle;
font-size: 10pt; font-size: 10pt;
} }
/* @todo: Amend to use Codex when 1.39 support is no longer needed. */ /* mediawiki.ui does not have a pressed state style. */
#languagesettings-panels .uls-cdx-button-pressed { #languagesettings-panels .mw-ui-pressed {
background-color: @background-color-progressive--active; background-color: @background-color-progressive--active;
color: @color-inverted; color: @color-inverted;
border-color: @border-color-progressive--active; border-color: @border-color-progressive--active;

2
resources/js/ext.uls.actions.menu.js
View File

@@ -15,7 +15,7 @@
ActionsMenu.template = '<div class="uls-menu uls-language-actions-dialog">' + ActionsMenu.template = '<div class="uls-menu uls-language-actions-dialog">' +
'<div class="uls-language-actions-title">' + '<div class="uls-language-actions-title">' +
'<button class="cdx-button cdx-button--weight-quiet uls-language-actions-close"></button>' + '<button class="mw-ui-button mw-ui-quiet uls-language-actions-close"></button>' +
'<span> <strong></strong> </span>' + '<span> <strong></strong> </span>' +
'</div>' + '</div>' +
'<div class="uls-language-action-items"></div>' + '<div class="uls-language-action-items"></div>' +

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

@@ -190,7 +190,7 @@
this.compactList[ language ].parentNode.style.display = ''; this.compactList[ language ].parentNode.style.display = '';
} }
mw.loader.using( '@wikimedia/codex' ).then( function () { mw.loader.using( 'mediawiki.ui.button' ).then( function () {
this.addTrigger(); this.addTrigger();
}.bind( this ) ); }.bind( this ) );
@@ -330,7 +330,7 @@
CompactInterlanguageList.prototype.addTrigger = function () { CompactInterlanguageList.prototype.addTrigger = function () {
var trigger = document.createElement( 'button' ); var trigger = document.createElement( 'button' );
// TODO: Should we have a different class name where the CLS styles are attached? // TODO: Should we have a different class name where the CLS styles are attached?
trigger.className = 'mw-interlanguage-selector cdx-button'; trigger.className = 'mw-interlanguage-selector mw-ui-button';
trigger.title = mw.message( 'ext-uls-compact-link-info' ).plain(); trigger.title = mw.message( 'ext-uls-compact-link-info' ).plain();
// Use text() because the message needs {{PLURAL:}} // Use text() because the message needs {{PLURAL:}}
trigger.textContent = mw.message( trigger.textContent = mw.message(

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

@@ -25,10 +25,10 @@
// Tab switcher buttons // Tab switcher buttons
'<div class="row">' + '<div class="row">' +
'<div class="twelve columns uls-display-settings-tab-switcher">' + '<div class="twelve columns uls-display-settings-tab-switcher">' +
'<div class="uls-button-group cdx-button-group">' + '<div class="uls-button-group mw-ui-button-group">' +
'<button id="uls-display-settings-language-tab" class="cdx-button uls-cdx-button-pressed" ' + '<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-pressed" ' +
'data-i18n="ext-uls-display-settings-language-tab"></button>' + 'data-i18n="ext-uls-display-settings-language-tab"></button>' +
'<button id="uls-display-settings-fonts-tab" class="cdx-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>' +
@@ -87,10 +87,9 @@
// Webfonts enabling checkbox with label // Webfonts enabling checkbox with label
'<div class="row">' + '<div class="row">' +
'<div class="twelve columns">' + '<div class="twelve columns">' +
'<div class="cdx-checkbox">' + '<div class="mw-ui-checkbox">' +
'<input type="checkbox" id="webfonts-enable-checkbox" class="cdx-checkbox__input" />' + '<input type="checkbox" id="webfonts-enable-checkbox" />' +
'<span class="cdx-checkbox__icon"></span>' + '<label class="checkbox" for="webfonts-enable-checkbox" >' +
'<label class="checkbox cdx-checkbox__label" 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>' +
@@ -259,8 +258,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.cdx-button' ).removeClass( 'uls-cdx-button-pressed' ); $( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
button.addClass( 'uls-cdx-button-pressed' ); button.addClass( 'mw-ui-pressed' );
displaySettings.prepareUIFonts(); displaySettings.prepareUIFonts();
displaySettings.preview( displaySettings.uiLanguage ); displaySettings.preview( displaySettings.uiLanguage );
}; };
@@ -270,7 +269,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( 'cdx-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,
@@ -278,7 +277,7 @@
} ); } );
if ( language === this.uiLanguage ) { if ( language === this.uiLanguage ) {
$button.addClass( 'uls-cdx-button-pressed' ); $button.addClass( 'mw-ui-pressed' );
} }
$button.data( 'language', language ); $button.data( 'language', language );
@@ -299,7 +298,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( 'cdx-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
@@ -589,7 +588,7 @@
var $button = $( this ); var $button = $( this );
// eslint-disable-next-line no-jquery/no-class-state // eslint-disable-next-line no-jquery/no-class-state
if ( $button.hasClass( 'uls-cdx-button-pressed' ) ) { if ( $button.hasClass( 'mw-ui-pressed' ) ) {
return; return;
} }
@@ -605,8 +604,8 @@
} ); } );
displaySettings.$parent.position(); displaySettings.$parent.position();
$tabButtons.removeClass( 'uls-cdx-button-pressed' ); $tabButtons.removeClass( 'mw-ui-pressed' );
$button.addClass( 'uls-cdx-button-pressed' ); $button.addClass( 'mw-ui-pressed' );
} ).on( 'mousedown', function ( event ) { } ).on( 'mousedown', function ( event ) {
// Avoid taking focus, to avoid bad looking focus styles // Avoid taking focus, to avoid bad looking focus styles
event.preventDefault(); event.preventDefault();

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

@@ -54,7 +54,7 @@
'<div class="row">' + '<div class="row">' +
'<div class="twelve columns uls-input-settings-disable-info"></div>' + '<div class="twelve columns uls-input-settings-disable-info"></div>' +
'<div class="ten columns uls-input-settings-toggle">' + '<div class="ten columns uls-input-settings-toggle">' +
'<button class="cdx-button cdx-button--action-progressive active uls-input-toggle-button"></button>' + '<button class="mw-ui-button mw-ui-progressive active uls-input-toggle-button"></button>' +
'</div>' + '</div>' +
'</div>'; '</div>';
@@ -169,11 +169,10 @@
return $(); return $();
} }
$imeLabel = $( '<label>' ).attr( 'for', imeId ).addClass( 'cdx-radio__label' ); $imeLabel = $( '<label>' ).attr( 'for', imeId );
$inputMethodItem = $( '<input>' ).attr( { $inputMethodItem = $( '<input>' ).attr( {
type: 'radio', type: 'radio',
class: 'cdx-radio__input',
name: 'ime', name: 'ime',
id: imeId, id: imeId,
value: imeId value: imeId
@@ -212,10 +211,9 @@
$helplink $helplink
); );
var $icon = $( '<span>' ).addClass( 'cdx-radio__icon' );
return $( '<div>' ) return $( '<div>' )
.addClass( 'cdx-radio' ) .addClass( 'mw-ui-radio' )
.append( $inputMethodItem, $icon, $imeLabel ); .append( $inputMethodItem, $imeLabel );
}, },
/** /**
@@ -280,8 +278,8 @@
$.ime.preferences.setLanguage( selectedLang ); $.ime.preferences.setLanguage( selectedLang );
} }
// Mark the button selected // Mark the button selected
$( '.uls-ui-languages .cdx-button' ).removeClass( 'uls-cdx-button-pressed' ); $( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
button.addClass( 'uls-cdx-button-pressed' ); button.addClass( 'mw-ui-pressed' );
inputSettings.prepareInputmethods( selectedLang ); inputSettings.prepareInputmethods( selectedLang );
}; };
} }
@@ -292,7 +290,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( 'cdx-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,
@@ -324,7 +322,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( 'cdx-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

11
resources/js/ext.uls.interface.js
View File

@@ -121,14 +121,7 @@
* @return {jQuery} * @return {jQuery}
*/ */
function createMenuButton( buttonClass ) { function createMenuButton( buttonClass ) {
// cdx-button--type-quiet is needed for 1.39 support. var classes = [ 'mw-ui-button', 'mw-ui-quiet', buttonClass ];
// Please remove when support is no longer needed.
var classes = [
'cdx-button',
'cdx-button--weight-quiet',
'cdx-button--type-quiet',
buttonClass
];
// eslint-disable-next-line mediawiki/class-doc // eslint-disable-next-line mediawiki/class-doc
return $( '<button>' ).addClass( classes ); return $( '<button>' ).addClass( classes );
} }
@@ -587,7 +580,7 @@
ev.preventDefault(); ev.preventDefault();
mw.loader.using( [ 'ext.uls.mediawiki', '@wikimedia/codex' ] ).then( function () { mw.loader.using( [ 'ext.uls.mediawiki', 'mediawiki.ui.button' ] ).then( function () {
var parent, languageNodes, standalone, uls; var parent, languageNodes, standalone, uls;
parent = document.querySelectorAll( '.mw-portlet-lang, #p-lang' )[ 0 ]; parent = document.querySelectorAll( '.mw-portlet-lang, #p-lang' )[ 0 ];

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

@@ -35,8 +35,8 @@
// Apply and Cancel buttons // Apply and Cancel buttons
buttonsRow = '<div class="row collapse language-settings-buttons">' + buttonsRow = '<div class="row collapse language-settings-buttons">' +
'<div class="twelve columns">' + '<div class="twelve columns">' +
'<button class="cdx-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="cdx-button cdx-button--action-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></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>' + '</div>' +
'</div>'; '</div>';

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

@@ -42,11 +42,11 @@
function getButtons() { function getButtons() {
$cancelBtn = $( '<button>' ) $cancelBtn = $( '<button>' )
.addClass( 'cdx-button uls-setlang-cancel' ) .addClass( 'mw-ui-button uls-setlang-cancel' )
.text( mw.msg( 'ext-uls-setlang-cancel' ) ); .text( mw.msg( 'ext-uls-setlang-cancel' ) );
$acceptBtn = $( '<button>' ) $acceptBtn = $( '<button>' )
.addClass( 'cdx-button cdx-button--action-progressive active uls-setlang-apply' ) .addClass( 'mw-ui-button mw-ui-progressive active uls-setlang-apply' )
.text( mw.msg( 'ext-uls-setlang-accept' ) ); .text( mw.msg( 'ext-uls-setlang-accept' ) );
return $( '<div>' ) return $( '<div>' )