wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Drop the Navigation component

Browse source 
It is not the most useful of components and adds an additional layer
of complexity similar to multiple inheritance chains that we find in
Object oriented programming.

I suggest we use index.mustache going forward for laying out the different
components and use components/template partials for reusable components.

Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
This commit is contained in:
jdlrobson 2020-03-25 13:57:46 -07:00
parent b9dc654a4f
commit 872519ab94
10 changed files with 136 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
includes/VectorTemplate.php
View file

@ -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,

41
includes/templates/Navigation.mustache
View file

@ -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>

43
includes/templates/index.mustache
View file

@ -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}}

32
resources/skins.vector.styles/Navigation.less
View file

@ -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;
}

31
resources/skins.vector.styles/common.less
View file

@ -186,3 +186,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;
}

1
resources/skins.vector.styles/index.less
View file

@ -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
resources/skins.vector.styles/legacy.less
View file

@ -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';

49
stories/Navigation.stories.data.js
View file

@ -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 };

20
stories/Navigation.stories.js
View file

@ -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
);

62
stories/skin.stories.js
View file

@ -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 );