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

Language button icon/button should be consistent with other buttons

Browse Source 
This converts the language button into a mw-ui-button which is the
class we're currently using in both Vector and Minerva. In future
this can become a WVUI button using the same roadmap as Vector
and Minerva.

This fixes the issue with the icon resize, as well as the issue
with the button lacking appropriate hover/focus states.

Bug: T289630
Change-Id: I8242986e8762a8f663f8cab07c54481e14223320
This commit is contained in:
jdlrobson
2021-08-27 10:32:00 -07:00
committed by jenkins-bot
parent 44a2682bcc
commit 5ca2ccb58a
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
includes/UniversalLanguageSelectorHooks.php
View File

@@ -132,7 +132,10 @@ class UniversalLanguageSelectorHooks {
$out->addJsConfigVars( $config ); $out->addJsConfigVars( $config );
if ( $wgULSPosition === 'personal' ) { if ( $wgULSPosition === 'personal' ) {
$out->addModuleStyles( 'ext.uls.pt' ); $out->addModuleStyles( [
'mediawiki.ui.button',
'ext.uls.pt'
] );
} else { } else {
$out->addModuleStyles( 'ext.uls.interlanguage' ); $out->addModuleStyles( 'ext.uls.interlanguage' );
} }
@@ -226,7 +229,8 @@ class UniversalLanguageSelectorHooks {
'uls' => [ 'uls' => [
'text' => Language::fetchLanguageName( $langCode ), 'text' => Language::fetchLanguageName( $langCode ),
'href' => '#', 'href' => '#',
'class' => 'uls-trigger', 'link-class' => 'mw-ui-icon mw-ui-icon-before',
'class' => 'uls-trigger mw-ui-button mw-ui-quiet',
'active' => true 'active' => true
] ]
] + $personal_urls; ] + $personal_urls;

34
resources/css/ext.uls.pt.less
View File

@@ -19,23 +19,29 @@
* A hack to load the icon before the rest of the module is lazy-loaded. * A hack to load the icon before the rest of the module is lazy-loaded.
* Copied from jquery.uls.css with the path changed. * Copied from jquery.uls.css with the path changed.
*/ */
.uls-trigger { .uls-trigger a:before {
background: no-repeat url( ../../lib/jquery.uls/images/language.svg ) left center; background: no-repeat url( ../../lib/jquery.uls/images/language.svg ) left center;
// Let the SVG image fit without cropping or stretch
background-size: contain;
padding-left: 24px;
} }
.vector-user-links {
.uls-trigger {
// Disable additional icon on load.
background-image: none;
// Can be removed when no longer need to override rule in jquery.uls.css
padding-left: 12px;
}
}
// Vector modern = ca-uls
// Other skins = pt-uls
#pt-uls { #pt-uls {
padding-top: 0 !important; // stylelint-disable-line declaration-no-important .mw-ui-button {
display: inline;
padding: 0;
border: 0;
}
.uls-trigger { .uls-trigger {
background-image: none;
// Same values as Vector's `#p-personal li`.
display: inline-block;
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
padding-left: 0;
// Putting the icon in before in order to apply `opacity`. // Putting the icon in before in order to apply `opacity`.
&:before { &:before {
content: ''; content: '';
@@ -53,6 +59,12 @@
} }
} }
.skin-vector {
#ca-uls span {
font-size: 0.875em;
}
}
/* Opera for some inexplicable reason confuses right and left padding with */ /* Opera for some inexplicable reason confuses right and left padding with */
/* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */ /* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */
/* but will make other browsers ignore this rule. */ /* but will make other browsers ignore this rule. */