From a43e79c1d3e01a321522f9584624160df0a3c94f Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Wed, 6 May 2020 10:15:50 -0700 Subject: [PATCH] Refactor: Merge VectorTabs into Menu Bug: T249372 Change-Id: Ib6ae191b31564dc23a3b1d6aedf48cbaaad006af --- includes/VectorTemplate.php | 2 +- includes/templates/VectorTabs.mustache | 9 --------- includes/templates/index.mustache | 8 ++++---- includes/templates/legacy.mustache | 8 ++++---- .../{VectorTabs.less => MenuTabs.less} | 4 +++- resources/skins.vector.styles/index.less | 2 +- resources/skins.vector.styles/legacy.less | 2 +- ...ctorTabs.stories.data.js => MenuTabs.stories.data.js} | 7 ++----- stories/{VectorTabs.stories.js => MenuTabs.stories.js} | 7 ++++--- stories/skin.stories.data.js | 3 +-- tests/phpunit/integration/VectorTemplateTest.php | 6 +++--- 11 files changed, 24 insertions(+), 34 deletions(-) delete mode 100644 includes/templates/VectorTabs.mustache rename resources/skins.vector.styles/{VectorTabs.less => MenuTabs.less} (97%) rename stories/{VectorTabs.stories.data.js => MenuTabs.stories.data.js} (89%) rename stories/{VectorTabs.stories.js => MenuTabs.stories.js} (59%) diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index 8ceb919a0..1ebec5f0f 100644 --- a/includes/VectorTemplate.php +++ b/includes/VectorTemplate.php @@ -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', ]; diff --git a/includes/templates/VectorTabs.mustache b/includes/templates/VectorTabs.mustache deleted file mode 100644 index 9ff258213..000000000 --- a/includes/templates/VectorTabs.mustache +++ /dev/null @@ -1,9 +0,0 @@ -{{! - See @typedef MenuDefinition -}} - diff --git a/includes/templates/index.mustache b/includes/templates/index.mustache index 55f5b16c5..bfd91d55c 100644 --- a/includes/templates/index.mustache +++ b/includes/templates/index.mustache @@ -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 @@
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
- {{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}} + {{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}} {{#data-variants}}{{>VectorMenu}}{{/data-variants}}
- {{#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}}
diff --git a/includes/templates/legacy.mustache b/includes/templates/legacy.mustache index 082e4fded..5e13f0938 100644 --- a/includes/templates/legacy.mustache +++ b/includes/templates/legacy.mustache @@ -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 @@
{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
- {{#data-namespace-tabs}}{{>VectorTabs}}{{/data-namespace-tabs}} + {{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}} {{#data-variants}}{{>VectorMenu}}{{/data-variants}}
- {{#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}}
diff --git a/resources/skins.vector.styles/VectorTabs.less b/resources/skins.vector.styles/MenuTabs.less similarity index 97% rename from resources/skins.vector.styles/VectorTabs.less rename to resources/skins.vector.styles/MenuTabs.less index 78589b745..479ec9723 100644 --- a/resources/skins.vector.styles/VectorTabs.less +++ b/resources/skins.vector.styles/MenuTabs.less @@ -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; diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index e26e427ea..481bf3eba 100644 --- a/resources/skins.vector.styles/index.less +++ b/resources/skins.vector.styles/index.less @@ -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'; diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index f61affaa0..6fe49dd1b 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/resources/skins.vector.styles/legacy.less @@ -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'; diff --git a/stories/VectorTabs.stories.data.js b/stories/MenuTabs.stories.data.js similarity index 89% rename from stories/VectorTabs.stories.data.js rename to stories/MenuTabs.stories.data.js index f0ff5bf61..bb51c9372 100644 --- a/stories/VectorTabs.stories.data.js +++ b/stories/MenuTabs.stories.data.js @@ -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 */ export const namespaceTabsData = { id: 'p-namespaces', - class: 'vectorTabs', + class: 'vectorMenu-tabs vectorTabs', 'label-id': 'p-namespaces-label', label: 'Namespaces', 'html-userlangattributes': htmluserlangattributes, diff --git a/stories/VectorTabs.stories.js b/stories/MenuTabs.stories.js similarity index 59% rename from stories/VectorTabs.stories.js rename to stories/MenuTabs.stories.js index f86c52074..8b2888f82 100644 --- a/stories/VectorTabs.stories.js +++ b/stories/MenuTabs.stories.js @@ -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 ); diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js index e1ce38699..5531c196c 100644 --- a/stories/skin.stories.data.js +++ b/stories/skin.stories.data.js @@ -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 diff --git a/tests/phpunit/integration/VectorTemplateTest.php b/tests/phpunit/integration/VectorTemplateTest.php index acaa50617..a5a10d056 100644 --- a/tests/phpunit/integration/VectorTemplateTest.php +++ b/tests/phpunit/integration/VectorTemplateTest.php @@ -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'],