Remove .mw-ui-button styles from user-links overflow menu

Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
This commit is contained in:
Jan Drewniak 2022-08-04 09:14:11 -04:00
parent 4f4317c708
commit 5676097135
3 changed files with 18 additions and 16 deletions

View File

@ -287,7 +287,8 @@ class Hooks implements
if ( isset( $content_navigation['user-page']['userpage'] ) ) {
$content_navigation[$overflow]['userpage'] = array_merge(
$content_navigation['user-page']['userpage'], [
'button' => true,
// T312157: Style the userpage link as a blue link rather than a quiet button.
'button' => false,
'collapsible' => true,
// Remove icon
'icon' => '',
@ -317,7 +318,8 @@ class Hooks implements
$content_navigation[$overflow]['createaccount'] = array_merge(
$content_navigation['user-menu']['createaccount'], [
'id' => 'pt-createaccount-2',
'button' => true,
// T312157: Style the userpage link as a blue link rather than a quiet button.
'button' => false,
'collapsible' => true,
// Remove icon
'icon' => '',

View File

@ -1,8 +1,11 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';
@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
// Applies to links in the overflow menu that do not have the .mw-ui-button class.
@overflow-link-margin: 0 8px;
/**
* Container that holds both the horizontal menu and dropdown menus.
@ -57,6 +60,11 @@
align-items: center;
}
// Add margin to links that don't have the .mw-ui-button or related icon classes.
a:not( .mw-ui-button ):not( .mw-echo-notifications-badge ) {
margin: 0 8px;
}
.user-links-collapsible-item {
@media ( max-width: @min-width-tablet ) {
display: none;
@ -108,10 +116,15 @@
border-top: @border-width-base @border-style-base @colorGray14;
}
//User-page link in personal (dropdown) menu.
//User-page link in personal (overflow) menu.
#pt-userpage-2 {
max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );
a {
// T312157 Override redlink (.new) color for non-existant userpage
color: @color-primary;
}
span {
.text-overflow( @visible: false );
}

View File

@ -451,11 +451,6 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
$this->assertFalse( isset( $contentNav['user-page']['login'] ),
'updateUserLinksDropdownItems is called when not legacy'
);
$this->assertContains( 'mw-ui-button',
$contentNav['vector-user-menu-overflow']['userpage']['link-class'],
'updateUserLinksOverflowItems is called when not legacy'
);
Hooks::onSkinTemplateNavigation( $vectorLegacySkin, $contentNavLegacy );
$this->assertFalse( isset( $contentNavLegacy['user-page'] ),
'user-page is unset for legacy vector'
@ -564,14 +559,6 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
$content['vector-user-menu-overflow']['userpage']['class'],
'User page link in user links overflow requires collapsible class'
);
$this->assertContains( 'mw-ui-button',
$content['vector-user-menu-overflow']['userpage']['link-class'],
'User page link in user links overflow requires button classes'
);
$this->assertContains( 'mw-ui-quiet',
$content['vector-user-menu-overflow']['userpage']['link-class'],
'User page link in user links overflow requires quiet button classes'
);
$this->assertNotContains( 'mw-ui-icon',
$content['vector-user-menu-overflow']['userpage']['class'],
'User page link in user links overflow does not have icon classes'