wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-24 06:13:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update addPortletLink for Codex

Browse source 
For testing make sure to check the 3 variants:
```
mw.util.addPortletLink('page-actions', '#', 'text' );
mw.util.addPortletLink('p-interaction', '#', 'text' );
mw.util.addPortletLink('p-personal', '#', 'text' );
```

Bug: T344006
Change-Id: Iad3a8d5ed1237c1438d170f07c9c3fe3784182fe
This commit is contained in:
bwang 2023-08-18 16:48:33 -05:00 committed by Zabe
parent 47b528c0e2
commit 0e391a87e0
4 changed files with 20 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
includes/Skins/ToggleList/DropDownList.less
View file

@ -1,6 +1,16 @@
// A DropDownList is a ToggleList that extends downward.
.toggle-list__list--drop-down {
background: @background-color-base;
// The menu appears over the content and occupies no room within it.
position: absolute;
// If max-height is set and the height exceeds it, add a vertical scrollbar.
overflow-y: auto;
// The menu floats over content but below overlays.
z-index: @z-indexDrawer;
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
visibility: hidden;
opacity: 0;
transform: translateY( -8px );
// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
@ -29,4 +39,7 @@
.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
transform: translateY( 0 );
// Reveal the list when checked.
visibility: visible;
opacity: 1;
}

23
includes/Skins/ToggleList/ToggleList.less
View file

@ -31,26 +31,3 @@
z-index: @z-indexOccluded;
opacity: 0;
}
.toggle-list__list {
background: @background-color-base;
// The menu appears over the content and occupies no room within it.
position: absolute;
//
// If max-height is set and the height exceeds it, add a vertical scrollbar.
overflow-y: auto;
//
// The menu floats over content but below overlays.
z-index: @z-indexDrawer;
//
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
//
visibility: hidden;
opacity: 0;
}
.toggle-list__checkbox:checked ~ .toggle-list__list {
// Reveal the list when checked.
visibility: visible;
opacity: 1;
}

4
includes/Skins/menu.mustache
View file

@ -1,6 +1,6 @@
<div id="mw-mf-page-left" class="menu toggle-list__list view-border-box">
<div id="mw-mf-page-left" class="menu view-border-box">
{{#groups}}
<ul id="{{id}}">
<ul id="{{id}}" class="toggle-list__list">
{{! "." means "current context", which allows us to iterate over Plain Old PHP Arrays™. }}
{{#entries}}
{{#.}}

15
resources/skins.minerva.scripts/addPortletLink.js
View file

@ -4,7 +4,6 @@
*/
function getClassesForItem( $item ) {
var $parent = $item.parent(),
useCodex = mw.loader.getState( 'codex-search-styles' ) !== 'registered',
// eslint-disable-next-line no-jquery/no-class-state
isPageActionList = $parent.hasClass( 'page-actions-menu__list' ),
// eslint-disable-next-line no-jquery/no-class-state
@ -19,18 +18,15 @@ function getClassesForItem( $item ) {
} else if ( isPageActionList ) {
return {
li: [ 'page-actions-menu__list-item' ],
span: useCodex ? [] : [
'mw-ui-icon', 'mw-ui-icon-element',
'mw-ui-icon-with-label-desktop', 'mw-ui-button', 'mw-ui-quiet'
],
a: useCodex ? [
span: [],
a: [
'cdx-button',
'cdx-button--size-large',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled',
'cdx-button--icon-only',
'cdx-button--weight-quiet'
] : []
]
};
} else {
return {
@ -48,9 +44,8 @@ function getClassesForItem( $item ) {
* @param {string|undefined} id for icon
*/
function insertIcon( $link, id ) {
var useCodex = mw.loader.getState( 'codex-search-styles' ) !== 'registered';
var icon = document.createElement( 'span' ),
classes = useCodex ? 'minerva-icon' : 'mw-ui-icon';
classes = 'minerva-icon';
if ( id ) {
classes += ' mw-ui-icon-portletlink-' + id;
}
@ -74,7 +69,7 @@ function hookHandler( listItem, data ) {
$a.addClass( classes.a );
$item.find( 'a > span' ).addClass( classes.span );
listItem.dataset.minervaPortlet = true;
if ( classes.span.indexOf( 'mw-ui-icon' ) === -1 ) {
if ( classes.span.indexOf( 'minerva-icon' ) === -1 ) {
insertIcon( $a, id );
}
}