wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update user menu icon and storybook

Browse source 
Bug: T284748
Change-Id: Icdbfd882490b380871befd3c6606c4b48d225132
This commit is contained in:
bwang 2021-06-18 15:30:05 -05:00 committed by Bernard Wang
parent 9f925d23fd
commit 8389de9cb9
6 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.storybook/icons.less
View file

@ -1,3 +1,7 @@
.vector-menu-dropdown h3:after {
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='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23202122' d='m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/%3E%3C/svg%3E%0A") !important;
}
.mw-wiki-logo {
background-image: url(https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png);
background-size: 135px auto;
@ -24,10 +28,8 @@
}
#pt-anonuserpage,
#pt-userpage a {
#pt-userpage a,
#p-new-personal-label {
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") !important;
background-repeat: no-repeat;
}

2
includes/SkinVector.php
View file

@ -439,7 +439,7 @@ class SkinVector extends SkinMustache {
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['heading-class'] .= ' mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis';
$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element';
} else {
$portletData['class'] .= ' vector-user-menu-legacy';
}

2
resources/common/components/UserLinks.less
View file

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

16
resources/skins.vector.styles/components/UserLinks.less
View file

@ -8,20 +8,19 @@
// Overrides personal menu styles for consolidated user links.
.vector-user-menu {
margin: 0 0 0 12px;
height: 100%;
h3 {
margin: 0 0 0 12px;
padding: 0;
height: 100%;
&:before {
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 {
padding: 0.4em 0 0.4em 0;
content: none;
background-position: 100% 0%;
}
}
@ -105,7 +104,6 @@
a {
background-position: left center;
padding-left: 1.5em;
color: #000;
text-decoration: none;
}

1
skin.json
View file

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

3
stories/UserLinks.stories.data.js
View file

@ -50,8 +50,9 @@ const PERSONAL_MENU_TEMPLATE_DATA = {
const additionalMenuData = {
class: 'vector-user-menu vector-menu-dropdown',
'is-dropdown': true,
'msg-vector-anon-user-menu-pages': `Pages for logged out editors`,
'heading-class': 'mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis'
'heading-class': 'mw-ui-icon mw-ui-icon-element'
};
const loggedInData = {