mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 10:49:25 +00:00
Merge "Drop the Navigation component"
This commit is contained in:
commit
caf0fa023f
|
@ -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,
|
||||
|
|
|
@ -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.
|
||||
}}
|
||||
<div id="mw-navigation">
|
||||
<h2>{{{html-navigation-heading}}}</h2>
|
||||
<div id="mw-head">
|
||||
{{#data-personal-menu}}
|
||||
{{>PersonalMenu}}
|
||||
{{/data-personal-menu}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespace-tabs}}
|
||||
{{>VectorTabs}}
|
||||
{{/data-namespace-tabs}}
|
||||
{{#data-variants}}
|
||||
{{>VectorMenu}}
|
||||
{{/data-variants}}
|
||||
</div>
|
||||
<div id="right-navigation">
|
||||
{{#data-page-actions}}
|
||||
{{>VectorTabs}}
|
||||
{{/data-page-actions}}
|
||||
{{#data-page-actions-more}}
|
||||
{{>VectorMenu}}
|
||||
{{/data-page-actions-more}}
|
||||
{{#data-search-box}}
|
||||
{{>SearchBox}}
|
||||
{{/data-search-box}}
|
||||
</div>
|
||||
</div>
|
||||
{{#data-sidebar}}
|
||||
{{>Sidebar}}
|
||||
{{/data-sidebar}}
|
||||
</div>
|
|
@ -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 `</body></html>`.
|
||||
|
@ -57,9 +65,36 @@
|
|||
</div>
|
||||
</div>
|
||||
{{{html-dataAfterContent}}}
|
||||
{{#data-navigation}}
|
||||
{{>Navigation}}
|
||||
{{/data-navigation}}
|
||||
<div id="mw-navigation">
|
||||
<h2>{{{html-navigation-heading}}}</h2>
|
||||
<div id="mw-head">
|
||||
{{#data-personal-menu}}
|
||||
{{>PersonalMenu}}
|
||||
{{/data-personal-menu}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespace-tabs}}
|
||||
{{>VectorTabs}}
|
||||
{{/data-namespace-tabs}}
|
||||
{{#data-variants}}
|
||||
{{>VectorMenu}}
|
||||
{{/data-variants}}
|
||||
</div>
|
||||
<div id="right-navigation">
|
||||
{{#data-page-actions}}
|
||||
{{>VectorTabs}}
|
||||
{{/data-page-actions}}
|
||||
{{#data-page-actions-more}}
|
||||
{{>VectorMenu}}
|
||||
{{/data-page-actions-more}}
|
||||
{{#data-search-box}}
|
||||
{{>SearchBox}}
|
||||
{{/data-search-box}}
|
||||
</div>
|
||||
</div>
|
||||
{{#data-sidebar}}
|
||||
{{>Sidebar}}
|
||||
{{/data-sidebar}}
|
||||
</div>
|
||||
{{#data-footer}}
|
||||
{{>Footer}}
|
||||
{{/data-footer}}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 };
|
|
@ -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
|
||||
);
|
|
@ -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 = `<div class="mw-indicators mw-body-content">
|
|||
</div>
|
||||
`;
|
||||
|
||||
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 ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||||
'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 ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||||
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 )
|
||||
}, TEMPLATE_PARTIALS );
|
||||
}, NAVIGATION_TEMPLATE_DATA.loggedInWithVariantsAndOptOut ), TEMPLATE_PARTIALS );
|
||||
|
|
Loading…
Reference in a new issue