mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 18:29:49 +00:00
Move Vector menu class logic into Menu mustache template
Cleaned 'vector-menu' in SkinVector file, updated includes/templates/Menu.mustache and includes/templates/legacy/Menu.mustache. Bug: T290281 Change-Id: I7286fa82abfd437a228b9ac07ac781210d7cd98f
This commit is contained in:
parent
f9676bda10
commit
2a4ac3152b
|
@ -753,10 +753,10 @@ abstract class SkinVector extends SkinMustache {
|
|||
int $type = self::MENU_TYPE_DEFAULT
|
||||
) {
|
||||
$extraClasses = [
|
||||
self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
|
||||
self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs',
|
||||
self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
|
||||
self::MENU_TYPE_DEFAULT => 'vector-menu',
|
||||
self::MENU_TYPE_DROPDOWN => 'vector-menu-dropdown',
|
||||
self::MENU_TYPE_TABS => 'vector-menu-tabs',
|
||||
self::MENU_TYPE_PORTAL => 'vector-menu-portal portal',
|
||||
self::MENU_TYPE_DEFAULT => '',
|
||||
];
|
||||
if ( $this->isLegacy() ) {
|
||||
$extraClasses[self::MENU_TYPE_TABS] .= ' vector-menu-tabs-legacy';
|
||||
|
|
|
@ -3,14 +3,14 @@
|
|||
}}
|
||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||
|
||||
<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
||||
<nav id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
||||
{{#is-dropdown}}
|
||||
<input type="checkbox"
|
||||
id="{{id}}-checkbox"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
data-event-name="ui.dropdown-{{id}}"
|
||||
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
|
||||
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
|
||||
aria-labelledby="{{id}}-label"
|
||||
/>
|
||||
<label
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
See @typedef MenuDefinition
|
||||
}}
|
||||
|
||||
<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
||||
<div id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
|
||||
{{!
|
||||
Dropdown menus use the checkbox hack and require `input` and `label` elements.
|
||||
`aria-label` is applied to the `input` which is semantically a button.
|
||||
|
@ -14,7 +14,7 @@
|
|||
role="button"
|
||||
aria-haspopup="true"
|
||||
data-event-name="ui.dropdown-{{id}}"
|
||||
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
|
||||
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
|
||||
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
|
||||
/>
|
||||
<label
|
||||
|
|
|
@ -72,7 +72,7 @@ const LOGGED_OUT_ITEMS = `
|
|||
`;
|
||||
|
||||
const additionalUserMoreData = {
|
||||
class: 'vector-menu vector-user-menu-more',
|
||||
class: 'vector-user-menu-more',
|
||||
'heading-class': '',
|
||||
'is-dropdown': false
|
||||
};
|
||||
|
|
|
@ -60,7 +60,7 @@ function helperMakeMenuData( name, htmlItems, additionalData = {} ) {
|
|||
|
||||
return Object.assign( {
|
||||
id: `p-${name}`,
|
||||
class: `mw-portlet mw-portlet-${name} vector-menu ${additionalClassString}`,
|
||||
class: `mw-portlet mw-portlet-${name} ${additionalClassString}`,
|
||||
label,
|
||||
'html-user-language-attributes': htmlUserLanguageAttributes,
|
||||
'html-items': htmlItems
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
exports[`UserLinks renders 1`] = `
|
||||
"<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\">
|
||||
|
||||
<div id=\\"p-personal-more\\" class=\\"mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more\\">
|
||||
<div id=\\"p-personal-more\\" class=\\"vector-menu mw-portlet mw-portlet-personal-more vector-user-menu-more\\">
|
||||
<div class=\\"vector-menu-content\\">
|
||||
|
||||
<ul class=\\"vector-menu-content-list\\">
|
||||
|
@ -16,7 +16,7 @@ exports[`UserLinks renders 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id=\\"p-personal\\" class=\\"mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown\\">
|
||||
<div id=\\"p-personal\\" class=\\"vector-menu mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown\\">
|
||||
<div class=\\"vector-menu-content\\">
|
||||
|
||||
<ul class=\\"vector-menu-content-list\\">
|
||||
|
|
|
@ -7,7 +7,7 @@ const templateData = {
|
|||
'is-wide': false,
|
||||
'data-user-more': {
|
||||
id: 'p-personal-more',
|
||||
class: 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
|
||||
class: 'mw-portlet mw-portlet-personal-more vector-user-menu-more',
|
||||
label: 'Toggle sidebar',
|
||||
'html-items': `
|
||||
<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
|
||||
|
@ -18,7 +18,7 @@ const templateData = {
|
|||
},
|
||||
'data-user-menu': {
|
||||
id: 'p-personal',
|
||||
class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown',
|
||||
class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown',
|
||||
label: 'Personal tools',
|
||||
'html-items': `
|
||||
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar" href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span>Admin</span></a></li>
|
||||
|
|
|
@ -256,7 +256,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
|
|||
// Provided by core
|
||||
'id' => 'p-views',
|
||||
'class' => 'mw-portlet mw-portlet-views emptyPortlet ' .
|
||||
'vector-menu vector-menu-tabs vector-menu-tabs-legacy',
|
||||
'vector-menu-tabs vector-menu-tabs-legacy',
|
||||
'html-tooltip' => '',
|
||||
'html-items' => '',
|
||||
'html-after-portal' => '',
|
||||
|
@ -271,19 +271,19 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
|
|||
$variants = $props['data-variants'];
|
||||
$actions = $props['data-actions'];
|
||||
$this->assertSame(
|
||||
'mw-portlet mw-portlet-namespaces vector-menu vector-menu-tabs vector-menu-tabs-legacy',
|
||||
'mw-portlet mw-portlet-namespaces vector-menu-tabs vector-menu-tabs-legacy',
|
||||
$namespaces['class']
|
||||
);
|
||||
$this->assertSame(
|
||||
'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
|
||||
'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu-dropdown',
|
||||
$variants['class']
|
||||
);
|
||||
$this->assertSame(
|
||||
'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
|
||||
'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu-dropdown',
|
||||
$actions['class']
|
||||
);
|
||||
$this->assertSame(
|
||||
'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
|
||||
'mw-portlet mw-portlet-personal vector-user-menu-legacy',
|
||||
$props['data-personal']['class']
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue