diff --git a/.storybook/icons.less b/.storybook/icons.less index c03022f..c296cfd 100644 --- a/.storybook/icons.less +++ b/.storybook/icons.less @@ -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; } diff --git a/includes/SkinVector.php b/includes/SkinVector.php index f880588..bd74b80 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -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'; } diff --git a/resources/common/components/UserLinks.less b/resources/common/components/UserLinks.less index 3098b3c..54c9469 100644 --- a/resources/common/components/UserLinks.less +++ b/resources/common/components/UserLinks.less @@ -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; diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index df7a7ff..8d39ca5 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -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; } diff --git a/skin.json b/skin.json index 47b84f5..bcaac22 100644 --- a/skin.json +++ b/skin.json @@ -146,7 +146,6 @@ "variants": [], "icons": [ "language", - "ellipsis", "userTalk", "markup", "settings", diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js index a95f4bf..70f2cc0 100644 --- a/stories/UserLinks.stories.data.js +++ b/stories/UserLinks.stories.data.js @@ -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 = {