From c08ae1152e61b94892e551a8f95119ddf44f1658 Mon Sep 17 00:00:00 2001 From: bwang Date: Fri, 13 Aug 2021 15:56:51 -0500 Subject: [PATCH] Update ULS button states to be consistent with other quiet buttons - JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox - JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style) - JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states - Old styles and skinStyles are removed Bug: T283757 Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556 --- includes/SkinVector.php | 6 +++--- includes/templates/Menu.mustache | 3 ++- resources/common/components/MenuDropdown.less | 1 + resources/skins.vector.js/languageButton.js | 12 +---------- .../components/LanguageButton.less | 20 +------------------ skin.json | 1 - skinStyles/ext.uls.compactlinks.less | 6 ------ 7 files changed, 8 insertions(+), 41 deletions(-) delete mode 100644 skinStyles/ext.uls.compactlinks.less diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 5490db8..1cafe93 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -488,14 +488,14 @@ class SkinVector extends SkinMustache { $languageButtonData = [ 'id' => 'p-lang-btn', 'label' => $label, + // ext.uls.interface attaches click handler to this selector. + 'checkbox-class' => ' mw-interlanguage-selector ', 'heading-class' => ' vector-menu-heading ' . ' mw-ui-icon ' . ' mw-ui-icon-before ' . ' mw-ui-icon-wikimedia-language ' . - ' mw-ui-button mw-ui-quiet ' . - // ext.uls.interface attaches click handler to this selector. - ' mw-interlanguage-selector ', + ' mw-ui-button mw-ui-quiet ' ]; // Adds class to hide language button diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache index 204f580..89c82e5 100644 --- a/includes/templates/Menu.mustache +++ b/includes/templates/Menu.mustache @@ -6,8 +6,9 @@ {{{html-user-language-attributes}}}> {{#is-dropdown}} + class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" /> {{/is-dropdown}}

{{! }}{{label}} diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less index e354c59..8ae6bbd 100644 --- a/resources/common/components/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -153,6 +153,7 @@ display: block; } + // Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions) &:focus + h3 { // Simulate browser focus ring outline: dotted 1px; // Firefox style diff --git a/resources/skins.vector.js/languageButton.js b/resources/skins.vector.js/languageButton.js index a73b5fd..9c930d8 100644 --- a/resources/skins.vector.js/languageButton.js +++ b/resources/skins.vector.js/languageButton.js @@ -37,8 +37,7 @@ function disableDropdownBehavior( pLangBtn ) { * drop down behavior of the button. */ function disableLanguageDropdown() { - var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ), - pLangBtnLabel; + var ulsModuleStatus = mw.loader.getState( 'ext.uls.interface' ); // If module status is defined and not registered we can assume it is in the process of loading if ( ulsModuleStatus && ulsModuleStatus !== 'registered' ) { @@ -47,15 +46,6 @@ function disableLanguageDropdown() { if ( mw.config.get( 'wgULSisCompactLinksEnabled' ) ) { disableDropdownBehavior( document.getElementById( 'p-lang-btn' ) ); } - } 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' ); } } diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less index 1d6081c..1dd86a5 100644 --- a/resources/skins.vector.styles/components/LanguageButton.less +++ b/resources/skins.vector.styles/components/LanguageButton.less @@ -65,29 +65,11 @@ } } -// Disable border-radius when dropdown menu open -.client-nojs { - #p-lang-btn:hover .vector-menu-heading, - .vector-menu-checkbox:checked + .vector-menu-heading { - border-radius: 0; - } -} - // mw-body-header class can be removed when language button is the default. // e.g. upon removal of SkinVector::isLanguagesInHeader .client-js #p-lang-btn { - // 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; - } - - // When the ext.uls.interface module is loaded, we hide the fallback menu and - // checkbox. + // 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/skin.json b/skin.json index bb43e9a..685c808 100644 --- a/skin.json +++ b/skin.json @@ -225,7 +225,6 @@ "ResourceModuleSkinStyles": { "vector": { "+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less", - "+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less", "+ext.uls.pt": "skinStyles/ext.uls.pt.less", "jquery.tipsy": "skinStyles/jquery.tipsy.less", "jquery.ui": [ diff --git a/skinStyles/ext.uls.compactlinks.less b/skinStyles/ext.uls.compactlinks.less deleted file mode 100644 index fd65c62..0000000 --- a/skinStyles/ext.uls.compactlinks.less +++ /dev/null @@ -1,6 +0,0 @@ -.mw-body-header .mw-interlanguage-selector, -.mw-body-header .mw-interlanguage-selector:active { - margin: 0; - // mw-ui-button quiet is bold on active. - font-weight: bold; -}