feat(core): migrate sidebar menus to use RL icon module

This commit is contained in:
alistair3149 2022-11-07 17:28:39 -05:00
parent 7cff9e678b
commit efac6f125a
No known key found for this signature in database
4 changed files with 88 additions and 56 deletions

View file

@ -26,16 +26,18 @@ declare( strict_types=1 );
namespace MediaWiki\Skins\Citizen\Hooks;
use MediaWiki\Hook\BeforePageDisplayHook;
use MediaWiki\Hook\SidebarBeforeOutputHook;
use MediaWiki\Hook\SkinBuildSidebarHook;
use MediaWiki\Hook\SkinTemplateNavigation__UniversalHook;
use MediaWiki\Skins\Hook\SkinPageReadyConfigHook;
use OutputPage;
use Skin;
/**
* Hooks to run relating the skin
*/
class SkinHooks implements
BeforePageDisplayHook,
SidebarBeforeOutputHook,
SkinBuildSidebarHook,
SkinPageReadyConfigHook,
SkinTemplateNavigation__UniversalHook
{
@ -65,6 +67,41 @@ class SkinHooks implements
$out->addHeadItem( 'skin.citizen.inline', $script );
}
/**
* Modify toolbox links
* For some reason onSkinBuildSidebar was not able to get toolbox
* So we need to use this hook instead
*
* @see https://www.mediawiki.org/wiki/Manual:Hooks/SidebarBeforeOutput
* @param Skin $skin
* @param array &$sidebar
*/
public function onSidebarBeforeOutput( $skin, &$sidebar ): void {
// Be extra safe because it might be active on other skins with caching
if ( $skin->getSkinName() === 'citizen' && $sidebar ) {
if ( isset( $sidebar['TOOLBOX'] ) ) {
self::updateToolboxMenu( $sidebar );
}
}
}
/**
* Modify sidebar links
* This is cached compared to onSidebarBeforeOutput
*
* @see https://www.mediawiki.org/wiki/Manual:Hooks/SkinBuildSidebar
* @param Skin $skin
* @param array &$bar
*/
public function onSkinBuildSidebar( $skin, &$bar ): void {
// Be extra safe because it might be active on other skins with caching
if ( $skin->getSkinName() === 'citizen' && $bar ) {
foreach ( $bar as $key => $item ) {
self::addIconsToMenuItems( $bar, $key );
}
}
}
/**
* SkinPageReadyConfig hook handler
*
@ -150,6 +187,29 @@ class SkinHooks implements
self::addIconsToMenuItems( $links, 'associated-pages' );
}
/**
* Update toolbox menu items
*
* @param array &$links
*/
private static function updateToolboxMenu( &$links ) {
// Most icons are not mapped yet in the toolbox menu
$iconMap = [
'whatlinkshere' => 'articleRedirect',
'recentchangeslinked' => 'recentChanges',
'print' => 'printer',
'permalink' => 'link',
'info' => 'infoFilled',
'contributions' => 'userContributions',
'log' => 'history',
'blockip' => 'block',
'userrights' => 'userGroup'
];
self::mapIconsToMenuItems( $links, 'TOOLBOX', $iconMap );
self::addIconsToMenuItems( $links, 'TOOLBOX' );
}
/**
* Update user menu
*

View file

@ -37,10 +37,6 @@
// Pure CSS icons
&Icon {
overflow: hidden; // Sometimes CSS animation can clip
}
&Icon,
.citizen-ui-icon {
width: var( --header-icon-size );
height: var( --header-icon-size );
}

View file

@ -113,20 +113,6 @@
}
}
/* Non-WMUI icons */
// See SkinHooks.php for why VE is here
#ca-ve-edit > a:before,
.mw-portlet-tb .mw-list-item > a:before {
width: var( --size-icon );
height: var( --size-icon );
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity;
}
// Language counter badge
// TODO: Maybe this should be in a mixin
#citizen-languages__buttonCheckbox {
@ -222,6 +208,19 @@
> a {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
/* Non-WMUI icons */
// See SkinHooks.php for why VE is here
&:before {
width: var( --size-icon );
height: var( --size-icon );
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity;
}
}
// Merge two buttons together
@ -244,11 +243,8 @@
}
.skin-citizen-dark {
#ca-ve-edit > a,
.mw-list-item > a {
&:before {
filter: invert( 1 );
}
#ca-ve-edit > a:before {
filter: invert( 1 );
}
}

View file

@ -74,6 +74,8 @@
},
"Hooks": {
"BeforePageDisplay": "SkinHooks",
"SidebarBeforeOutput": "SkinHooks",
"SkinBuildSidebar": "SkinHooks",
"SkinPageReadyConfig": "SkinHooks",
"SkinTemplateNavigation::Universal": "SkinHooks"
},
@ -282,36 +284,7 @@
".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg",
"#ca-ve-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
".mw-editsection > a:before": "resources/skins.citizen.icons/shared/edit.svg",
".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
"#t-whatlinkshere > a:before": {
"file": {
"ltr": "resources/skins.citizen.icons/shared/articleRedirect-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/articleRedirect-rtl.svg"
}
},
"#t-recentchangeslinked > a:before": {
"file": {
"ltr": "resources/skins.citizen.icons/shared/recentChanges-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/recentChanges-rtl.svg"
}
},
"#t-contributions > a:before": {
"file": {
"ltr": "resources/skins.citizen.icons/shared/userContributions-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/userContributions-rtl.svg"
}
},
"#t-log > a:before": {
"file": {
"ltr": "resources/skins.citizen.icons/shared/journal-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/journal-rtl.svg"
}
},
"#t-blockip > a:before": "resources/skins.citizen.icons/shared/block.svg",
"#t-userrights > a:before": "resources/skins.citizen.icons/shared/userGroup.svg",
"#t-print > a:before": "resources/skins.citizen.icons/shared/download.svg",
"#t-permalink > a:before": "resources/skins.citizen.icons/shared/link.svg",
"#t-info > a:before": "resources/skins.citizen.icons/shared/info.svg"
".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg"
}
},
"skins.citizen.icons.wmui": {
@ -350,7 +323,14 @@
"die",
"textLanguage",
"ellipsis",
"listBullet"
"listBullet",
"home",
"recentChanges",
"articleRedirect",
"printer",
"link",
"infoFilled",
"block"
]
},
"skins.citizen.icons.sections": {