feat(core): migrate VE editsection to WMUI icon module

This commit is contained in:
alistair3149 2022-11-15 23:36:30 -05:00
parent 5c375bb71d
commit ab1981d24b
No known key found for this signature in database
3 changed files with 72 additions and 28 deletions

View file

@ -118,19 +118,31 @@ class SkinHooks implements
public function onSkinEditSectionLinks( $skin, $title, $section, $sectionTitle, &$result, $lang ) {
// Be extra safe because it might be active on other skins with caching
if ( $skin->getSkinName() === 'citizen' && $result ) {
/*
* FIXME: For some reason if you modify the VE button, it duplicates one automatically
* Bug: T323186
*
* if ( isset( $result['veeditsection'] ) ) {
* $result['veeditsection']['attribs']['class'] = 'mw-ui-icon-wikimedia-edit';
* }
*/
// Add icon to edit section link
// If VE button is present, use wikiText icon
if ( isset( $result['editsection'] ) ) {
$result['editsection']['attribs']['class'] = $result['veeditsection'] ? 'mw-ui-icon-wikimedia-wikiText' : 'mw-ui-icon-wikimedia-edit';
if ( isset( $result['veeditsection'] ) ) {
self::appendClassToItem(
$result['veeditsection']['attribs']['class'],
[
'citizen-editsection-icon',
'mw-ui-icon-wikimedia-edit'
]
);
self::appendClassToItem(
$result['editsection']['attribs']['class'],
[
'citizen-editsection-icon',
'mw-ui-icon-wikimedia-wikiText'
]
);
} else if ( isset( $result['editsection'] ) ) {
self::appendClassToItem(
$result['editsection']['attribs']['class'],
[
'citizen-editsection-icon',
'mw-ui-icon-wikimedia-edit'
]
);
}
}
}
@ -348,4 +360,32 @@ class SkinHooks implements
}
}
}
/**
* Adds class to a property
* Based on Vector
*
* @param array &$item to update
* @param array|string $classes to add to the item
*/
private static function appendClassToItem( &$item, $classes ) {
$existingClasses = $item;
if ( is_array( $existingClasses ) ) {
// Treat as array
$newArrayClasses = is_array( $classes ) ? $classes : [ trim( $classes ) ];
$item = array_merge( $existingClasses, $newArrayClasses );
} elseif ( is_string( $existingClasses ) ) {
// Treat as string
$newStrClasses = is_string( $classes ) ? trim( $classes ) : implode( ' ', $classes );
$item .= ' ' . $newStrClasses;
} else {
// Treat as whatever $classes is
$item = $classes;
}
if ( is_string( $item ) ) {
$item = trim( $item );
}
}
}

View file

@ -20,26 +20,31 @@
display: none;
}
// Fallback text button if extensions register those
a {
.resource-loader-icon-link-small;
padding: var( --space-xxs );
opacity: var( --opacity-icon-base );
text-indent: -9999px; // Hide text
transition: @transition-opacity;
font-size: 0.875rem;
}
}
&:before {
.resource-loader-icon;
display: block;
background-size: contain;
}
.citizen-editsection-icon {
.resource-loader-icon-link-small;
opacity: var( --opacity-icon-base );
text-indent: -9999px; // Hide text
transition: @transition-opacity;
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:before {
.resource-loader-icon;
display: block;
background-size: contain;
}
&:active {
opacity: var( --opacity-icon-base--active );
}
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
}

View file

@ -289,8 +289,7 @@
"defaultColor": "#000",
"images": {
".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg",
"#ca-ve-edit > a:before": "resources/skins.citizen.icons/wmui/edit.svg",
".mw-editsection-visualeditor:before": "resources/skins.citizen.icons/wmui/edit.svg"
"#ca-ve-edit > a:before": "resources/skins.citizen.icons/wmui/edit.svg"
}
},
"skins.citizen.icons.wmui": {