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

Both UserMenu stylesheets should be shipped in modern 

Since we have feature flagged the new user menu feature, it is
imperative we load both sets of styles until the feature has
shipped. This allows us to switch seamlessly between the two
without worrying about cached HTML being served with updated CSS.

To do this, we add a new class to both user menu's distinguishing
the legacy version from the modern version. The styles are then
scoped to these new selectors.

This also fixes some regressions with the legacy user menu in
modern Vector when wgVectorConsolidateUserLinks is disabled.

Notes:
* No caching selector is needed for #pt-userpage given it can only
ever be output for logged in users.
* ID selectors in general are bad, so scoping to mw-portlet-personal-user-menu-legacy
isolates the legacy component allowing it to be rendered alongside the modern UserMenu

Bug: T276561
Change-Id: I068c5233bb25a7b141e66a6726b5761841f83eb2
This commit is contained in:
jdlrobson 2021-05-14 08:25:48 -07:00
parent efaf3aadf3
commit 6998c536d4
5 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
includes/SkinVector.php
View File

@ -337,12 +337,14 @@ class SkinVector extends SkinMustache {
];
$portletData['heading-class'] = 'vector-menu-heading';
// Add target class to apply different icon to personal menu dropdown for logged in users.
if ( $portletData['id'] === 'p-personal' && $this->shouldConsolidateUserLinks() &&
!$this->getUser()->isAnon()
) {
$portletData['heading-class'] .= ' mw-portlet-personal-page__heading--auth';
// 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';
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['heading-class'] .= ' mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis';
} else {
$portletData['class'] .= ' vector-user-menu-legacy';
}
}
if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
$portletData = $this->createULSLanguageButton( $portletData );

15
resources/skins.vector.styles.legacy/components/UserMenu.less
View File

@ -3,18 +3,24 @@
// Legacy overrides for the UserMenu
/* Personal Menu */
.vector-user-menu-legacy li,
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
#p-personal li {
font-size: @font-size-nav-personal;
}
/* Icon for registered user names & anonymous message */
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production */
#pt-anonuserpage,
#pt-userpage a {
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
background-position: @background-position-nav-personal-icon;
padding-top: 0.5em;
}
#pt-userpage {
.vector-user-menu-legacy #pt-userpage {
padding-top: 0;
a {
@ -23,6 +29,9 @@
}
/* Show anonymous "Not logged in" text in gray */
#pt-anonuserpage {
/* FIXME: the following selector is for cached HTML. It can be removed when
I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
#pt-anonuserpage,
.vector-user-menu-legacy #pt-anonuserpage {
color: #54595d;
}

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

@ -1,12 +1,12 @@
@import '../../common/variables.less';
// Overrides personal menu styles for consolidated user links.
.mw-portlet-personal.vector-menu-dropdown h3:after {
.vector-user-menu.vector-menu-dropdown h3:after {
padding: 0.4em 0 0.4em 0;
content: none;
}
#p-personal.vector-menu-dropdown {
.vector-user-menu.vector-menu-dropdown {
.vector-menu-checkbox {
&:hover + h3 {
background-color: @colorGray14;
@ -24,7 +24,10 @@
justify-content: flex-start;
li {
font-size: 100%;
// 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%;
&:hover {
@ -47,6 +50,8 @@
// Since user-page is pulled out of the personal menu for modern vector,
// apply styles for the top-level user-page menu.
// FIXME: This is currently not isolated to the UserMenu component
// as it is rendered separately outside the `.vector-user-menu` class.
#p-user-page {
li {
padding-bottom: 0.5em;

2
resources/skins.vector.styles/skin.less
View File

@ -15,6 +15,8 @@
@import './components/VueEnhancedSearchBox.less';
@import './components/Sidebar.less';
@import './components/LanguageButton.less';
// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed.
@import '../skins.vector.styles.legacy/components/UserMenu.less';
@import './components/UserMenu.less';
}

2
tests/phpunit/integration/SkinVectorTest.php
View File

@ -110,7 +110,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
$actions['class']
);
$this->assertSame(
'mw-portlet mw-portlet-personal vector-menu',
'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
$props['data-personal']['class']
);
}