diff --git a/includes/menu/PageActions/PageActionsDirector.php b/includes/menu/PageActions/PageActionsDirector.php index 572838bcb..6665b69c0 100644 --- a/includes/menu/PageActions/PageActionsDirector.php +++ b/includes/menu/PageActions/PageActionsDirector.php @@ -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', diff --git a/includes/menu/PageActions/ToolbarBuilder.php b/includes/menu/PageActions/ToolbarBuilder.php index 21867843e..ec774fe2d 100644 --- a/includes/menu/PageActions/ToolbarBuilder.php +++ b/includes/menu/PageActions/ToolbarBuilder.php @@ -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' ); } diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 84a8fd60c..88f4d4726 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -43,6 +43,7 @@ // @icon-touch-area-sm: 34; @icon-touch-area-md: 44; +@icon-color: @colorGray5; // Small icon @icon-glyph-size-sm: 16; diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less index 487bc3d22..4ba29cf9d 100644 --- a/resources/skins.minerva.base.styles/pageactions.less +++ b/resources/skins.minerva.base.styles/pageactions.less @@ -44,6 +44,8 @@ flex-basis: 4em; justify-content: flex-end; align-items: center; + min-width: 0; + overflow: hidden; li > *:hover { box-shadow: none; diff --git a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less index 01a11eb9c..3435fd15b 100644 --- a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less +++ b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less @@ -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; + } + } +}