Merge "Refactor: Merge VectorTabs into Menu"

This commit is contained in:
jenkins-bot 2020-05-06 22:54:46 +00:00 committed by Gerrit Code Review
commit 397da708e1
11 changed files with 24 additions and 34 deletions

View file

@ -462,7 +462,7 @@ class VectorTemplate extends BaseTemplate {
$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
$extraClasses = [
self::MENU_TYPE_DROPDOWN => 'vectorMenu',
self::MENU_TYPE_TABS => 'vectorTabs',
self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
];

View file

@ -1,9 +0,0 @@
{{!
See @typedef MenuDefinition
}}
<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
<h3 id="{{label-id}}">{{label}}</h3>
<ul {{{html-userlangattributes}}}>
{{{html-items}}}
</ul>
</div>

View file

@ -24,9 +24,9 @@
readers
LogoOptions data-logos
MenuDefinition data-personal-menu
object data-namespace-tabs. See VectorTabs.mustache for documentation.
MenuDefinition data-namespace-tabs
object data-variants. See VectorMenu.mustache for documentation.
object data-page-actions. See VectorTabs.mustache for documentation.
MenuDefinition data-page-actions
object data-page-actions-more. See VectorMenu.mustache for documentation.
object data-search-box. See SearchBox.mustache for documentation.
object data-sidebar. See Sidebar.mustache for documentation.
@ -79,11 +79,11 @@
<div id="mw-head">
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
<div id="left-navigation">
{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-page-actions}}{{>VectorTabs}}{{/data-page-actions}}
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
</div>

View file

@ -23,9 +23,9 @@
string html-navigation-heading heading for entire navigation that is
usually hidden to screen readers
MenuDefinition data-personal-menu
object data-namespace-tabs. See VectorTabs.mustache for documentation.
MenuDefinition data-namespace-tabs
object data-variants. See VectorMenu.mustache for documentation.
object data-page-actions. See VectorTabs.mustache for documentation.
MenuDefinition data-page-actions
object data-page-actions-more. See VectorMenu.mustache for documentation.
object data-search-box. See SearchBox.mustache for documentation.
object data-sidebar. See Sidebar.mustache for documentation.
@ -72,11 +72,11 @@
<div id="mw-head">
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
<div id="left-navigation">
{{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}}
{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
</div>
<div id="right-navigation">
{{#data-page-actions}}{{>VectorTabs}}{{/data-page-actions}}
{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
</div>

View file

@ -6,7 +6,9 @@
*/
/* Namespaces and Views */
.vectorTabs {
// FIXME: For cached HTML
.vectorTabs,
.vectorMenu-tabs {
// Tab separator: Outer start border (left in LTR) of tab row.
background-position: left bottom;
float: left;

View file

@ -8,7 +8,7 @@
@import 'Logo.less';
@import 'Menu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';
@import 'MenuTabs.less';
@import 'watchstar.less';
@import 'VectorMenu.less';
@import 'Portal.less';

View file

@ -6,7 +6,7 @@
@import 'legacy/layout.less';
@import 'Menu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';
@import 'MenuTabs.less';
@import 'watchstar.less';
@import 'VectorMenu.less';
@import 'Portal.less';

View file

@ -1,14 +1,11 @@
import { htmluserlangattributes } from './utils';
import vectorTabsTemplate from '!!raw-loader!../includes/templates/VectorTabs.mustache';
export { vectorTabsTemplate };
/**
* @type {MenuDefinition}
*/
export const pageActionsData = {
id: 'p-views',
class: 'vectorTabs',
class: 'vectorMenu-tabs vectorTabs',
'label-id': 'p-views-label',
label: 'Views',
'html-userlangattributes': htmluserlangattributes,
@ -30,7 +27,7 @@ You can view its source [⌃⌥e]" accesskey="e">View source</a></li>
*/
export const namespaceTabsData = {
id: 'p-namespaces',
class: 'vectorTabs',
class: 'vectorMenu-tabs vectorTabs',
'label-id': 'p-namespaces-label',
label: 'Namespaces',
'html-userlangattributes': htmluserlangattributes,

View file

@ -1,11 +1,12 @@
import mustache from 'mustache';
import { namespaceTabsData, pageActionsData, vectorTabsTemplate } from './VectorTabs.stories.data';
import '../resources/skins.vector.styles/VectorTabs.less';
import { menuTemplate as vectorTabsTemplate } from './Menu.stories.data';
import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data';
import '../resources/skins.vector.styles/MenuTabs.less';
import '../resources/skins.vector.styles/watchstar.less';
import '../.storybook/common.less';
export default {
title: 'Tabs'
title: 'MenuTabs'
};
export const pageActionTabs = () => mustache.render( vectorTabsTemplate, pageActionsData );

View file

@ -2,7 +2,7 @@ import { htmluserlangattributes } from './utils';
import { placeholder } from './utils';
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.stories.data';
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
@ -46,7 +46,6 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Logo: logoTemplate,
SearchBox: searchBoxTemplate,
Sidebar: sidebarTemplate,
VectorTabs: vectorTabsTemplate,
VectorMenu: vectorMenuTemplate,
Menu: menuTemplate,
Footer: footerTemplate

View file

@ -154,18 +154,18 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
$this->assertSame( $views, [
'id' => 'p-views',
'class' => 'emptyPortlet vectorTabs',
'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
'label-id' => 'p-views-label',
'label' => 'Views',
'html-userlangattributes' => $langAttrs,
'html-items' => '',
'class' => 'emptyPortlet vectorTabs',
'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
] );
$variants = $props['data-variants'];
$actions = $props['data-page-actions-more'];
$this->assertSame( $namespaces['class'],
'emptyPortlet vectorTabs' );
'emptyPortlet vectorMenu-tabs vectorTabs' );
$this->assertSame( $variants['class'],
'emptyPortlet vectorMenu' );
$this->assertSame( $actions['class'],