wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-09-24 18:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show labels in page-actions menu on desktop widths

Browse source 
Adds labels to page-actions menu via a new
`.mw-ui-icon-with-label-desktop` class that shows labels at the
desktop break-point.

Bug: T226562
Change-Id: If57ab44660e0dc2a58c04fbf22dee6c27dd1f45f
This commit is contained in:
Jan Drewniak 2019-10-23 14:44:52 +02:00 committed by jdlrobson
parent 575a835e66
commit 77a1424e4e
5 changed files with 52 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
includes/menu/PageActions/PageActionsDirector.php
View file

@ -81,7 +81,10 @@ final class PageActionsDirector {
'checkboxID' => 'page-actions-overflow-checkbox',
'toggleID' => 'page-actions-overflow-toggle',
'listID' => $overflowMenu->getId(),
'toggleClass' => MinervaUI::iconClass( 'page-actions-overflow', 'element' ),
'toggleClass' => MinervaUI::iconClass(
'page-actions-overflow',
'element',
'mw-ui-icon-with-label-desktop' ),
'listClass' => 'page-actions-overflow-list toggle-list__list--drop-down',
'text' => $this->messageLocalizer->msg( 'minerva-page-actions-overflow' ),
'analyticsEventName' => 'ui.overflowmenu',

27
includes/menu/PageActions/ToolbarBuilder.php
View file

@ -116,7 +116,7 @@ class ToolbarBuilder {
$this->title,
$this->languagesHelper->doesTitleHasLanguagesOrVariants( $this->title ),
$this->messageLocalizer,
MinervaUI::iconClass( 'language-switcher', 'element' ) )
MinervaUI::iconClass( 'language-switcher', 'element', 'mw-ui-icon-with-label-desktop' ) )
);
}
@ -155,7 +155,7 @@ class ToolbarBuilder {
return PageActionMenuEntry::create(
'page-actions-contributions',
SpecialPage::getTitleFor( 'Contributions', $pageUser )->getLocalURL(),
MinervaUI::iconClass( 'contributions' ),
MinervaUI::iconClass( 'contributions', 'with-label-desktop' ),
$label,
'contributions'
@ -186,7 +186,11 @@ class ToolbarBuilder {
'page-actions-edit',
$title->getLocalURL( $editArgs ),
'edit-page '
. MinervaUI::iconClass( $editOrCreate ? 'edit-enabled' : 'edit', 'element' ),
. MinervaUI::iconClass(
$editOrCreate ? 'edit-enabled' : 'edit',
'element',
'mw-ui-icon-with-label-desktop'
),
$this->messageLocalizer->msg( 'mobile-frontend-editor-edit' ),
'edit'
);
@ -213,13 +217,20 @@ class ToolbarBuilder {
: $title->getLocalURL( [ 'action' => $newModeToSet ] );
if ( $isWatched ) {
$msg = $this->messageLocalizer->msg( 'unwatchthispage' );
$msg = $this->messageLocalizer->msg( 'unwatch' );
$icon = 'unStar-progressive';
} else {
$msg = $this->messageLocalizer->msg( 'watchthispage' );
$msg = $this->messageLocalizer->msg( 'watch' );
$icon = 'star-base20';
}
$iconClass = MinervaUI::iconClass( $icon, 'element', 'watch-this-article', 'wikimedia' );
$iconClass = MinervaUI::iconClass(
$icon,
'element',
'mw-ui-icon-with-label-desktop watch-this-article',
'wikimedia'
);
if ( $isWatched ) {
$iconClass .= ' watched';
}
@ -247,8 +258,8 @@ class ToolbarBuilder {
return new PageActionMenuEntry(
'page-actions-history',
$this->getHistoryUrl( $this->title ),
MinervaUI::iconClass( 'clock' ),
$this->messageLocalizer->msg( 'mobile-frontend-history' ),
MinervaUI::iconClass( 'clock', 'element', 'mw-ui-icon-with-label-desktop' ),
$this->messageLocalizer->msg( 'minerva-page-actions-history' ),
'history'
);
}

1
minerva.less/minerva.variables.less
View file

@ -43,6 +43,7 @@
//
@icon-touch-area-sm: 34;
@icon-touch-area-md: 44;
@icon-color: @colorGray5;
// Small icon
@icon-glyph-size-sm: 16;

2
resources/skins.minerva.base.styles/pageactions.less
View file

@ -44,6 +44,8 @@
flex-basis: 4em;
justify-content: flex-end;
align-items: center;
min-width: 0;
overflow: hidden;
li > *:hover {
box-shadow: none;

26
skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
View file

@ -165,3 +165,29 @@
vertical-align: middle;
}
}
@media all and ( min-width: @width-breakpoint-desktop ) {
.mw-ui-icon-with-label-desktop {
color: @icon-color;
width: auto;
line-height: inherit;
flex-basis: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover, &:focus, &:active, &:visited {
color: @icon-color;
text-decoration: none;
}
&:before {
// Hard-coded value to separate icon and proceeding text.
margin-right: @icon-padding-md;
width: auto;
display: inline-block;
// Seems to be more visually centered than `middle`.
vertical-align: text-bottom;
}
}
}