Refactor: VectorMenu merged in to Menu
Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a
This commit is contained in:
parent
397da708e1
commit
9cd47c5339
|
@ -461,7 +461,7 @@ class VectorTemplate extends BaseTemplate {
|
||||||
) : array {
|
) : array {
|
||||||
$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
|
$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
|
||||||
$extraClasses = [
|
$extraClasses = [
|
||||||
self::MENU_TYPE_DROPDOWN => 'vectorMenu',
|
self::MENU_TYPE_DROPDOWN => 'vectorMenu-dropdown vectorMenu',
|
||||||
self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
|
self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
|
||||||
self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
|
self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
|
||||||
];
|
];
|
||||||
|
@ -475,6 +475,7 @@ class VectorTemplate extends BaseTemplate {
|
||||||
'label' => $this->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label )->text(),
|
'label' => $this->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label )->text(),
|
||||||
'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
|
'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
|
||||||
'html-items' => '',
|
'html-items' => '',
|
||||||
|
'is-dropdown' => self::MENU_TYPE_DROPDOWN === $type,
|
||||||
];
|
];
|
||||||
|
|
||||||
foreach ( $urls as $key => $item ) {
|
foreach ( $urls as $key => $item ) {
|
||||||
|
|
|
@ -1,10 +1,17 @@
|
||||||
{{!
|
{{!
|
||||||
@see MenuDefinition
|
See @typedef MenuDefinition
|
||||||
}}
|
}}
|
||||||
|
|
||||||
<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
|
<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>
|
<h3 id="{{label-id}}">{{label}}</h3>
|
||||||
<ul {{{html-userlangattributes}}}>
|
{{/is-dropdown}}
|
||||||
|
<ul class="menu" {{{html-userlangattributes}}}>
|
||||||
{{{html-items}}}
|
{{{html-items}}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
|
|
@ -25,9 +25,9 @@
|
||||||
LogoOptions data-logos
|
LogoOptions data-logos
|
||||||
MenuDefinition data-personal-menu
|
MenuDefinition data-personal-menu
|
||||||
MenuDefinition data-namespace-tabs
|
MenuDefinition data-namespace-tabs
|
||||||
object data-variants. See VectorMenu.mustache for documentation.
|
MenuDefinition data-variants
|
||||||
MenuDefinition data-page-actions
|
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-search-box. See SearchBox.mustache for documentation.
|
||||||
object data-sidebar. See Sidebar.mustache for documentation.
|
object data-sidebar. See Sidebar.mustache for documentation.
|
||||||
object data-footer for footer template partial. see Footer.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}}
|
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
||||||
<div id="left-navigation">
|
<div id="left-navigation">
|
||||||
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
|
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
|
||||||
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
|
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||||
</div>
|
</div>
|
||||||
<div id="right-navigation">
|
<div id="right-navigation">
|
||||||
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
|
{{#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}}
|
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,9 +24,9 @@
|
||||||
usually hidden to screen readers
|
usually hidden to screen readers
|
||||||
MenuDefinition data-personal-menu
|
MenuDefinition data-personal-menu
|
||||||
MenuDefinition data-namespace-tabs
|
MenuDefinition data-namespace-tabs
|
||||||
object data-variants. See VectorMenu.mustache for documentation.
|
MenuDefinition data-variants
|
||||||
MenuDefinition data-page-actions
|
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-search-box. See SearchBox.mustache for documentation.
|
||||||
object data-sidebar. See Sidebar.mustache for documentation.
|
object data-sidebar. See Sidebar.mustache for documentation.
|
||||||
object data-footer for footer template partial. see Footer.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}}
|
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
|
||||||
<div id="left-navigation">
|
<div id="left-navigation">
|
||||||
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
|
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
|
||||||
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
|
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||||
</div>
|
</div>
|
||||||
<div id="right-navigation">
|
<div id="right-navigation">
|
||||||
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
|
{{#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}}
|
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,9 @@
|
||||||
@import 'mediawiki.mixins.less';
|
@import 'mediawiki.mixins.less';
|
||||||
|
|
||||||
/* Variants and Actions */
|
/* Variants and Actions */
|
||||||
.vectorMenu {
|
// FIXME: For cached HTML
|
||||||
|
.vectorMenu,
|
||||||
|
.vectorMenu-dropdown {
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
float: left;
|
float: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
|
@ -10,7 +10,7 @@
|
||||||
@import 'SearchBox.less';
|
@import 'SearchBox.less';
|
||||||
@import 'MenuTabs.less';
|
@import 'MenuTabs.less';
|
||||||
@import 'watchstar.less';
|
@import 'watchstar.less';
|
||||||
@import 'VectorMenu.less';
|
@import 'MenuDropdown.less';
|
||||||
@import 'Portal.less';
|
@import 'Portal.less';
|
||||||
@import 'Sidebar.less';
|
@import 'Sidebar.less';
|
||||||
@import 'SidebarLogo.less';
|
@import 'SidebarLogo.less';
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
@import 'SearchBox.less';
|
@import 'SearchBox.less';
|
||||||
@import 'MenuTabs.less';
|
@import 'MenuTabs.less';
|
||||||
@import 'watchstar.less';
|
@import 'watchstar.less';
|
||||||
@import 'VectorMenu.less';
|
@import 'MenuDropdown.less';
|
||||||
@import 'Portal.less';
|
@import 'Portal.less';
|
||||||
@import 'Sidebar.less';
|
@import 'Sidebar.less';
|
||||||
@import 'SidebarLogo.less';
|
@import 'SidebarLogo.less';
|
||||||
|
|
|
@ -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';
|
import { htmluserlangattributes } from './utils';
|
||||||
|
|
||||||
export { vectorMenuTemplate };
|
export { vectorMenuTemplate };
|
||||||
|
@ -7,7 +7,8 @@ export { vectorMenuTemplate };
|
||||||
* @type {MenuDefinition}
|
* @type {MenuDefinition}
|
||||||
*/
|
*/
|
||||||
export const moreData = {
|
export const moreData = {
|
||||||
class: 'vectorMenu',
|
'is-dropdown': true,
|
||||||
|
class: 'vectorMenu-dropdown vectorMenu',
|
||||||
label: 'More',
|
label: 'More',
|
||||||
id: 'p-cactions',
|
id: 'p-cactions',
|
||||||
'label-id': 'p-cactions-label',
|
'label-id': 'p-cactions-label',
|
||||||
|
@ -30,7 +31,8 @@ export const moreData = {
|
||||||
* @type {MenuDefinition}
|
* @type {MenuDefinition}
|
||||||
*/
|
*/
|
||||||
export const variantsData = {
|
export const variantsData = {
|
||||||
class: 'vectorMenu',
|
'is-dropdown': true,
|
||||||
|
class: 'vectorMenu-dropdown vectorMenu',
|
||||||
label: '新加坡简体',
|
label: '新加坡简体',
|
||||||
id: 'p-variants',
|
id: 'p-variants',
|
||||||
'label-id': 'p-variants-label',
|
'label-id': 'p-variants-label',
|
|
@ -1,7 +1,7 @@
|
||||||
import mustache from 'mustache';
|
import mustache from 'mustache';
|
||||||
import '../resources/skins.vector.styles/VectorMenu.less';
|
import '../resources/skins.vector.styles/MenuDropdown.less';
|
||||||
import '../.storybook/common.less';
|
import '../.storybook/common.less';
|
||||||
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
|
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'MenuDropdown'
|
title: 'MenuDropdown'
|
|
@ -3,7 +3,7 @@ import { placeholder } from './utils';
|
||||||
|
|
||||||
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
|
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
|
||||||
import { pageActionsData, namespaceTabsData } from './MenuTabs.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 { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
|
||||||
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
|
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
|
||||||
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
|
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
|
||||||
|
|
|
@ -160,6 +160,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
|
||||||
'html-userlangattributes' => $langAttrs,
|
'html-userlangattributes' => $langAttrs,
|
||||||
'html-items' => '',
|
'html-items' => '',
|
||||||
'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
|
'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
|
||||||
|
'is-dropdown' => false,
|
||||||
] );
|
] );
|
||||||
|
|
||||||
$variants = $props['data-variants'];
|
$variants = $props['data-variants'];
|
||||||
|
@ -167,9 +168,9 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
|
||||||
$this->assertSame( $namespaces['class'],
|
$this->assertSame( $namespaces['class'],
|
||||||
'emptyPortlet vectorMenu-tabs vectorTabs' );
|
'emptyPortlet vectorMenu-tabs vectorTabs' );
|
||||||
$this->assertSame( $variants['class'],
|
$this->assertSame( $variants['class'],
|
||||||
'emptyPortlet vectorMenu' );
|
'emptyPortlet vectorMenu-dropdown vectorMenu' );
|
||||||
$this->assertSame( $actions['class'],
|
$this->assertSame( $actions['class'],
|
||||||
'emptyPortlet vectorMenu' );
|
'emptyPortlet vectorMenu-dropdown vectorMenu' );
|
||||||
$this->assertSame( $props['data-personal-menu']['class'],
|
$this->assertSame( $props['data-personal-menu']['class'],
|
||||||
'emptyPortlet vectorMenu-default' );
|
'emptyPortlet vectorMenu-default' );
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue