diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 5aa50f8..185df4b 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -231,12 +231,18 @@ class SkinVector extends SkinMustache { self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal', self::MENU_TYPE_DEFAULT => 'vector-menu', ]; + $portletData['heading-class'] = 'vector-menu-heading'; + if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) { $portletData['label'] = $this->msg( 'vector-language-button-label', count( $this->getLanguages() ) )->parse(); - $portletData['icon'] = 'language'; + // Adds language icon + $portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-language'; + // Adds .mw-interlanguage-selector (ext.uls.interface attaches click + // handler to this selector). + $portletData['heading-class'] .= ' mw-interlanguage-selector'; $portletData['id'] = 'p-lang-btn'; } $class = $portletData['class']; diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache index 917c668..28a3733 100644 --- a/includes/templates/Menu.mustache +++ b/includes/templates/Menu.mustache @@ -8,7 +8,7 @@ {{#is-dropdown}} {{/is-dropdown}} -

+

{{label}}

diff --git a/resources/skins.vector.js/skin.js b/resources/skins.vector.js/skin.js index 77b784c..2e18999 100644 --- a/resources/skins.vector.js/skin.js +++ b/resources/skins.vector.js/skin.js @@ -40,11 +40,34 @@ function enableCssAnimations( document ) { * @return {void} */ function main( window ) { + var + ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ), + pLangBtnLabel; + enableCssAnimations( window.document ); collapsibleTabs.init(); sidebar.init( window ); $( vector.init ); initSearchLoader( document ); + if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) { + mw.loader.using( 'ext.uls.interface' ).then( function () { + var pLangBtn = document.getElementById( 'p-lang-btn' ); + if ( !pLangBtn ) { + return; + } + + pLangBtn.classList.add( 'vector-menu--hide-dropdown' ); + } ); + } else { + pLangBtnLabel = document.getElementById( 'p-lang-btn-label' ); + if ( !pLangBtnLabel ) { + return; + } + + // Remove .mw-interlanguage-selector to show the dropdown arrow since evidently + // ULS is not used. + pLangBtnLabel.classList.remove( 'mw-interlanguage-selector' ); + } } main( window ); diff --git a/resources/skins.vector.styles/LanguageButton.less b/resources/skins.vector.styles/LanguageButton.less index 43981b1..046bb72 100644 --- a/resources/skins.vector.styles/LanguageButton.less +++ b/resources/skins.vector.styles/LanguageButton.less @@ -5,7 +5,7 @@ .mw-body-header .mw-portlet-lang { .mw-ui-button-states(); - h3 { + .vector-menu-heading { // In future this should use wvui .mw-ui-button(); padding-right: 40px; @@ -30,3 +30,29 @@ margin-top: 8px; } } + +// mw-body-header class can be removed when language button is the default. +// e.g. upon removal of SkinVector::isLanguagesInHeader +.client-js .mw-body-header { + // The `.mw-interlanguage-selector` is toggled off through js if the + // `ext.uls.interface` module is not being loaded. + .mw-interlanguage-selector { + // Remove the ULS language icon provided by ext.uls.compactlinks.less as we + // are already providing no-js users an icon. + background-image: none; + + &:after { + // Don't show dropdown arrow. + content: none; + } + } + + // When the ext.uls.interface module is loaded, we hide the fallback menu and + // checkbox. + .vector-menu--hide-dropdown { + .vector-menu-checkbox, + .vector-menu-content { + display: none; + } + } +} diff --git a/tests/phpunit/integration/SkinVectorTest.php b/tests/phpunit/integration/SkinVectorTest.php index 184d7c5..cc7e995 100644 --- a/tests/phpunit/integration/SkinVectorTest.php +++ b/tests/phpunit/integration/SkinVectorTest.php @@ -89,6 +89,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase { 'html-items' => '', 'html-after-portal' => '', 'label' => $context->msg( 'views' )->text(), + 'heading-class' => 'vector-menu-heading', 'is-dropdown' => false, ], $views