From 823c3f0bb9b207a74919192f041842e1595b5878 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Mon, 22 Jun 2020 11:01:10 -0700 Subject: [PATCH] Separate languages portal from other portals in sidebar In preparation for moving the languages out of the sidebar (T256023) and to facilitate experimentation in the Universal Language Selector extension, we should separate the data from the languages portal from other portals. Note the languages portal has traditionally appeared at the bottom of the sidebar, so this can be done safely in the same way we introduced data-portals-first Change-Id: I4be06278ec256cc55aee36c2946339fb49d21b46 --- includes/VectorTemplate.php | 4 +++- includes/templates/Sidebar.mustache | 1 + includes/templates/legacy/Sidebar.mustache | 5 ++--- stories/Sidebar.stories.data.js | 15 ++++++++------- stories/Sidebar.stories.js | 17 +++++++++++------ stories/skin.stories.data.js | 4 +++- stories/types.js | 8 ++++++++ 7 files changed, 36 insertions(+), 18 deletions(-) diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index 2fe5cf1..0a9383e 100644 --- a/includes/VectorTemplate.php +++ b/includes/VectorTemplate.php @@ -263,6 +263,7 @@ class VectorTemplate extends BaseTemplate { $skin = $this->getSkin(); $portals = $skin->buildSidebar(); $props = []; + $languages = null; // Render portals foreach ( $portals as $name => $content ) { @@ -298,7 +299,7 @@ class VectorTemplate extends BaseTemplate { // languages exist or there is a value in html-after-portal // for example to show the add language wikidata link (T252800) if ( count( $content ) || $portal['html-after-portal'] ) { - $props[] = $portal; + $languages = $portal; } break; default: @@ -341,6 +342,7 @@ class VectorTemplate extends BaseTemplate { ), 'array-portals-rest' => array_slice( $props, 1 ), 'data-portals-first' => $firstPortal, + 'data-portals-languages' => $languages, 'msg-vector-action-toggle-sidebar' => $this->msg( 'vector-action-toggle-sidebar' )->text(), // [todo] fetch user preference when logged in (T246427). 'sidebar-visible' => true diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache index a348d2e..1fd80e8 100644 --- a/includes/templates/Sidebar.mustache +++ b/includes/templates/Sidebar.mustache @@ -35,4 +35,5 @@ {{/data-emphasized-sidebar-action}} {{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}} + {{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}} diff --git a/includes/templates/legacy/Sidebar.mustache b/includes/templates/legacy/Sidebar.mustache index e160a48..1e53014 100644 --- a/includes/templates/legacy/Sidebar.mustache +++ b/includes/templates/legacy/Sidebar.mustache @@ -1,8 +1,6 @@ {{! + See @typedef SidebarData string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"` - MenuDefinition data-portals-first - MenuDefinition[] array-portals-rest - @prop boolean has-logo whether to show a logo or not. }}
@@ -13,4 +11,5 @@ {{/has-logo}} {{#data-portals-first}}{{>Menu}}{{/data-portals-first}} {{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}} + {{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
diff --git a/stories/Sidebar.stories.data.js b/stories/Sidebar.stories.data.js index 7154e43..6862181 100644 --- a/stories/Sidebar.stories.data.js +++ b/stories/Sidebar.stories.data.js @@ -1,4 +1,5 @@ import sidebarTemplate from '!!raw-loader!../includes/templates/Sidebar.mustache'; +import sidebarLegacyTemplate from '!!raw-loader!../includes/templates/legacy/Sidebar.mustache'; import { vectorMenuTemplate } from './MenuDropdown.stories.data'; import { PORTALS } from './MenuPortal.stories.data'; @@ -6,7 +7,7 @@ const HTML_LOGO_ATTRIBUTES = `class="mw-wiki-logo" href="/wiki/Main_Page" title= const SIDEBAR_BEFORE_OUTPUT_HOOKINFO = `Beware: Portals can be added, removed or reordered using SidebarBeforeOutput hook as in this example.`; -export { sidebarTemplate }; +export { sidebarTemplate, sidebarLegacyTemplate }; export const SIDEBAR_TEMPLATE_PARTIALS = { Menu: vectorMenuTemplate @@ -28,9 +29,9 @@ export const SIDEBAR_DATA = { }, 'array-portals-rest': [ PORTALS.toolbox, - PORTALS.otherProjects, - PORTALS.langlinks + PORTALS.otherProjects ], + 'data-portals-languages': PORTALS.langlinks, 'html-logo-attributes': HTML_LOGO_ATTRIBUTES }, withPortals: { @@ -38,18 +39,18 @@ export const SIDEBAR_DATA = { 'data-portals-first': PORTALS.navigation, 'array-portals-rest': [ PORTALS.toolbox, - PORTALS.otherProjects, - PORTALS.langlinks + PORTALS.otherProjects ], + 'data-portals-languages': PORTALS.langlinks, 'html-logo-attributes': HTML_LOGO_ATTRIBUTES }, withoutLogo: { 'has-logo': false, + 'data-portals-languages': PORTALS.langlinks, 'array-portals-first': PORTALS.navigation, 'array-portals-rest': [ PORTALS.toolbox, - PORTALS.otherProjects, - PORTALS.langlinks + PORTALS.otherProjects ] }, thirdParty: { diff --git a/stories/Sidebar.stories.js b/stories/Sidebar.stories.js index 7e88121..a455580 100644 --- a/stories/Sidebar.stories.js +++ b/stories/Sidebar.stories.js @@ -3,24 +3,29 @@ import '../.storybook/common.less'; import '../resources/skins.vector.styles/Sidebar.less'; import '../resources/skins.vector.styles/SidebarLogo.less'; import '../resources/skins.vector.styles/MenuPortal.less'; -import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data'; +import { sidebarTemplate, + sidebarLegacyTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data'; export default { title: 'Sidebar' }; -export const sidebarWithNoPortals = () => mustache.render( - sidebarTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS +export const sidebarLegacyWithNoPortals = () => mustache.render( + sidebarLegacyTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS ); -export const sidebarWithoutLogo = () => mustache.render( +export const sidebarLegacyWithPortals = () => mustache.render( + sidebarLegacyTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS +); + +export const sidebarModernWithoutLogo = () => mustache.render( sidebarTemplate, SIDEBAR_DATA.withoutLogo, SIDEBAR_TEMPLATE_PARTIALS ); -export const sidebarWithPortals = () => mustache.render( +export const sidebarModernWithPortals = () => mustache.render( sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS ); -export const sidebarThirdParty = () => mustache.render( +export const sidebarModernThirdParty = () => mustache.render( sidebarTemplate, SIDEBAR_DATA.thirdParty, SIDEBAR_TEMPLATE_PARTIALS ); diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js index ac66c6e..c7fe793 100644 --- a/stories/skin.stories.data.js +++ b/stories/skin.stories.data.js @@ -5,7 +5,8 @@ import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data'; import { pageActionsData, namespaceTabsData } from './MenuTabs.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 { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, + sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data'; import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data'; import { logoTemplate } from './Logo.stories.data'; @@ -45,6 +46,7 @@ export const NAVIGATION_TEMPLATE_DATA = { export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, { Logo: logoTemplate, SearchBox: searchBoxTemplate, + 'legacy/Sidebar': sidebarLegacyTemplate, Sidebar: sidebarTemplate, VectorMenu: vectorMenuTemplate, Menu: menuTemplate, diff --git a/stories/types.js b/stories/types.js index 21758ed..d076816 100644 --- a/stories/types.js +++ b/stories/types.js @@ -29,6 +29,14 @@ * @prop {string} msg-sitesubtitle alternate text for tagline. */ +/** + * @typedef {Object} SidebarData + * @prop {MenuDefinition} data-portals-languages + * @prop {MenuDefinition} data-portals-first + * @prop {MenuDefinition[]} array-portals-rest + * @prop {boolean} [has-logo] whether to show a logo or not. + */ + /** * @typedef {Object} SearchData * @prop {string|null} msg-search