Merge "[modern] A new version of Vector with a new logo"

This commit is contained in:
jenkins-bot 2020-04-30 21:47:44 +00:00 committed by Gerrit Code Review
commit 337244ebdf
15 changed files with 286 additions and 55 deletions

View file

@ -3,9 +3,14 @@ set -euo pipefail
IFS=$'\n\t'
mkdir -p .storybook/resolve-less-imports/mediawiki.ui
mkdir -p docs/ui/assets/
curl "https://en.wikipedia.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface" -o .storybook/integration.less
curl -L "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.less
curl -L "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.ui/variables.less
curl -L "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.rotation.less
curl -L "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.animation.less
curl -L "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.animation.less
curl "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o "docs/ui/assets/wordmark.svg"
curl "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o "docs/ui/assets/icon.png"
# FIXME: Update to en.wikipedia.org uris when available.
curl "https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg" -o "docs/ui/assets/tagline.svg"

View file

@ -144,6 +144,7 @@ class VectorTemplate extends BaseTemplate {
// It should be followed by the name of the hook in hyphenated lowercase.
//
// Conditionally used values must use null to indicate absence (not false or '').
$mainPageHref = Skin::makeMainPageUrl();
$commonSkinData = [
'html-headelement' => $this->get( 'headelement', '' ),
'html-sitenotice' => $this->get( 'sitenotice', null ),
@ -189,6 +190,13 @@ class VectorTemplate extends BaseTemplate {
],
'html-navigation-heading' => $this->getMsg( 'navigation-heading' ),
'data-search-box' => $this->buildSearchProps(),
// Header
'data-logos' => ResourceLoaderSkinModule::getAvailableLogos( $this->config ),
'msg-sitetitle' => $this->getMsg( 'sitetitle' )->text(),
'msg-sitesubtitle' => $this->getMsg( 'sitesubtitle' )->text(),
'main-page-href' => $mainPageHref,
'data-sidebar' => $this->buildSidebar(),
] + $this->getMenuProps();
@ -320,7 +328,7 @@ class VectorTemplate extends BaseTemplate {
}
return [
'has-logo' => true,
'has-logo' => $this->isLegacy,
'html-logo-attributes' => Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
'class' => 'mw-wiki-logo',

View file

@ -0,0 +1,28 @@
{{!
LogoDefinition logo
string main-page-href link to the main page
string msg-sitesubtitle the contents of the sitesubtitle message key
}}
{{#data-logos}}
<a href="{{main-page-href}}" class="mw-logo">
{{#icon}}
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
<img class="mw-logo-icon" src="{{.}}" alt=""
aria-hidden="true" height="50" width="50">
{{/icon}}
<span class="mw-logo-container">
{{#wordmark}}
<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}"
src="{{src}}" width="{{width}}" height="{{height}}">
{{/wordmark}}
{{^wordmark}}
<strong class="mw-logo-wordmark">{{msg-sitetitle}}</strong>
{{/wordmark}}
{{#tagline}}
<img class="mw-logo-tagline"
alt="{{msg-sitesubtitle}}"
src="{{src}}" width="{{width}}" height="{{height}}">
{{/tagline}}
</span>
</a>
{{/data-logos}}

View file

@ -22,6 +22,7 @@
string html-dataAfterContent
string html-navigation-heading heading for entire navigation that is usually hidden to screen
readers
LogoOptions data-logos
MenuDefinition 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.
@ -70,6 +71,7 @@
{{{html-dataAfterContent}}}
<header class="mw-header">
{{>Logo}}
</header>
<div id="mw-navigation">

View file

@ -10,7 +10,7 @@
"lint:styles": "stylelint \"**/*.{less,css}\"",
"lint:i18n": "banana-checker --requireLowerCase=0 i18n/",
"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
"storybook": "bash ./dev-scripts/setup-storybook.sh && start-storybook -p 6006",
"storybook": "bash ./dev-scripts/setup-storybook.sh && start-storybook -p 6006 -s docs/ui/",
"build-storybook": "bash ./dev-scripts/setup-storybook.sh && build-storybook -o docs/ui",
"svgmin": "svgo --config=.svgo.yml -q -r -f resources/"
},

View file

@ -0,0 +1,39 @@
@import '../../variables.less';
@import 'mediawiki.mixins.less';
.mw-logo {
.flex-display();
// If icon is not configured, ensure that the logo still takes up available
// space allocated by layout.
height: 100%;
// Center vertically.
align-items: center;
}
.mw-logo-icon {
// For browsers which do not support flexbox we float left.
// This will be ignored in flexbox browsers.
float: left;
margin-right: 10px;
}
.mw-logo-container {
// For browsers which do not support flexbox we float left.
// This will be ignored in flexbox browsers.
// The two children `div`s will lay out in a row.
float: left;
}
// Note for 3rd parties where no wgLogos['wordmark'] is defined
// the site title is not clipped. We may need to revisit this later
// for projects with long site titles.
.mw-logo-wordmark {
font-size: 1.4em;
}
.mw-logo-tagline {
// For browsers which do not support flexbox.
display: block;
margin-top: 5px;
font-size: 0.7em;
}

View file

@ -5,6 +5,7 @@
@media screen {
@import 'common.less';
@import 'layout.less';
@import 'Logo.less';
@import 'PersonalMenu.less';
@import 'SearchBox.less';
@import 'VectorTabs.less';

View file

@ -6,41 +6,44 @@
// Modern layout variables
@height-tabs: 2.5em; // Keep in sync with .vectorTabs height
@margin-top-sidebar: 0.5em;
// Header sizes defined in the description of T246170 and comment T246170#5957100
@padding-horizontal-header: 24px;
@padding-top-header: 10px;
@padding-bottom-header: 5px;
@height-header--inner: 54px;
@height-logo-icon: 50px; // Logo sizes per specification in T245190.
@height-header: @height-header--inner +
@padding-top-header + @padding-bottom-header; // 54px + 10px + 5px = 69px;
@padding-left-sidebar: 0.5em;
@padding-horizontal-header: @margin-end-portal +
@padding-left-sidebar +
( @margin-start-nav-main-body / @font-size-nav-main-heading );
@padding-vertical-header: 0.125em;
@margin-top-header: 0.625em;
@margin-bottom-header: 0.3125em;
@height-logo-icon: 3.125em; // Logo sizes per specification in T245190.
@height-header: @height-logo-icon +
@margin-top-header + @margin-bottom-header +
2 * @padding-vertical-header;
@width-grid-column-one: 11em;
/* Space for header above content */
.mw-header-placeholder {
// Reserve space for the absolute positioned header and tabs.
height: @height-header; // Pixels.
padding-bottom: @height-tabs; // Different unit: em.
height: @height-header + @height-tabs;
}
/* Header layout */
.mw-header {
position: absolute;
z-index: @z-index-header;
top: 0;
left: 0;
right: 0;
height: @height-header--inner;
// Padding is outside the sizing box (content-box).
padding: @padding-top-header @padding-horizontal-header @padding-bottom-header;
// A height is set to account for projects where no icon is set.
height: @height-logo-icon;
margin: @margin-top-header 0 @margin-bottom-header;
padding: @padding-vertical-header @padding-horizontal-header;
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
// https://caniuse.com/#search=align-items
align-items: center;
z-index: @z-index-header;
}
/* Main column */
@ -96,10 +99,18 @@
#mw-panel {
position: absolute;
z-index: @z-index-sidebar;
top: 0;
width: @width-grid-column-one;
top: @height-header;
left: 0;
width: @width-grid-column-one;
.box-sizing( border-box );
margin-top: @margin-top-sidebar;
padding-left: @padding-left-sidebar;
z-index: @z-index-sidebar;
}
#footer {
margin-left: @width-grid-column-one;
margin-top: 0;
}
#footer, /* FIXME: Remove 2 weeks after deployment. */

View file

@ -50,7 +50,7 @@
},
"skins.vector.styles": {
"class": "ResourceLoaderSkinModule",
"features": [ "elements", "content", "interface", "logo", "legacy" ],
"features": [ "elements", "content", "interface", "legacy" ],
"targets": [
"desktop",
"mobile"

View file

@ -0,0 +1,78 @@
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 };

27
stories/Logo.stories.js Normal file
View file

@ -0,0 +1,27 @@
import mustache from 'mustache';
import { logoTemplate, LOGO_TEMPLATE_DATA } from './Logo.stories.data';
import '../resources/skins.vector.styles/Logo.less';
export default {
title: 'Logo'
};
export const logo = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkTaglineIcon
);
export const logoWordmarkIcon = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkIcon
);
export const logoWordmark = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.wordmarkOnly
);
export const noLogo = () => mustache.render(
logoTemplate,
LOGO_TEMPLATE_DATA.noLogo
);

View file

@ -19,7 +19,7 @@ export const SIDEBAR_DATA = {
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
},
withPortalsAndOptOut: {
'has-logo': true,
'has-logo': false,
'array-portals-first': PORTALS.navigation,
'data-emphasized-sidebar-action': {
href: '#',

32
stories/legacy.stories.js Normal file
View file

@ -0,0 +1,32 @@
import mustache from 'mustache';
import '../resources/skins.vector.styles/legacy.less';
import legacySkinTemplate from '!!raw-loader!../includes/templates/legacy.mustache';
import {
LEGACY_TEMPLATE_DATA,
NAVIGATION_TEMPLATE_DATA,
TEMPLATE_PARTIALS
} from './skin.stories.data';
export default {
title: 'Skin (legacy)'
};
export const vectorLegacyLoggedOut = () => mustache.render(
legacySkinTemplate,
Object.assign(
{},
LEGACY_TEMPLATE_DATA,
NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants
),
TEMPLATE_PARTIALS
);
export const vectorLegacyLoggedIn = () => mustache.render(
legacySkinTemplate,
Object.assign(
{},
LEGACY_TEMPLATE_DATA,
NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions
),
TEMPLATE_PARTIALS
);

View file

@ -1,18 +1,15 @@
import mustache from 'mustache';
import { htmluserlangattributes } from './utils';
import skinTemplate from '!!raw-loader!../includes/templates/index.mustache';
import legacySkinTemplate from '!!raw-loader!../includes/templates/legacy.mustache';
import { placeholder } from './utils';
import '../resources/skins.vector.styles/index.less';
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';
const NAVIGATION_TEMPLATE_DATA = {
export const NAVIGATION_TEMPLATE_DATA = {
loggedInWithVariantsAndOptOut: {
'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespace-tabs': namespaceTabsData,
@ -45,7 +42,8 @@ const NAVIGATION_TEMPLATE_DATA = {
}
};
const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Logo: logoTemplate,
SearchBox: searchBoxTemplate,
Sidebar: sidebarTemplate,
VectorTabs: vectorTabsTemplate,
@ -54,10 +52,6 @@ const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Footer: footerTemplate
} );
export default {
title: 'Skin'
};
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"
@ -77,7 +71,7 @@ const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
</div>
`;
export const vectorLegacyLoggedOut = () => mustache.render( legacySkinTemplate, Object.assign( {
export const LEGACY_TEMPLATE_DATA = {
'html-title': 'Vector 2019',
'page-isarticle': true,
'msg-tagline': 'From Wikipedia, the free encyclopedia',
@ -99,27 +93,9 @@ export const vectorLegacyLoggedOut = () => mustache.render( legacySkinTemplate,
'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
'html-indicators': HTML_INDICATORS,
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
}, NAVIGATION_TEMPLATE_DATA.loggedOutWithVariants ), TEMPLATE_PARTIALS );
};
export const vectorLegacyLoggedIn = () => mustache.render( legacySkinTemplate, 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',
// 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 )
}, NAVIGATION_TEMPLATE_DATA.loggedInWithMoreActions ), TEMPLATE_PARTIALS );
export const vectorLoggedIn = () => mustache.render( skinTemplate, Object.assign( {
export const MODERN_TEMPLATE_DATA = {
'html-title': 'Vector 2020',
'page-isarticle': true,
'msg-tagline': 'From Wikipedia, the free encyclopedia',
@ -135,4 +111,4 @@ export const vectorLoggedIn = () => mustache.render( skinTemplate, Object.assign
'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 )
}, NAVIGATION_TEMPLATE_DATA.loggedInWithVariantsAndOptOut ), TEMPLATE_PARTIALS );
};

View file

@ -1,3 +1,27 @@
/**
* @typedef {Object} LogoOptions
* @prop {string} src of logo. Can be relative, absolute or data uri.
* @prop {string} [alt] text of logo.
* @prop {number} width of asset
* @prop {number} height of asset
*/
/**
* @typedef {Object} ResourceLoaderSkinModuleLogos
* @prop {string} [icon] e.g. Wikipedia globe
* @prop {LogoOptions} [wordmark] e.g. Legacy Vector logo
* @prop {LogoOptions} [tagline] e.g. Legacy Vector logo
*/
/**
* @typedef {Object} LogoTemplateData
* @prop {ResourceLoaderSkinModuleLogos} data-logos as configured,
* the return value of ResourceLoaderSkinModule::getAvailableLogos.
* @prop {string} msg-sitetitle alternate text for wordmark
href the url to navigate to on click.
* @prop {string} msg-sitesubtitle alternate text for tagline.
*/
/**
* @typedef {Object} MenuDefinition
* @prop {string} id