diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index ca386056e..722b9060a 100644 --- a/includes/VectorTemplate.php +++ b/includes/VectorTemplate.php @@ -175,29 +175,27 @@ class VectorTemplate extends BaseTemplate { 'html-hook-vector-before-footer' => $htmlHookVectorBeforeFooter, 'array-footer-rows' => $this->getTemplateFooterRows(), ], - 'data-navigation' => [ - 'html-navigation-heading' => $this->getMsg( 'navigation-heading' ), - 'data-personal-menu' => $this->buildPersonalProps(), - 'data-namespace-tabs' => $this->buildNamespacesProps(), - 'data-variants' => $this->buildVariantsProps(), - 'data-page-actions' => $this->buildViewsProps(), - 'data-page-actions-more' => $this->buildActionsProps(), - 'data-search-box' => $this->buildSearchProps(), - 'data-sidebar' => [ - 'html-logo-attributes' => Xml::expandAttributes( - Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [ - 'class' => 'mw-wiki-logo', - 'href' => Skin::makeMainPageUrl(), - ] - ) - ] + $this->buildSidebarProps( $this->get( 'sidebar', [] ) ), - ], + 'html-navigation-heading' => $this->getMsg( 'navigation-heading' ), + 'data-personal-menu' => $this->buildPersonalProps(), + 'data-namespace-tabs' => $this->buildNamespacesProps(), + 'data-variants' => $this->buildVariantsProps(), + 'data-page-actions' => $this->buildViewsProps(), + 'data-page-actions-more' => $this->buildActionsProps(), + 'data-search-box' => $this->buildSearchProps(), + 'data-sidebar' => [ + 'html-logo-attributes' => Xml::expandAttributes( + Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [ + 'class' => 'mw-wiki-logo', + 'href' => Skin::makeMainPageUrl(), + ] + ) + ] + $this->buildSidebarProps( $this->get( 'sidebar', [] ) ), ]; // The following logic is unqiue to Vector (not used by legacy Vector) and // is planned to be moved in a follow-up patch. if ( !$this->isLegacy && $this->getSkin()->getUser()->isLoggedIn() ) { - $commonSkinData['data-navigation']['data-sidebar']['data-emphasized-sidebar-action'] = [ + $commonSkinData['data-sidebar']['data-emphasized-sidebar-action'] = [ 'href' => SpecialPage::getTitleFor( 'Preferences', false, diff --git a/includes/templates/Navigation.mustache b/includes/templates/Navigation.mustache deleted file mode 100644 index 9cdbe8881..000000000 --- a/includes/templates/Navigation.mustache +++ /dev/null @@ -1,41 +0,0 @@ -{{! - string html-navigation-heading heading for entire navigation that is - usually hidden to screen readers - object data-personal-menu See PersonalMenu.mustache for documentation. - object data-namespace-tabs. See VectorTabs.mustache for documentation. - object data-variants. See VectorMenu.mustache for documentation. - object data-page-actions. See VectorTabs.mustache for documentation. - 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. -}} -
-

{{{html-navigation-heading}}}

