From b88f2970f727d7348372576cea813bc966d3e93c Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 26 Aug 2021 12:47:02 -0700 Subject: [PATCH] Simplify how we generate icons and button classes in Vector - Separate icon classes from button classes in user links/language - Upgrades the personal tools language button preference to a mw-ui-button with icon - Adds a generic selector for dropdown menus without an icon - Cleans up user links CSS now mw-list-item class is available - Removes icon hack CSS Bug: T289630 Bug: T283757 Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9 --- includes/Hooks.php | 58 +++++++++++++++++++ includes/SkinVector.php | 18 ++++-- includes/templates/Header.mustache | 2 +- includes/templates/Icon.mustache | 4 +- includes/templates/Menu.mustache | 4 +- includes/templates/SearchBox.mustache | 2 +- resources/common/components/MenuDropdown.less | 25 ++++---- .../components/LanguageButton.less | 6 +- .../components/Sidebar.less | 7 --- .../components/UserLinks.less | 39 ++++++------- tests/phpunit/integration/SkinVectorTest.php | 4 +- 11 files changed, 116 insertions(+), 53 deletions(-) diff --git a/includes/Hooks.php b/includes/Hooks.php index c658ca60..d14f168f 100644 --- a/includes/Hooks.php +++ b/includes/Hooks.php @@ -220,6 +220,49 @@ class Hooks { } } + /** + * Make an icon + * + * @internal for use inside Vector skin. + * @param string $name + * @return string of HTML + */ + public static function makeButtonIcon( $name ) { + // Html::makeLink will pass this through rawElement + return ''; + } + + /** + * Updates user interface preferences for modern Vector to upgrade icon/button menu items. + * + * @param SkinTemplate $sk + * @param array &$content_navigation + * @param string $menu identifier + */ + private static function updateMenuItems( $sk, &$content_navigation, $menu ) { + foreach ( $content_navigation[$menu] as $key => $item ) { + $hasButton = $item['button'] ?? false; + $hideText = $item['text-hidden'] ?? false; + $icon = $item['icon'] ?? ''; + unset( $item['button'] ); + unset( $item['icon'] ); + unset( $item['text-hidden'] ); + + if ( $hasButton ) { + $item['link-class'][] = 'mw-ui-button mw-ui-quiet'; + } + + if ( $icon ) { + if ( $hideText ) { + $item['link-class'][] = 'mw-ui-icon mw-ui-icon-element mw-ui-icon-' . $icon; + } else { + $item['link-html'] = self::makeButtonIcon( $icon ); + } + } + $content_navigation[$menu][$key] = $item; + } + } + /** * Upgrades Vector's watch action to a watchstar. * This is invoked inside SkinVector, not via skin registration, as skin hooks @@ -251,6 +294,21 @@ class Hooks { self::updateUserLinksItems( $sk, $content_navigation ); } } + + if ( !self::isSkinVersionLegacy() ) { + // Upgrade preferences and notifications to icon buttons + // for extensions that have opted in. + if ( isset( $content_navigation['user-interface-preferences'] ) ) { + self::updateMenuItems( + $sk, $content_navigation, 'user-interface-preferences' + ); + } + if ( isset( $content_navigation['notifications'] ) ) { + self::updateMenuItems( + $sk, $content_navigation, 'notifications' + ); + } + } } } diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 8bc11f72..1a9de3a9 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -514,12 +514,10 @@ class SkinVector extends SkinMustache { 'label' => $label, // ext.uls.interface attaches click handler to this selector. 'checkbox-class' => ' mw-interlanguage-selector ', + 'html-vector-heading-icon' => Hooks::makeButtonIcon( 'wikimedia-language' ), 'heading-class' => ' vector-menu-heading ' . - ' mw-ui-icon ' . - ' mw-ui-icon-before ' . - ' mw-ui-icon-wikimedia-language ' . - ' mw-ui-button mw-ui-quiet ' + ' mw-ui-button mw-ui-quiet' ]; // Adds class to hide language button @@ -533,6 +531,7 @@ class SkinVector extends SkinMustache { /** * helper for applying Vector menu classes to portlets + * * @param array $portletData returned by SkinMustache to decorate * @param int $type representing one of the menu types (see MENU_TYPE_* constants) * @return array modified version of portletData input @@ -557,12 +556,21 @@ class SkinVector extends SkinMustache { $portletData['class'] .= $this->loggedin ? ' vector-user-menu-logged-in' : ' vector-user-menu-logged-out'; - $portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element'; + $portletData['heading-class'] .= ' mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element'; $portletData['heading-class'] .= $this->loggedin ? ' mw-ui-icon-wikimedia-userAvatar' : ' mw-ui-icon-wikimedia-ellipsis'; } } + switch ( $portletData['id'] ) { + case 'p-variants': + case 'p-cactions': + $portletData['class'] .= ' vector-menu-dropdown-noicon'; + break; + default: + break; + } + if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) { $portletData = $this->createULSLanguageButton( $portletData ); } diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache index fe04ae1b..5be60f0f 100644 --- a/includes/templates/Header.mustache +++ b/includes/templates/Header.mustache @@ -1,7 +1,7 @@