golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Ensure userAvatar icon is only used in logged in users 

Additional change: A bundlesize increase is required given
recent developments in the user menu.

Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
This commit is contained in:
bwang 2021-06-24 14:13:20 -05:00 committed by Jdlrobson
parent 6597bc7d86
commit 0a75e2e627
7 changed files with 60 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.storybook/icons.less
View File

@ -55,9 +55,16 @@
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Elog out%3C/title%3E%3Cpath d='M3 3h8V1H3a2 2 0 00-2 2v14a2 2 0 002 2h8v-2H3z'/%3E%3Cpath d='M13 5v4H5v2h8v4l6-5z'/%3E%3C/svg%3E");
}
.mw-ui-icon-wikimedia-userAvatar:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg==") !important;
}
.mw-ui-icon-wikimedia-ellipsis:before {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eellipsis%3C/title%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='17' cy='10' r='2'/%3E%3C/svg%3E%0A") !important;
}
#pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a,
#p-new-personal-label {
#pt-userpage a {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg==") !important;
background-repeat: no-repeat;
}

6
bundlesize.config.json
View File

@ -5,7 +5,7 @@
},
{
"resourceModule": "skins.vector.styles",
"maxSize": "10 kB"
"maxSize": "11 kB"
},
{
"resourceModule": "skins.vector.legacy.js",
@ -14,5 +14,9 @@
{
"resourceModule": "skins.vector.search",
"maxSize": "3 kB"
},
{
"resourceModule": "skins.vector.icons",
"maxSize": "500 B"
}
]

7
includes/SkinVector.php
View File

@ -479,8 +479,13 @@ class SkinVector extends SkinMustache {
if ( $portletData['id'] === 'p-personal' ) {
if ( $this->shouldConsolidateUserLinks() ) {
$portletData['class'] .= ' vector-user-menu';
// Replace dropdown arrow with ellipsis icon if feature flag is enabled and user is logged in.
$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'] .= $this->loggedin ?
' mw-ui-icon-wikimedia-userAvatar' :
' mw-ui-icon-wikimedia-ellipsis';
} else {
$portletData['class'] .= ' vector-user-menu-legacy';
}

3
resources/common/components/UserLinks.less
View File

@ -14,8 +14,7 @@
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a,
#p-personal-label {
.vector-user-menu-legacy #pt-userpage a {
background-image: url( images/user-avatar.svg );
background-repeat: no-repeat;
background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;

36
resources/skins.vector.styles/components/UserLinks.less
View File

@ -15,15 +15,7 @@
h3 {
height: 100%;
min-width: 48px;
// Override background size from common/components/UserLinks.less
// stylelint-disable-next-line declaration-no-important
background-size: auto !important;
background-position: 25%;
&:after {
background-position: 100% 0%;
}
padding: 0;
}
.vector-menu-checkbox {
@ -98,6 +90,32 @@
}
}
.vector-user-menu-logged-out h3 {
&:before {
height: 100%;
}
&:after {
content: none;
}
}
.vector-user-menu-logged-in h3 {
min-width: 48px;
&:before {
left: -25%;
top: 0;
bottom: 0;
background-size: auto;
color: #54595d;
}
&:after {
background-position: 100% 0%;
}
}
.mw-portlet-notifications {
li {
float: left;

1
skin.json
View File

@ -147,6 +147,7 @@
"variants": [],
"icons": [
"language",
"ellipsis",
"userAvatar",
"userTalk",
"markup",

22
stories/UserLinks.stories.data.js
View File

@ -61,22 +61,21 @@ const PERSONAL_MENU_TEMPLATE_DATA = {
loggedInWithULS
};
const additionalMenuData = {
class: 'vector-user-menu vector-menu-dropdown',
'is-dropdown': true,
'heading-class': 'mw-ui-icon mw-ui-icon-element'
};
const loggedInData = {
'is-anon': true,
class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-in',
'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-userAvatar',
'is-anon': false,
'html-after-portal': `
<div id="pt-logout" class="vector-user-menu-login">
<a class="vector-menu-content-item mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-logOut" data-mw="interface" href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page">Log out</a>
</div>
`
`,
'is-dropdown': true
};
const loggedOutData = {
class: 'vector-user-menu vector-menu-dropdown vector-user-menu-logged-out',
'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis',
'is-anon': true,
'html-before-portal': `
<div class="vector-user-menu-login">
@ -87,7 +86,8 @@ const loggedOutData = {
Pages for logged out editors (<a href="/wiki/Help:Introduction">learn more</a>):
</p>
</div>
`
`,
'is-dropdown': true
};
/**
@ -97,7 +97,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = {
'is-anon': false,
'data-user-page': helperMakeMenuData( 'user-page', USERNAME_ITEM ),
'data-notifications': helperMakeMenuData( 'notifications', ECHO_ITEMS ),
'data-user-menu': helperMakeMenuData( 'new-personal', USER_LINKS_ITEMS, Object.assign( {}, additionalMenuData, loggedInData ) )
'data-user-menu': helperMakeMenuData( 'new-personal', USER_LINKS_ITEMS, loggedInData )
};
/**
@ -106,7 +106,7 @@ const USER_LINKS_LOGGED_IN_TEMPLATE_DATA = {
const USER_LINKS_LOGGED_OUT_TEMPLATE_DATA = {
'is-anon': true,
'html-create-account': `<a href="/w/index.php?title=Special:CreateAccount&amp;returnto=Main+Page" class="mw-ui-button mw-ui-quiet" title="You are encouraged to create an account and log in; however, it is not mandatory">Create account</a>`,
'data-user-menu': helperMakeMenuData( 'new-personal', ANON_USER_LINKS_ITEMS, Object.assign( {}, additionalMenuData, loggedOutData ) )
'data-user-menu': helperMakeMenuData( 'new-personal', ANON_USER_LINKS_ITEMS, loggedOutData )
};
export {