wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-24 06:13:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use text-overflow: ellipsis on .mw-ui-icon-before span elements

Browse source 
Placing the text overflow on the span instead of the anchor element
prevents issues like T287522#7272991 from occurring.

Additionally:

* Uses the `text-overflow` mixin on every toggle list item label instead
of just the user link item as it simplifies the logic and presumably
we'd want any text that overflows the menu to be handled the same.

* Changes the anchor element to use flexbox/align-items to vertically
center instead of relying on `vertical-align` both the span and the
icon. Eventually, this should be put into core (see
I029f97ba9d5e7f46c8aa175d9a6bbb45ef9615df) but we have to remove all the
overrides that use vertical-align first.

Bug: T287522
Change-Id: Ie0fbff9dfaf8444c76125df52931a687730b4ad1
This commit is contained in:
Nicholas Ray 2021-08-10 18:13:09 -06:00
parent b94edbd3e2
commit 46ac6048d7
3 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/ToggleList/MenuListItem.less
View file

@ -16,8 +16,12 @@
}
.toggle-list-item__anchor {
display: block;
line-height: 1;
// Override .mw-ui-icon `display: inline-block` so that the text is
// vertically centered. It also avoids whitespace issues.
display: flex;
align-items: center;
// Override .mw-ui-icon `line-height: 0` so that the text is visible.
line-height: inherit;
&:hover {
text-decoration: none;
@ -29,11 +33,9 @@
}
.toggle-list-item__label {
// Left-align text. Button elements are centered.
text-align: left;
color: @grayMediumDark;
font-weight: bold;
white-space: nowrap;
vertical-align: middle;
font-size: @font-size-minerva-small;
// Overflow text is ellipsized in one line.
.text-overflow( @visible: false );
}

2
includes/Menu/Entries/ProfileMenuEntry.php
View file

@ -85,7 +85,7 @@ final class ProfileMenuEntry implements IProfileMenuEntry {
'text' => $this->customProfileLabel ?? $username,
'href' => $this->customProfileURL ?? Title::newFromText( $username, NS_USER )->getLocalURL(),
'class' => MinervaUI::iconClass( 'userAvatar-base20',
'before', 'truncated-text primary-action', 'wikimedia' ),
'before', 'primary-action', 'wikimedia' ),
'data-event-name' => 'menu.' . (
$this->profileTrackingCode ?? self::DEFAULT_PROFILE_TRACKING_CODE )
] ];

13
resources/skins.minerva.mainMenu.styles/MainMenuItem.less
View file

@ -43,11 +43,15 @@
a {
color: @colorGray5;
display: block;
// Overrides .mw-ui-icon `display: inline-block` so that the text is
// vertically centered. It also avoids whitespace issues.
display: flex;
align-items: center;
// Overrides .mw-ui-icon `line-height: 0` property so that the text is
// visible.
line-height: inherit;
max-width: 100%;
padding: @menuLinkLineHeight / 2 10px @menuLinkLineHeight / 2 15px;
// Overflow text is ellipsized in one line.
.text-overflow( @visible: false );
// T233166
&.secondary-action {
@ -60,9 +64,10 @@
}
span {
// Overflow text is ellipsized in one line.
.text-overflow( @visible: false );
font-size: @font-size-minerva-small;
font-weight: bold;
vertical-align: middle;
}
}
}