wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vector menu items are wrapped in spans + improve Vector addPortletLink support

Browse source 
* In legacy Vector, menu items are now wrapped with spans. This
  consistency in HTML is required for splitting Vector into two
  different skins.
* Vector's portlet link items now support icons

Bug: T289163
Bug: T291722
Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
This commit is contained in:
jdlrobson 2021-09-23 15:09:44 -07:00 committed by Jdlrobson
parent 205f343581
commit a6c0b21044
3 changed files with 60 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
includes/SkinVector.php
View file

@ -319,9 +319,6 @@ class SkinVector extends SkinMustache {
public function generateHTML() {
if ( $this->isLegacy() ) {
$this->options['template'] = 'skin-legacy';
// Does not apply to gadgets adding menu items via addPortletLink. Should be
// removed when Ib23360e3439abc828404c1de8e0906915ee7d8b6 is merged.
unset( $this->options['link'] );
}
return parent::generateHTML();
}

60
resources/skins.vector.js/dropdownMenus.js
View file

@ -12,6 +12,66 @@ function closeDropdownsOnClickOutside() {
} );
}
/**
* @param {HTMLElement} item
* @return {HTMLElement|null}
*/
function getVectorMenu( item ) {
if ( item.classList.contains( 'vector-menu' ) ) {
return item;
} else {
var parent = /** @type {HTMLElement} */( item.parentNode );
return parent ? getVectorMenu( parent ) : null;
}
}
/**
* Adds icon placeholder for gadgets to use.
*
* @typedef {Object} PortletLinkData
* @property {string|null} id
*/
/**
* @param {HTMLElement} item
* @param {PortletLinkData} data
*/
function addPortletLinkHandler( item, data ) {
var link = item.querySelector( 'a' );
var menu = getVectorMenu( item );
// Dropdowns which have not got the noicon class are icon capable.
var isIconCapable = menu && menu.classList.contains(
'vector-menu-dropdown'
) && !menu.classList.contains(
'vector-menu-dropdown-noicon'
);
if ( isIconCapable && data.id && link ) {
// If class was previously added this will be a no-op so it is safe to call even
// if we've previously enhanced it.
// eslint-disable-next-line mediawiki/class-doc
link.classList.add(
'mw-ui-icon',
'mw-ui-icon-before',
// The following class allows gadgets developers to style or hide an icon.
// * mw-ui-icon-vector-gadget-<id>
// The class is considered stable and should not be removed without
// a #user-notice.
'mw-ui-icon-vector-gadget-' + data.id
);
}
}
// Enhance previously added items.
Array.prototype.forEach.call(
document.querySelectorAll( '.mw-list-item-js' ),
function ( item ) {
addPortletLinkHandler( item, {
id: item.getAttribute( 'id' )
} );
}
);
mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
module.exports = function dropdownMenus() {
closeDropdownsOnClickOutside();
};

4
resources/skins.vector.styles.legacy/components/MenuDropdown.less
View file

@ -1,10 +1,6 @@
// Extends the common MenuDropdown, but allows it to be opened via hover.
.vector-menu-dropdown:not( .vector-user-menu ) {
li {
font-size: @font-size-tabs;
}
&:hover .vector-menu-content {
opacity: 1;
visibility: visible;