Refactor: VectorMenu merged in to Menu

Bug: T249372
Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
This commit is contained in:
jdlrobson 2020-05-05 17:00:56 -07:00
parent 397da708e1
commit 9cd47c5339
12 changed files with 36 additions and 35 deletions

View file

@ -461,7 +461,7 @@ class VectorTemplate extends BaseTemplate {
) : array {
$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
$extraClasses = [
self::MENU_TYPE_DROPDOWN => 'vectorMenu',
self::MENU_TYPE_DROPDOWN => 'vectorMenu-dropdown vectorMenu',
self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
];
@ -475,6 +475,7 @@ class VectorTemplate extends BaseTemplate {
'label' => $this->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label )->text(),
'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
'html-items' => '',
'is-dropdown' => self::MENU_TYPE_DROPDOWN === $type,
];
foreach ( $urls as $key => $item ) {

View file

@ -1,10 +1,17 @@
{{!
@see MenuDefinition
See @typedef MenuDefinition
}}
<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
{{#is-dropdown}}
<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
<h3 id="{{label-id}}">
<span>{{label}}</span>
</h3>
{{/is-dropdown}}
{{^is-dropdown}}
<h3 id="{{label-id}}">{{label}}</h3>
<ul {{{html-userlangattributes}}}>
{{/is-dropdown}}
<ul class="menu" {{{html-userlangattributes}}}>
{{{html-items}}}
</ul>
</div>

View file

@ -1,12 +0,0 @@
{{!
See @typedef MenuDefinition
}}
<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
<h3 id="{{label-id}}">
<span>{{label}}</span>
</h3>
<ul class="menu" {{{html-userlangattributes}}}>
{{{html-items}}}
</ul>
</div>

View file

@ -25,9 +25,9 @@
LogoOptions data-logos
MenuDefinition data-personal-menu
MenuDefinition data-namespace-tabs
object data-variants. See VectorMenu.mustache for documentation.
MenuDefinition data-variants
MenuDefinition data-page-actions
object data-page-actions-more. See VectorMenu.mustache for documentation.
MenuDefinition data-page-actions-more
object data-search-box. See SearchBox.mustache for documentation.
object data-sidebar. See Sidebar.mustache for documentation.
object data-footer for footer template partial. see Footer.mustache for documentation.
@ -80,11 +80,11 @@
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
<div id="left-navigation">
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
{{#data-variants}}{{>Menu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
</div>
</div>

View file

@ -24,9 +24,9 @@
usually hidden to screen readers
MenuDefinition data-personal-menu
MenuDefinition data-namespace-tabs
object data-variants. See VectorMenu.mustache for documentation.
MenuDefinition data-variants
MenuDefinition data-page-actions
object data-page-actions-more. See VectorMenu.mustache for documentation.
MenuDefinition data-page-actions-more
object data-search-box. See SearchBox.mustache for documentation.
object data-sidebar. See Sidebar.mustache for documentation.
object data-footer for footer template partial. see Footer.mustache for documentation.
@ -73,11 +73,11 @@
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
<div id="left-navigation">
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
{{#data-variants}}{{>Menu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
</div>
</div>

View file

@ -2,7 +2,9 @@
@import 'mediawiki.mixins.less';
/* Variants and Actions */
.vectorMenu {
// FIXME: For cached HTML
.vectorMenu,
.vectorMenu-dropdown {
direction: ltr;
float: left;
cursor: pointer;

View file

@ -10,7 +10,7 @@
@import 'SearchBox.less';
@import 'MenuTabs.less';
@import 'watchstar.less';
@import 'VectorMenu.less';
@import 'MenuDropdown.less';
@import 'Portal.less';
@import 'Sidebar.less';
@import 'SidebarLogo.less';

View file

@ -8,7 +8,7 @@
@import 'SearchBox.less';
@import 'MenuTabs.less';
@import 'watchstar.less';
@import 'VectorMenu.less';
@import 'MenuDropdown.less';
@import 'Portal.less';
@import 'Sidebar.less';
@import 'SidebarLogo.less';

View file

@ -1,4 +1,4 @@
import vectorMenuTemplate from '!!raw-loader!../includes/templates/VectorMenu.mustache';
import vectorMenuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
import { htmluserlangattributes } from './utils';
export { vectorMenuTemplate };
@ -7,7 +7,8 @@ export { vectorMenuTemplate };
* @type {MenuDefinition}
*/
export const moreData = {
class: 'vectorMenu',
'is-dropdown': true,
class: 'vectorMenu-dropdown vectorMenu',
label: 'More',
id: 'p-cactions',
'label-id': 'p-cactions-label',
@ -30,7 +31,8 @@ export const moreData = {
* @type {MenuDefinition}
*/
export const variantsData = {
class: 'vectorMenu',
'is-dropdown': true,
class: 'vectorMenu-dropdown vectorMenu',
label: '新加坡简体',
id: 'p-variants',
'label-id': 'p-variants-label',

View file

@ -1,7 +1,7 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/VectorMenu.less';
import '../resources/skins.vector.styles/MenuDropdown.less';
import '../.storybook/common.less';
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
export default {
title: 'MenuDropdown'

View file

@ -3,7 +3,7 @@ import { placeholder } from './utils';
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';

View file

@ -160,6 +160,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
'html-userlangattributes' => $langAttrs,
'html-items' => '',
'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
'is-dropdown' => false,
] );
$variants = $props['data-variants'];
@ -167,9 +168,9 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
$this->assertSame( $namespaces['class'],
'emptyPortlet vectorMenu-tabs vectorTabs' );
$this->assertSame( $variants['class'],
'emptyPortlet vectorMenu' );
'emptyPortlet vectorMenu-dropdown vectorMenu' );
$this->assertSame( $actions['class'],
'emptyPortlet vectorMenu' );
'emptyPortlet vectorMenu-dropdown vectorMenu' );
$this->assertSame( $props['data-personal-menu']['class'],
'emptyPortlet vectorMenu-default' );
}