diff --git a/includes/Partials/PageTools.php b/includes/Partials/PageTools.php index 560474363..c5607e15f 100644 --- a/includes/Partials/PageTools.php +++ b/includes/Partials/PageTools.php @@ -26,6 +26,7 @@ namespace Citizen\Partials; use Exception; +use ExtensionRegistry; use MediaWiki\MediaWikiServices; use SkinTemplate; @@ -126,6 +127,7 @@ public function buildPageTools( $parentData ): array { 'data-page-actions' => $actionshtml, 'data-namespaces' => $namespaceshtml, 'has-languages' => $this->shouldShowLanguages( $languageshtml, $variantshtml ), + 'is-uls-ready' => $this->shouldShowULS( $variantshtml ), 'data-languages' => $languageshtml, 'data-variants' => $variantshtml, 'data-page-toolbox' => $toolboxhtml, @@ -186,15 +188,32 @@ private function shouldShowLanguages( $languageshtml, $variantshtml ): bool { if ( !$this->canHaveLanguages() ) { return false; } - // If both language and variant menu contains nothing if ( $languageshtml['is-empty'] && $variantshtml['is-empty'] ) { return false; } - return true; } + /** + * Check if UniversalLanguageSelector can be used to replace the language menu + * + * @param array $variantshtml + * @return bool + */ + private function shouldShowULS( $variantshtml ): bool { + // ULS does not support variants + if ( !$variantshtml['is-empty'] ) { + return false; + } + // ext.uls.interface only attaches to mw-interlanguage-selector >1.36 + if ( version_compare( MW_VERSION, '1.36', '<' ) ) { + return false; + } + + return ExtensionRegistry::getInstance()->isLoaded( 'UniversalLanguageSelector' ); + } + /** * Count languages avaliable * TODO: Consider having an option to count for variants? diff --git a/resources/skins.citizen.styles/Pagetools.less b/resources/skins.citizen.styles/Pagetools.less index 1b0d59056..35c5c9f3e 100644 --- a/resources/skins.citizen.styles/Pagetools.less +++ b/resources/skins.citizen.styles/Pagetools.less @@ -160,6 +160,46 @@ } } +.citizen-languages { + // Special handling for ULS + // ULS won't be triggered by the label button + // so we need to overlay the checkbox on top of it + .mw-interlanguage-selector { + position: absolute; + z-index: 1; + top: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + cursor: pointer; + opacity: 0; + + // Hover state needs to be define because the checkbox now overlays the label + &:hover { + ~ .page-actions__button { + background-color: var( --background-color-quiet--hover ); + + &:after { + opacity: var( --opacity-icon-base--hover ); + } + } + } + + &:active { + ~ .page-actions__button { + background-color: var( --background-color-quiet--active ); + + &:after { + opacity: var( --opacity-icon-base--active ); + } + } + } + } +} + // Handle icons .page-actions-more { a { diff --git a/templates/PageTools__languages.mustache b/templates/PageTools__languages.mustache index 1bca34076..86505d4be 100644 --- a/templates/PageTools__languages.mustache +++ b/templates/PageTools__languages.mustache @@ -1,12 +1,13 @@ {{! object data-page-languages object data-page-variants + bool is-uls-ready }}