-
- {{#data-personal-menu}} - {{>PersonalMenu}} - {{/data-personal-menu}} -
- {{#data-namespace-tabs}} - {{>VectorTabs}} - {{/data-namespace-tabs}} - {{#data-variants}} - {{>VectorMenu}} - {{/data-variants}} -
-
- {{#data-page-actions}} - {{>VectorTabs}} - {{/data-page-actions}} - {{#data-page-actions-more}} - {{>VectorMenu}} - {{/data-page-actions-more}} - {{#data-search-box}} - {{>SearchBox}} - {{/data-search-box}} -
-
- {{#data-sidebar}} - {{>Sidebar}} - {{/data-sidebar}} -
diff --git a/includes/templates/index.mustache b/includes/templates/index.mustache index 4093f3cde..ac3d2188e 100644 --- a/includes/templates/index.mustache +++ b/includes/templates/index.mustache @@ -20,7 +20,15 @@ string html-catlinks string html-debuglog string html-dataAfterContent - object data-navigation for navigation template partial. see Navigation.mustache for documentation. + string html-navigation-heading heading for entire navigation that is + usually hidden to screen readers + object data-personal-menu See PersonalMenu.mustache for documentation. + object data-namespace-tabs. See VectorTabs.mustache for documentation. + object data-variants. See VectorMenu.mustache for documentation. + object data-page-actions. See VectorTabs.mustache for documentation. + 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. object data-footer for footer template partial. see Footer.mustache for documentation. string html-printtail HTML to render at the end of the page contained necessary script tags for ResourceLoader terminated with ``. @@ -57,9 +65,36 @@ {{{html-dataAfterContent}}} -{{#data-navigation}} -{{>Navigation}} -{{/data-navigation}} +
+

{{{html-navigation-heading}}}

+
+ {{#data-personal-menu}} + {{>PersonalMenu}} + {{/data-personal-menu}} +
+ {{#data-namespace-tabs}} + {{>VectorTabs}} + {{/data-namespace-tabs}} + {{#data-variants}} + {{>VectorMenu}} + {{/data-variants}} +
+
+ {{#data-page-actions}} + {{>VectorTabs}} + {{/data-page-actions}} + {{#data-page-actions-more}} + {{>VectorMenu}} + {{/data-page-actions-more}} + {{#data-search-box}} + {{>SearchBox}} + {{/data-search-box}} +
+
+ {{#data-sidebar}} + {{>Sidebar}} + {{/data-sidebar}} +
{{#data-footer}} {{>Footer}} {{/data-footer}} diff --git a/resources/skins.vector.styles/Navigation.less b/resources/skins.vector.styles/Navigation.less deleted file mode 100644 index 0100321e7..000000000 --- a/resources/skins.vector.styles/Navigation.less +++ /dev/null @@ -1,32 +0,0 @@ -@import 'mediawiki.mixins.less'; - -/* Hide, but keep accessible for screen-readers */ -#mw-navigation h2 { - position: absolute; - top: -9999px; -} - -#mw-head { - position: absolute; - top: 0; - right: 0; - width: 100%; -} - -/* Navigation Containers */ -#left-navigation { - float: left; - margin-left: 10em; - margin-top: 2.5em; - /* When right nav would overlap left nav, it's placed below it - (normal CSS floats behavior). This rule ensures that no empty space - is shown between them due to right nav's margin-top. Page layout - is still broken, but at least the nav overlaps only the page title - instead of half the content. */ - margin-bottom: -2.5em; -} - -#right-navigation { - float: right; - margin-top: 2.5em; -} diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less index 5abf0ddf1..2e915736a 100644 --- a/resources/skins.vector.styles/common.less +++ b/resources/skins.vector.styles/common.less @@ -189,3 +189,34 @@ pre, margin-left: 10em; height: 5em; } + +/* Hide, but keep accessible for screen-readers */ +#mw-navigation h2 { + position: absolute; + top: -9999px; +} + +#mw-head { + position: absolute; + top: 0; + right: 0; + width: 100%; +} + +/* Navigation Containers */ +#left-navigation { + float: left; + margin-left: 10em; + margin-top: 2.5em; + /* When right nav would overlap left nav, it's placed below it + (normal CSS floats behavior). This rule ensures that no empty space + is shown between them due to right nav's margin-top. Page layout + is still broken, but at least the nav overlaps only the page title + instead of half the content. */ + margin-bottom: -2.5em; +} + +#right-navigation { + float: right; + margin-top: 2.5em; +} diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index ba865dcaa..87a51643c 100644 --- a/resources/skins.vector.styles/index.less +++ b/resources/skins.vector.styles/index.less @@ -8,7 +8,6 @@ @import 'VectorTabs.less'; @import 'watchstar.less'; @import 'VectorMenu.less'; - @import 'Navigation.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'Footer.less'; diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index 45c017e15..d3e09bf8c 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/resources/skins.vector.styles/legacy.less @@ -8,7 +8,6 @@ @import 'VectorTabs.less'; @import 'watchstar.less'; @import 'VectorMenu.less'; - @import 'Navigation.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'Footer.less'; diff --git a/stories/Navigation.stories.data.js b/stories/Navigation.stories.data.js deleted file mode 100644 index 473279fe0..000000000 --- a/stories/Navigation.stories.data.js +++ /dev/null @@ -1,49 +0,0 @@ -import navTemplate from '!!raw-loader!../includes/templates/Navigation.mustache'; -import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data'; -import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.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'; - -export const NAVIGATION_TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, { - SearchBox: searchBoxTemplate, - Sidebar: sidebarTemplate, - VectorTabs: vectorTabsTemplate, - VectorMenu: vectorMenuTemplate, - PersonalMenu: personalMenuTemplate -} ); - -export const NAVIGATION_TEMPLATE_DATA = { - loggedInWithVariantsAndOptOut: { - 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedOut, - 'data-namespace-tabs': namespaceTabsData, - 'data-page-actions': pageActionsData, - 'data-variants': variantsData, - 'data-search-box': searchBoxData, - 'data-sidebar': SIDEBAR_DATA.withPortalsAndOptOut, - 'html-navigation-heading': 'Navigation menu', - 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` - }, - loggedOutWithVariants: { - 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedOut, - 'data-namespace-tabs': namespaceTabsData, - 'data-page-actions': pageActionsData, - 'data-variants': variantsData, - 'data-search-box': searchBoxData, - 'data-sidebar': SIDEBAR_DATA.withPortals, - 'html-navigation-heading': 'Navigation menu', - 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` - }, - loggedInWithMoreActions: { - 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho, - 'data-namespace-tabs': namespaceTabsData, - 'data-page-actions': pageActionsData, - 'data-page-actions-more': moreData, - 'data-search-box': searchBoxData, - 'data-sidebar': SIDEBAR_DATA.withPortals, - 'html-navigation-heading': 'Navigation menu', - 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` - } -}; - -export { navTemplate }; diff --git a/stories/Navigation.stories.js b/stories/Navigation.stories.js deleted file mode 100644 index 9e0784537..000000000 --- a/stories/Navigation.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import mustache from 'mustache'; -import { navTemplate, NAVIGATION_TEMPLATE_DATA, - NAVIGATION_TEMPLATE_PARTIALS } from './Navigation.stories.data'; -import '../.storybook/common.less'; -import '../resources/skins.vector.styles/Navigation.less'; -import '../resources/skins.vector.styles/watchstar.less'; - -export default { - title: 'Navigation (Header + Sidebar)' -}; - -export const navigationLoggedOutWithVariants = () => mustache.render( navTemplate, - NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants, - NAVIGATION_TEMPLATE_PARTIALS -); - -export const navigationLoggedInWithMore = () => mustache.render( navTemplate, - NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions, - NAVIGATION_TEMPLATE_PARTIALS -); diff --git a/stories/skin.stories.js b/stories/skin.stories.js index 3945d4531..bb8eb1d7c 100644 --- a/stories/skin.stories.js +++ b/stories/skin.stories.js @@ -4,11 +4,52 @@ import skinTemplate from '!!raw-loader!../includes/templates/index.mustache'; import { placeholder } from './utils'; import '../resources/skins.vector.styles/index.less'; -import { NAVIGATION_TEMPLATE_DATA, navTemplate, NAVIGATION_TEMPLATE_PARTIALS } from './Navigation.stories.data'; +import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data'; +import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.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'; import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data'; -const TEMPLATE_PARTIALS = Object.assign( {}, NAVIGATION_TEMPLATE_PARTIALS, { - Navigation: navTemplate, +const NAVIGATION_TEMPLATE_DATA = { + loggedInWithVariantsAndOptOut: { + 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho, + 'data-namespace-tabs': namespaceTabsData, + 'data-page-actions': pageActionsData, + 'data-variants': variantsData, + 'data-search-box': searchBoxData, + 'data-sidebar': SIDEBAR_DATA.withPortalsAndOptOut, + 'html-navigation-heading': 'Navigation menu', + 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` + }, + loggedOutWithVariants: { + 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedOut, + 'data-namespace-tabs': namespaceTabsData, + 'data-page-actions': pageActionsData, + 'data-variants': variantsData, + 'data-search-box': searchBoxData, + 'data-sidebar': SIDEBAR_DATA.withPortals, + 'html-navigation-heading': 'Navigation menu', + 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` + }, + loggedInWithMoreActions: { + 'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho, + 'data-namespace-tabs': namespaceTabsData, + 'data-page-actions': pageActionsData, + 'data-page-actions-more': moreData, + 'data-search-box': searchBoxData, + 'data-sidebar': SIDEBAR_DATA.withPortals, + 'html-navigation-heading': 'Navigation menu', + 'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"` + } +}; + +const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, { + SearchBox: searchBoxTemplate, + Sidebar: sidebarTemplate, + VectorTabs: vectorTabsTemplate, + VectorMenu: vectorMenuTemplate, + PersonalMenu: personalMenuTemplate, Footer: footerTemplate } ); @@ -35,14 +76,13 @@ const HTML_INDICATORS = `
`; -export const vectorLegacyLoggedOut = () => mustache.render( skinTemplate, { +export const vectorLegacyLoggedOut = () => mustache.render( skinTemplate, Object.assign( { 'html-title': 'Vector 2019', 'page-isarticle': true, 'msg-tagline': 'From Wikipedia, the free encyclopedia', 'html-userlangattributes': htmluserlangattributes, 'msg-jumptonavigation': 'Jump to navigation', 'msg-jumptosearch': 'Jump to search', - 'data-navigation': NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants, // site specific 'data-footer': FOOTER_TEMPLATE_DATA, @@ -58,16 +98,15 @@ export const vectorLegacyLoggedOut = () => mustache.render( skinTemplate, { 'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ), 'html-indicators': HTML_INDICATORS, 'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 ) -}, TEMPLATE_PARTIALS ); +}, NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants ), TEMPLATE_PARTIALS ); -export const vectorLegacyLoggedIn = () => mustache.render( skinTemplate, { +export const vectorLegacyLoggedIn = () => mustache.render( skinTemplate, Object.assign( { 'html-title': 'Vector 2019', 'page-isarticle': true, 'msg-tagline': 'From Wikipedia, the free encyclopedia', 'html-userlangattributes': htmluserlangattributes, 'msg-jumptonavigation': 'Jump to navigation', 'msg-jumptosearch': 'Jump to search', - 'data-navigation': NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions, // site specific 'data-footer': FOOTER_TEMPLATE_DATA, @@ -77,16 +116,15 @@ export const vectorLegacyLoggedIn = () => mustache.render( skinTemplate, { 'html-bodycontent': placeholder( 'Article content goes here' ), 'html-printfooter': `Retrieved from ‘https://en.wikipedia.org/w/index.php?title=this&oldid=blah’`, 'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ) -}, TEMPLATE_PARTIALS ); +}, NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions ), TEMPLATE_PARTIALS ); -export const vectorLoggedIn = () => mustache.render( skinTemplate, { +export const vectorLoggedIn = () => mustache.render( skinTemplate, Object.assign( { 'html-title': 'Vector 2020', 'page-isarticle': true, 'msg-tagline': 'From Wikipedia, the free encyclopedia', 'html-userlangattributes': htmluserlangattributes, 'msg-jumptonavigation': 'Jump to navigation', 'msg-jumptosearch': 'Jump to search', - 'data-navigation': NAVIGATION_TEMPLATE_DATA.loggedInWithVariantsAndOptOut, // site specific 'data-footer': FOOTER_TEMPLATE_DATA, @@ -96,4 +134,4 @@ export const vectorLoggedIn = () => mustache.render( skinTemplate, { 'html-bodycontent': placeholder( 'Article content goes here' ), 'html-printfooter': `Retrieved from ‘https://en.wikipedia.org/w/index.php?title=this&oldid=blah’`, 'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ) -}, TEMPLATE_PARTIALS ); +}, NAVIGATION_TEMPLATE_DATA.loggedInWithVariantsAndOptOut ), TEMPLATE_PARTIALS );