mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
6a9ee465bc
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
115 lines
5.6 KiB
JavaScript
115 lines
5.6 KiB
JavaScript
import { htmluserlangattributes } from './utils';
|
||
import { placeholder } from './utils';
|
||
|
||
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';
|
||
import { logoTemplate } from './Logo.stories.data';
|
||
|
||
export 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"`
|
||
}
|
||
};
|
||
|
||
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
||
Logo: logoTemplate,
|
||
SearchBox: searchBoxTemplate,
|
||
Sidebar: sidebarTemplate,
|
||
VectorTabs: vectorTabsTemplate,
|
||
VectorMenu: vectorMenuTemplate,
|
||
PersonalMenu: personalMenuTemplate,
|
||
Footer: footerTemplate
|
||
} );
|
||
|
||
const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
|
||
<div id="mw-indicator-good-star" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Good_articles"
|
||
title="This is a good article. Follow the link for more information.">
|
||
<img alt="This is a good article. Follow the link for more information."
|
||
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
|
||
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
|
||
</a>
|
||
</div>
|
||
<div id="mw-indicator-pp-autoreview" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Protection_policy#pending"
|
||
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
|
||
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
|
||
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
export const LEGACY_TEMPLATE_DATA = {
|
||
'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',
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'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 ),
|
||
|
||
// extension dependent..
|
||
'html-hook-vector-before-footer': placeholder( 'VectorBeforeFooter hook output', 100 ),
|
||
'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
|
||
'html-indicators': HTML_INDICATORS,
|
||
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
|
||
};
|
||
|
||
export const MODERN_TEMPLATE_DATA = {
|
||
'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',
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'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 )
|
||
};
|