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

Cleanup styles for personal user dropdown menu. 

Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component.

Bug: T276561
Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
This commit is contained in:
Clare Ming 2021-05-06 16:42:00 -06:00 committed by Jdlrobson
parent 234659e3e3
commit 63f9dd81e3
7 changed files with 103 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/common/common.less
View File

@ -22,6 +22,7 @@
@import './components/SearchBox.less';
@import './components/SidebarLogo.less';
@import './components/Footer.less';
@import './components/UserMenu.less';
}
@media print {

48
resources/common/components/Menu.less
View File

@ -1,16 +1,6 @@
@import '../variables.less';
@import 'mediawiki.mixins.less';
/* Personal Menu */
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
align-items: baseline;
}
/* Personal Menu */
.mw-portlet {
// Hidden by default, but displayed by certain menus
// e.g. MenuPortal
@ -31,41 +21,3 @@
line-height: @line-height-nav-personal;
}
}
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
#pt-userpage a,
#p-user-page a {
background-image: url( images/user-avatar.svg );
background-position: @background-position-nav-personal-icon;
background-repeat: no-repeat;
background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;
// Same as `#p-personal li` above
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
padding-left: 16px !important; // stylelint-disable-line declaration-no-important
}
#p-user-page a {
// Overrides directly above: padding-left: 16px !important; which does not allow for enough space between the
// personal icon asset and the user page link in the personal toolbar.
padding-left: 25px !important; // stylelint-disable-line declaration-no-important
}
#pt-userpage {
padding-top: 0 !important; // stylelint-disable-line declaration-no-important
a {
display: inline-block;
}
}
/* Show anonymous "Not logged in" text in gray */
#pt-anonuserpage {
color: #54595d;
}
#p-user-page .vector-menu-content-list {
#ca-userpage {
padding-top: 0;
}
}

24
resources/common/components/UserMenu.less Normal file
View File

@ -0,0 +1,24 @@
// Common styles for the UserMenu component.
@import '../variables.less';
@import 'mediawiki.mixins.less';
/* Personal Menu */
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
align-items: baseline;
}
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
#pt-userpage a,
#p-user-page a {
background-image: url( images/user-avatar.svg );
background-repeat: no-repeat;
background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;
padding-top: 0;
padding-left: 1.5em;
}

5
resources/common/typography.less
View File

@ -31,11 +31,6 @@ pre,
.mixin-screen-reader-text;
}
/* Personal Menu */
#p-personal li {
font-size: @font-size-nav-personal;
}
/* Allow edit sections outside of mw-body-content (T160269) */
.mw-editsection,
.mw-editsection-like {

28
resources/skins.vector.styles.legacy/components/UserMenu.less Normal file
View File

@ -0,0 +1,28 @@
@import '../../common/variables.less';
// Legacy overrides for the UserMenu
/* Personal Menu */
#p-personal li {
font-size: @font-size-nav-personal;
}
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
#pt-userpage a {
background-position: @background-position-nav-personal-icon;
padding-top: 0.5em;
}
#pt-userpage {
padding-top: 0;
a {
display: inline-block;
}
}
/* Show anonymous "Not logged in" text in gray */
#pt-anonuserpage {
color: #54595d;
}

1
resources/skins.vector.styles.legacy/skin-legacy.less
View File

@ -10,4 +10,5 @@
// Legacy specific components
@import './components/MenuDropdown.less';
@import './components/Sidebar.less';
@import './components/UserMenu.less';
}

56
resources/skins.vector.styles/components/UserMenu.less
View File

@ -1,17 +1,59 @@
@import '../../common/variables.less';
// Overrides personal menu styles for consolidated user links.
.mw-portlet-personal.vector-menu-dropdown h3:after {
padding: 0.4em 0 0.4em 0;
content: none;
}
#p-personal.vector-menu-dropdown .vector-menu-content-list {
justify-content: flex-start;
#p-personal.vector-menu-dropdown {
.vector-menu-checkbox {
&:hover + h3 {
background-color: @colorGray14;
border-radius: @border-radius-base;
}
}
li {
font-size: 100%;
.vector-menu-content {
top: 100%;
left: unset;
right: 0;
}
.vector-menu-content-list {
justify-content: flex-start;
li {
font-size: 100%;
width: 100%;
&:hover {
background-color: @colorGray14;
}
}
li#pt-logout {
border-top: 1px solid @border-color-base;
}
a,
&:hover,
&:visited {
color: #000;
text-decoration: none;
}
}
}
#p-personal .vector-menu-content {
left: unset;
right: 0;
// Since user-page is pulled out of the personal menu for modern vector,
// apply styles for the top-level user-page menu.
#p-user-page {
li {
padding-bottom: 0.5em;
a {
background-position: left center;
padding-left: 1.5em;
}
}
}