2020-06-08 22:14:37 +00:00
|
|
|
/**
|
|
|
|
|
* @external LogoOptions
|
|
|
|
|
* @external LogoTemplateData
|
|
|
|
|
*/
|
|
|
|
|
|
[modern] A new version of Vector with a new logo
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
2020-03-09 05:51:00 +00:00
|
|
|
import logoTemplate from '!!raw-loader!../includes/templates/Logo.mustache';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoOptions}
|
|
|
|
|
*/
|
|
|
|
|
const wordmark = {
|
|
|
|
|
src: '/assets/wordmark.svg',
|
|
|
|
|
width: 116,
|
|
|
|
|
height: 18
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoOptions}
|
|
|
|
|
*/
|
|
|
|
|
const tagline = {
|
|
|
|
|
src: '/assets/tagline.svg',
|
|
|
|
|
width: 117,
|
|
|
|
|
height: 13
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {string}
|
|
|
|
|
*/
|
|
|
|
|
const icon = '/assets/icon.png';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoTemplateData}
|
|
|
|
|
*/
|
|
|
|
|
const wordmarkTaglineIcon = {
|
|
|
|
|
'data-logos': {
|
|
|
|
|
wordmark, tagline, icon
|
|
|
|
|
},
|
|
|
|
|
'msg-sitetitle': 'Wikipedia',
|
|
|
|
|
'msg-sitesubtitle': 'the free encyclopedia'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoTemplateData}
|
|
|
|
|
*/
|
|
|
|
|
const wordmarkIcon = {
|
|
|
|
|
'data-logos': {
|
|
|
|
|
wordmark, icon
|
|
|
|
|
},
|
|
|
|
|
'msg-sitetitle': 'Wikipedia',
|
|
|
|
|
'msg-sitesubtitle': 'the free encyclopedia'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoTemplateData}
|
|
|
|
|
*/
|
|
|
|
|
const wordmarkOnly = {
|
|
|
|
|
'data-logos': {
|
|
|
|
|
wordmark
|
|
|
|
|
},
|
|
|
|
|
'msg-sitetitle': 'Wikipedia',
|
|
|
|
|
'msg-sitesubtitle': 'the free encyclopedia'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {LogoTemplateData}
|
|
|
|
|
*/
|
|
|
|
|
const noLogo = {
|
|
|
|
|
'data-logos': {},
|
|
|
|
|
'msg-sitetitle': 'Wikipedia',
|
|
|
|
|
'msg-sitesubtitle': 'the free encyclopedia'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @type {Object.<string, LogoTemplateData>}
|
|
|
|
|
*/
|
|
|
|
|
const LOGO_TEMPLATE_DATA = {
|
|
|
|
|
wordmarkTaglineIcon,
|
|
|
|
|
wordmarkIcon,
|
|
|
|
|
wordmarkOnly,
|
|
|
|
|
noLogo
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export { LOGO_TEMPLATE_DATA, logoTemplate };
|