diff --git a/.storybook/icons.less b/.storybook/icons.less index 446a645..dcd5da4 100644 --- a/.storybook/icons.less +++ b/.storybook/icons.less @@ -56,14 +56,8 @@ } #pt-anonuserpage, -#pt-userpage a, +.vector-user-menu-legacy #pt-userpage a, #p-new-personal-label { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg==") !important; background-repeat: no-repeat; } - -// Override user page icon styles for new user links -.vector-user-links #pt-userpage a { - background: none !important; - padding-left: 0; -} diff --git a/includes/Hooks.php b/includes/Hooks.php index 20bbb04..74eb5f5 100644 --- a/includes/Hooks.php +++ b/includes/Hooks.php @@ -111,6 +111,18 @@ class Hooks { } } + /** + * Updates the class on an existing item taking into account whether + * a class exists there already. + * + * @param array &$item + * @param string $newClass + */ + private static function appendClassToUserLink( &$item, $newClass ) { + $existingClass = $item['class'] ?? ''; + $item['class'] = $existingClass . ' ' . $newClass; + } + /** * Add icon class to an existing navigation item inside a menu hook. * See self::onSkinTemplateNavigation. @@ -134,20 +146,28 @@ class Hooks { * @param array &$content_navigation */ private static function updateUserLinksItems( $sk, &$content_navigation ) { + $COLLAPSE_MENU_ITEM_CLASS = 'user-links-collapsible-item'; + // If the consolidate user links feature is enabled, rearrange some links in the personal toolbar. if ( VectorServices::getFeatureManager()->isFeatureEnabled( Constants::FEATURE_CONSOLIDATE_USER_LINKS ) ) { if ( $sk->loggedin ) { - // Remove user page from personal menu dropdown for logged in users. - unset( $content_navigation['user-menu']['userpage'] ); + // Remove user page from personal menu dropdown for logged in users at higher resolutions. + self::appendClassToUserLink( + $content_navigation['user-menu']['userpage'], + $COLLAPSE_MENU_ITEM_CLASS + ); // Remove logout link from user-menu and recreate it in SkinVector, unset( $content_navigation['user-menu']['logout'] ); } else { // Remove "Not logged in" from personal menu dropdown for anon users. unset( $content_navigation['user-menu']['anonuserpage'] ); - // Create account is pulled out into its own button. - unset( $content_navigation['user-menu']['createaccount'] ); + // Create account is pulled out into its own button and hidden at higher resolutions. + self::appendClassToUserLink( + $content_navigation['user-menu']['createaccount'], + $COLLAPSE_MENU_ITEM_CLASS + ); // "Login" link is handled manually by Vector unset( $content_navigation['user-menu']['login'] ); } @@ -337,6 +357,14 @@ class Hooks { $bodyAttrs['class'] .= ' skin-vector-search-vue'; } + if ( + VectorServices::getFeatureManager()->isFeatureEnabled( + Constants::FEATURE_CONSOLIDATE_USER_LINKS + ) + ) { + $bodyAttrs['class'] .= ' skin-vector-consolidated-user-links'; + } + $config = $sk->getConfig(); // Should we disable the max-width styling? if ( !self::isSkinVersionLegacy() && $sk->getTitle() && self::shouldDisableMaxWidth( diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 84f27a5..9336c26 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -239,9 +239,10 @@ class SkinVector extends SkinMustache { * Returns template data for UserLinks.mustache * @param array $menuData existing menu template data to be transformed and copied for UserLinks * @param bool $isAnon if the user is logged out, used to conditionally provide data + * @param array $searchBoxData representing search box. * @return array */ - private function getUserLinksTemplateData( $menuData, $isAnon ) : array { + private function getUserLinksTemplateData( $menuData, $isAnon, $searchBoxData ) : array { $returnto = $this->getReturnToParam(); $useCombinedLoginLink = $this->useCombinedLoginLink(); $htmlCreateAccount = $this->getCreateAccountHTML( $returnto ); @@ -313,8 +314,6 @@ class SkinVector extends SkinMustache { 'sidebar-visible' => $this->isSidebarVisible(), 'is-language-in-header' => $this->isLanguagesInHeader(), - - 'should-search-expand' => $this->shouldSearchExpand(), ] ); if ( $skin->getUser()->isRegistered() ) { @@ -328,16 +327,53 @@ class SkinVector extends SkinMustache { ]; } - if ( $this->shouldConsolidateUserLinks() ) { + $shouldConsolidateUserLinks = $this->shouldConsolidateUserLinks(); + if ( $shouldConsolidateUserLinks ) { $commonSkinData['data-vector-user-links'] = $this->getUserLinksTemplateData( $commonSkinData['data-portlets'], - $commonSkinData['is-anon'] + $commonSkinData['is-anon'], + $commonSkinData['data-search-box'] ); } + $commonSkinData['data-search-box'] = $this->getSearchData( + $commonSkinData['data-search-box'], + $shouldConsolidateUserLinks + ); + return $commonSkinData; } + /** + * Annotates search box with Vector-specific information + * + * @param array $searchBoxData + * @param bool $shouldConsolidateUserLinks + * @return array modified version of $searchBoxData + */ + private function getSearchData( array $searchBoxData, bool $shouldConsolidateUserLinks ) { + $searchClass = 'vector-search-box'; + + if ( $shouldConsolidateUserLinks ) { + $searchClass .= ' vector-search-box-collapses'; + } + + if ( $this->shouldSearchExpand() ) { + $searchClass .= ' vector-search-box-show-thumbnail'; + } + + // Annotate search box with a component class. + $searchBoxData['class'] = $searchClass; + $searchBoxData['is-collapsible'] = $shouldConsolidateUserLinks; + + // At lower resolutions the search input is hidden search and only the submit button is shown. + // It should behave like a form submit link (e.g. submit the form with no input value). + // We'll wire this up in a later task T284242. + $searchBoxData['href-search'] = Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl(); + + return $searchBoxData; + } + /** * Gets the value of the "input-location" parameter for the SearchBox Mustache template. * diff --git a/includes/templates/SearchBox.mustache b/includes/templates/SearchBox.mustache index 5618290..83a8f78 100644 --- a/includes/templates/SearchBox.mustache +++ b/includes/templates/SearchBox.mustache @@ -1,24 +1,32 @@ {{! See @typedef SearchData }} -