Merge "Create new user menu template for consolidated user links in logged out users"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
0141be5080
|
|
@ -27,5 +27,7 @@
|
|||
"vector-jumptosearch": "Jump to search",
|
||||
"vector-jumptocontent": "Jump to content",
|
||||
"vector-more-actions": "More",
|
||||
"vector-search-loader": "Loading search suggestions"
|
||||
"vector-search-loader": "Loading search suggestions",
|
||||
"vector-anon-user-menu-pages": "Pages for logged out editors",
|
||||
"vector-anon-user-menu-pages-learn": "learn more"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,5 +39,7 @@
|
|||
"vector-jumptosearch": "Accessibility link for jumping to the site search. Visually hidden by default.\n\nSee also\n* {{msg-mw|Search}}",
|
||||
"vector-jumptocontent": "Accessibility link for jumping to the content and skipping the navigation. Visually hidden by default.",
|
||||
"vector-more-actions": "Label in the Vector skin's menu for the less-important or rarer actions which are not shown as tabs (like moving the page, or for sysops deleting or protecting the page), as well as (for users with a narrow viewing window in their browser) the less-important tab actions which the user's browser is unable to fit in. {{Identical|More}}",
|
||||
"vector-search-loader": "Text to display below search input while the search suggestion module is loading"
|
||||
"vector-search-loader": "Text to display below search input while the search suggestion module is loading",
|
||||
"vector-anon-user-menu-pages": "Label describing the anon editor links in the anon user menu",
|
||||
"vector-anon-user-menu-pages-learn": "Lowercase text of link that goes to Help:Introduction and helps the user learn more about editing"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,29 @@ class Hooks {
|
|||
$config['search'] = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transforms watch item inside the action navigation menu
|
||||
*
|
||||
* @param array &$content_navigation
|
||||
*/
|
||||
private static function updateActionsMenu( &$content_navigation ) {
|
||||
$key = null;
|
||||
if ( isset( $content_navigation['actions']['watch'] ) ) {
|
||||
$key = 'watch';
|
||||
}
|
||||
if ( isset( $content_navigation['actions']['unwatch'] ) ) {
|
||||
$key = 'unwatch';
|
||||
}
|
||||
|
||||
// Promote watch link from actions to views and add an icon
|
||||
if ( $key !== null ) {
|
||||
$content_navigation['views'][$key] = self::navigationLinkToIcon(
|
||||
$content_navigation['actions'][$key]
|
||||
);
|
||||
unset( $content_navigation['actions'][$key] );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add icon class to an existing navigation item inside a menu hook.
|
||||
* See self::onSkinTemplateNavigation.
|
||||
|
|
@ -96,6 +119,37 @@ class Hooks {
|
|||
return $item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates personal navigation menu (user links) depending on the consolidated user links feature flag
|
||||
* When on, user page, create account and login links are removed from the dropdown to be handled separately
|
||||
* When off, the custom "user-page" bucket is removed to preserve existing behavior
|
||||
*
|
||||
* @param SkinTemplate $sk
|
||||
* @param array &$content_navigation
|
||||
*/
|
||||
private static function updateUserLinksItems( $sk, &$content_navigation ) {
|
||||
// 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'] );
|
||||
} 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'] );
|
||||
// "Login" link is handled by UserMenu
|
||||
unset( $content_navigation['user-menu']['login'] );
|
||||
}
|
||||
} else {
|
||||
// Remove user page from personal toolbar since it will be inside the personal menu for logged in
|
||||
// users when the feature flag is disabled.
|
||||
unset( $content_navigation['user-page'] );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Upgrades Vector's watch action to a watchstar.
|
||||
*
|
||||
|
|
@ -105,43 +159,20 @@ class Hooks {
|
|||
*/
|
||||
public static function onSkinTemplateNavigation( $sk, &$content_navigation ) {
|
||||
$title = $sk->getRelevantTitle();
|
||||
if (
|
||||
$sk->getConfig()->get( 'VectorUseIconWatch' ) &&
|
||||
$sk->getSkinName() === 'vector' &&
|
||||
$title && $title->canExist()
|
||||
) {
|
||||
if ( !self::isSkinVersionLegacy()
|
||||
&& isset( $content_navigation['user-menu'] )
|
||||
|
||||
if ( $sk->getSkinName() === 'vector' ) {
|
||||
if (
|
||||
$sk->getConfig()->get( 'VectorUseIconWatch' ) &&
|
||||
$title && $title->canExist()
|
||||
) {
|
||||
// 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'] );
|
||||
}
|
||||
} else {
|
||||
// Remove user page from personal toolbar since it will be inside the personal menu for logged in
|
||||
// users when the feature flag is disabled.
|
||||
unset( $content_navigation['user-page'] );
|
||||
}
|
||||
self::updateActionsMenu( $content_navigation );
|
||||
}
|
||||
|
||||
$key = null;
|
||||
if ( isset( $content_navigation['actions']['watch'] ) ) {
|
||||
$key = 'watch';
|
||||
}
|
||||
if ( isset( $content_navigation['actions']['unwatch'] ) ) {
|
||||
$key = 'unwatch';
|
||||
}
|
||||
|
||||
// Promote watch link from actions to views and add an icon
|
||||
if ( $key !== null ) {
|
||||
$content_navigation['views'][$key] = self::navigationLinkToIcon(
|
||||
$content_navigation['actions'][$key]
|
||||
);
|
||||
unset( $content_navigation['actions'][$key] );
|
||||
if (
|
||||
!self::isSkinVersionLegacy() &&
|
||||
isset( $content_navigation['user-menu'] )
|
||||
) {
|
||||
self::updateUserLinksItems( $sk, $content_navigation );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,6 +205,8 @@ class SkinVector extends SkinMustache {
|
|||
|
||||
'is-article' => (bool)$out->isArticle(),
|
||||
|
||||
'is-anon' => $this->getUser()->isAnon(),
|
||||
|
||||
'is-mainpage' => $title->isMainPage(),
|
||||
// Remember that the string '0' is a valid title.
|
||||
// From OutputPage::getPageTitle, via ::setPageTitle().
|
||||
|
|
@ -230,6 +232,35 @@ class SkinVector extends SkinMustache {
|
|||
'mw-prefsection-rendering-skin-skin-prefs'
|
||||
)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
|
||||
];
|
||||
} else {
|
||||
$returnto = $this->getReturnToParam();
|
||||
$useCombinedLoginLink = $this->useCombinedLoginLink();
|
||||
|
||||
// Get data for login and create account buttons for anon user menu
|
||||
// 'single-id' must be provided for `makeLink` to populate `title`, `accesskey` and other attributes
|
||||
$loginData = $this->buildLoginData( $returnto, $useCombinedLoginLink );
|
||||
$loginData['single-id'] = 'pt-login';
|
||||
$loginData['class'] = 'vector-menu-content-item';
|
||||
|
||||
$createAccountData = $this->buildCreateAccountData( $returnto );
|
||||
$createAccountData['single-id'] = 'pt-createaccount';
|
||||
$createAccountData['class'] = 'mw-ui-button mw-ui-quiet';
|
||||
|
||||
$learnMoreLinkData = [
|
||||
'text' => $this->msg( 'vector-anon-user-menu-pages-learn' )->text(),
|
||||
'href' => Title::newFromText( 'Help:Introduction' )->getLocalURL(),
|
||||
];
|
||||
$learnMoreLink = $this->makeLink( '', $learnMoreLinkData );
|
||||
|
||||
$commonSkinData['data-userlinks'] = [
|
||||
'html-create-account' => $this->makeLink( 'create-account', $createAccountData ),
|
||||
|
||||
'html-login' => $this->makeLink( 'login', $loginData ),
|
||||
|
||||
'html-vector-anon-user-menu-pages-learn' => $this->msg( 'parentheses' )->
|
||||
rawParams( $learnMoreLink )->
|
||||
escaped(),
|
||||
];
|
||||
}
|
||||
|
||||
return $commonSkinData;
|
||||
|
|
@ -363,8 +394,7 @@ class SkinVector extends SkinMustache {
|
|||
) : array {
|
||||
switch ( $label ) {
|
||||
case 'user-menu':
|
||||
$type = $this->shouldConsolidateUserLinks() && $this->getUser()->isRegistered() ?
|
||||
self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_DEFAULT;
|
||||
$type = $this->shouldConsolidateUserLinks() ? self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_DEFAULT;
|
||||
break;
|
||||
case 'actions':
|
||||
case 'variants':
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<div class="vector-user-links">
|
||||
{{#data-notifications}}{{>Menu}}{{/data-notifications}}
|
||||
{{#data-user-page}}{{>Menu}}{{/data-user-page}}
|
||||
{{#data-user-menu}}{{>Menu}}{{/data-user-menu}}
|
||||
</div>
|
||||
{{#is-anon}}
|
||||
<div id="p-createaccount">
|
||||
{{#data-userlinks}}{{{html-create-account}}}{{/data-userlinks}}
|
||||
</div>
|
||||
{{/is-anon}}
|
||||
{{^is-anon}}
|
||||
{{#data-notifications}}{{>Menu}}{{/data-notifications}}
|
||||
{{#data-user-page}}{{>Menu}}{{/data-user-page}}
|
||||
{{/is-anon}}
|
||||
{{#data-user-menu}}{{>UserMenu}}{{/data-user-menu}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
{{!
|
||||
See @typedef UserMenuDefinition
|
||||
UserMenu is a copy of Menu and needs to be kept in sync
|
||||
}}
|
||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||
<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}
|
||||
{{{html-user-language-attributes}}}>
|
||||
<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
|
||||
<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>
|
||||
<span>{{label}}</span>
|
||||
</h3>
|
||||
<div class="vector-menu-content">
|
||||
{{#is-anon}}
|
||||
{{#data-userlinks}}
|
||||
<div class="vector-user-menu-login">{{{html-login}}}</div>
|
||||
<div class="vector-user-menu-anon-editor">
|
||||
<p>
|
||||
{{msg-vector-anon-user-menu-pages}} {{{html-vector-anon-user-menu-pages-learn}}}:
|
||||
</p>
|
||||
</div>
|
||||
{{/data-userlinks}}
|
||||
{{/is-anon}}
|
||||
<ul class="vector-menu-content-list">
|
||||
{{{html-items}}}
|
||||
</ul>
|
||||
{{{html-after-portal}}}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -2,12 +2,27 @@
|
|||
|
||||
.vector-user-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
|
||||
// Overrides personal menu styles for consolidated user links.
|
||||
.vector-user-menu.vector-menu-dropdown {
|
||||
h3:after {
|
||||
padding: 0.4em 0 0.4em 0;
|
||||
content: none;
|
||||
.vector-user-menu {
|
||||
height: 100%;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0 12px;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
||||
&:before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
padding: 0.4em 0 0.4em 0;
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-checkbox {
|
||||
|
|
@ -18,47 +33,85 @@
|
|||
}
|
||||
|
||||
.vector-menu-content {
|
||||
min-width: 200px;
|
||||
top: 100%;
|
||||
left: unset;
|
||||
right: 0;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.vector-menu-content-list {
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
// FIXME: the following font-size rule is for cached HTML. It can be removed when
|
||||
// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
font-size: 100% !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorGray14;
|
||||
background-color: @background-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
li#pt-logout {
|
||||
border-top: 1px solid @border-color-base;
|
||||
}
|
||||
|
||||
a,
|
||||
&:hover,
|
||||
&:visited {
|
||||
a {
|
||||
display: block;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-createaccount {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
#p-user-page {
|
||||
li {
|
||||
margin-left: 1em;
|
||||
padding-bottom: 0.5em;
|
||||
|
||||
a {
|
||||
background-position: left center;
|
||||
padding-left: 1.5em;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-notifications {
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
// Copied from https://github.com/wikimedia/Vector/blob/master/resources/common/components/MenuDropdown.less#L88
|
||||
.vector-user-menu-anon-editor,
|
||||
.vector-user-menu-login {
|
||||
padding: 0.625em;
|
||||
margin: 0;
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
// "Login" link in anonymous user menus
|
||||
.vector-user-menu-login {
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
|
||||
&:hover {
|
||||
background-color: @background-color-secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// "Log out" link in logged in user menus
|
||||
#pt-logout {
|
||||
border-top: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -251,26 +251,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#p-personal,
|
||||
.mw-portlet-notifications {
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-portlet-personal.vector-menu-dropdown {
|
||||
h3 {
|
||||
margin: 0 0 0 12px;
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
|
||||
.vector-menu-content {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
// When ConsolidateUserLinks is off, "vector-user-menu-legacy" is used in modern Vector
|
||||
.vector-user-menu-legacy {
|
||||
flex-grow: 1;
|
||||
flex-basis: @min-width-personal-tools;
|
||||
margin-left: @margin-horizontal-search;
|
||||
|
|
@ -278,21 +260,6 @@ body {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#p-personal.vector-menu-dropdown {
|
||||
flex-grow: inherit;
|
||||
flex-basis: inherit;
|
||||
margin-left: inherit;
|
||||
float: inherit;
|
||||
|
||||
li {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#p-user-page li {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#mw-sidebar-button {
|
||||
float: left; // Browser: IE9 support - button as flex-child fallback.
|
||||
margin-left: -@margin-horizontal-sidebar-button-icon;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@
|
|||
],
|
||||
"messages": [
|
||||
"createaccount",
|
||||
"vector-anon-user-menu-pages",
|
||||
"vector-anon-user-menu-pages-learn",
|
||||
"parentheses",
|
||||
"otherlanguages",
|
||||
"tooltip-p-logo",
|
||||
"vector-opt-out-tooltip",
|
||||
|
|
|
|||
|
|
@ -65,3 +65,11 @@
|
|||
/**
|
||||
* @typedef {Object.<string, MenuDefinition>} MenuDefinitions
|
||||
*/
|
||||
|
||||
/*
|
||||
* @typedef {MenuDefinition} UserMenuDefinition
|
||||
* @property {boolean} [is-anon]
|
||||
* @property {string} [html-login]
|
||||
* @property {string} [msg-vector-anon-user-menu-pages]
|
||||
* @property {string} [html-vector-anon-user-menu-pages-learn]
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue