mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-23 22:03:39 +00:00
Use MediaWiki UI version 2 from core in Minerva
Depends-on: Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5 Bug: T191021 Change-Id: Ifdc3a3273aa93129177a11814651ec811c20f49c
This commit is contained in:
jdlrobson
parent
0d9f6cb13c
commit
9fa0f3a64d
|
|
@ -3,8 +3,9 @@ import { configure } from '@storybook/html';
|
|||
import '../resources/skins.minerva.base.styles/skin.less';
|
||||
import '../resources/skins.minerva.scripts/styles.less';
|
||||
|
||||
import './storybook.less';
|
||||
import '../skinStyles/mediawiki.hlist/minerva.less';
|
||||
import '../skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less';
|
||||
|
||||
|
||||
// Automatically import all files ending in `*.stories.js`.
|
||||
configure(require.context('../stories', true, /\.stories\.js$/), module);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@import '../.resolve-less-imports/mediawiki.ui.icons.less';
|
||||
|
||||
.mf-mw-ui-icon-rotate-anti-clockwise:before {
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
|
||||
// Icons
|
||||
.mw-ui-icon-mf-arrow-gray:before {
|
||||
background-image: url( ../.resolve-less-imports/images/expand.svg );
|
||||
.mw-ui-icon-mf-expand-gray:before {
|
||||
background-image: url( '../.resolve-less-imports/images/expand.svg' );
|
||||
}
|
||||
|
||||
.mw-ui-icon-wikimedia-history-base20:before {
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
"resourceModule": "mediawiki.hlist",
|
||||
"maxSize": "0.5KB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "mediawiki.ui.icon",
|
||||
"maxSize": "0.8KB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "mediawiki.ui.button",
|
||||
"maxSize": "1.1KB"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/maste
|
|||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.mixins.rotation.less
|
||||
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.mixins.animation.less
|
||||
|
||||
curl "https://en.wikipedia.org/w/load.php?modules=mediawiki.ui.icon&only=styles&debug=true&useskin=minerva" -o .resolve-less-imports/mediawiki.ui.icons.less
|
||||
# Append compatibility with wgMinervaApplyKnownTemplateHacks.
|
||||
echo "@wgMinervaApplyKnownTemplateHacks: 1;" >> .resolve-less-imports/mediawiki.ui/variables.less
|
||||
|
||||
|
|
@ -23,4 +24,4 @@ echo "@wgMinervaApplyKnownTemplateHacks: 1;" >> .resolve-less-imports/mediawiki
|
|||
curl "https://en.m.wikipedia.org/w/load.php?modules=skins.minerva.icons.wikimedia&image=history&format=original&skin=minerva&version=7aa66" -o .resolve-less-imports/images/clock.svg
|
||||
|
||||
# expand icon
|
||||
curl "https://en.m.wikipedia.org/w/load.php?modules=mobile.ooui.icons&image=expand&variant=gray&format=rasterized&skin=minerva&version=grblv" -o .resolve-less-imports/images/expand.svg
|
||||
curl "https://en.m.wikipedia.org/w/load.php?modules=mobile.ooui.icons&image=expand&&format=rasterized&skin=minerva&version=grblv" -o .resolve-less-imports/images/expand.svg
|
||||
|
|
|
|||
|
|
@ -212,9 +212,6 @@
|
|||
"mediawiki.hlist": [
|
||||
"skinStyles/mediawiki.hlist/minerva.less"
|
||||
],
|
||||
"mediawiki.ui.icon": [
|
||||
"skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less"
|
||||
],
|
||||
"mobile.languages.structured": [
|
||||
"skinStyles/mobile.languages.structured/LanguageSearcher.less"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,208 +0,0 @@
|
|||
/**
|
||||
* Redefinition of the mw-ui-icon class from MediaWiki-core.
|
||||
*
|
||||
* This module attempts to maintain compatibility with the
|
||||
* core mw-ui-icon module, while adding more mobile-friendly
|
||||
* features like increased touch-area sizes and highlights.
|
||||
*
|
||||
* - mw-ui-icon = base class. 20px square with icon.
|
||||
* - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
|
||||
* - mw-ui-icon + mw-ui-icon-small = small icon with padding & pseudo-states.
|
||||
* - mw-ui-icon + mw-ui-icon-flush-left = negative right-margin.
|
||||
* - mw-ui-icon + mw-ui-icon-flush-right = negative left-margin.
|
||||
* - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
|
||||
* Labels should be placed in a separate element beside the icon.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../../minerva.less/minerva.variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@icon-background-color--selected: rgba( 0, 0, 0, 0.03 );
|
||||
|
||||
/**
|
||||
* Mixin for a pseudo-element with a background image.
|
||||
*/
|
||||
.mixin-background-square( @size ) {
|
||||
// Sizing properties
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// In case display: block is overridden and display gets set to `flex`
|
||||
// because of inheritance T233521.
|
||||
min-width: @size;
|
||||
min-height: @size;
|
||||
|
||||
// Background properties.
|
||||
background-repeat: no-repeat;
|
||||
// Using static value instead of `background-size: contain` because of T233521#5545513.
|
||||
background-size: @size @size;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/**
|
||||
* A standalone 20px square with screen-reader text. Contains a :before element
|
||||
* to house the icon as a background image. Total size is increased with padding via
|
||||
* `box-sizing: content-box`. This separates control over size of icon vs the size of
|
||||
* the touch-area.
|
||||
*/
|
||||
.mw-ui-icon {
|
||||
// reset font-size so the "em" value is relative to the more
|
||||
// predictable rem font size ...and no rems because we can't have nice things.
|
||||
font-size: initial;
|
||||
|
||||
// sizing
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
// this is important for increasing the size via padding. Overrides `.view-border-box *`.
|
||||
box-sizing: content-box !important;
|
||||
width: @icon-size-md;
|
||||
height: @icon-size-md;
|
||||
|
||||
// Guarding against flex-box variability.
|
||||
min-width: @icon-size-md;
|
||||
min-height: @icon-size-md;
|
||||
flex-basis: @icon-size-md;
|
||||
|
||||
// alignment
|
||||
vertical-align: middle;
|
||||
line-height: 0;
|
||||
|
||||
// Overflow ellipsis.
|
||||
.text-overflow( @visible: false );
|
||||
|
||||
// resetting styles for <button> elements
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
.mixin-background-square( @icon-size-md );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* When aligning a series of similar icons (e.g. list items)
|
||||
* prefer using a `:first-child` or `:last-child` selector.
|
||||
* The flush-left/right classes are appropriate when that's unavailable.
|
||||
*/
|
||||
.mw-ui-icon-flush-top {
|
||||
margin-top: -@icon-padding-md;
|
||||
}
|
||||
|
||||
.mw-ui-icon-flush-left {
|
||||
margin-left: -@icon-padding-md;
|
||||
}
|
||||
|
||||
.mw-ui-icon-flush-right {
|
||||
margin-right: -@icon-padding-md;
|
||||
}
|
||||
|
||||
.mw-ui-icon-element {
|
||||
border-radius: @border-radius-base;
|
||||
padding: @icon-padding-md;
|
||||
// Use semi-colon if multiple arguments are needed!
|
||||
// See https://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments
|
||||
.transition( background-color @transition-duration-base; );
|
||||
|
||||
// Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
|
||||
color: transparent;
|
||||
|
||||
&:focus, &:active, &:visited {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// Assume a mobile device - and avoid tap state remaining after click (T233046).
|
||||
&:active {
|
||||
background-color: @icon-background-color--selected;
|
||||
}
|
||||
}
|
||||
|
||||
// When the user's device primary input is capable of hover, like a mouse,
|
||||
// use hover (T233046). Only on active elements.
|
||||
@media ( hover: hover ) {
|
||||
.mw-ui-icon-element:not( .disabled ):hover {
|
||||
background-color: @icon-background-color--selected;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-ui-icon-small {
|
||||
width: @icon-size-sm;
|
||||
height: @icon-size-sm;
|
||||
min-width: @icon-size-sm;
|
||||
min-height: @icon-size-sm;
|
||||
flex-basis: @icon-size-sm;
|
||||
line-height: @icon-size-sm;
|
||||
|
||||
&:before {
|
||||
.mixin-background-square( @icon-size-sm );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-ui-icon-small.mw-ui-icon-element {
|
||||
padding: @icon-padding-sm;
|
||||
}
|
||||
|
||||
.mw-ui-icon-small.mw-ui-icon-flush-left {
|
||||
margin-left: -@icon-padding-sm;
|
||||
}
|
||||
|
||||
.mw-ui-icon-small.mw-ui-icon-flush-right {
|
||||
margin-right: -@icon-padding-sm;
|
||||
}
|
||||
|
||||
.mw-ui-icon-small.mw-ui-icon-before:before {
|
||||
min-width: @icon-size-sm;
|
||||
min-height: @icon-size-sm;
|
||||
margin-right: @icon-padding-sm;
|
||||
}
|
||||
|
||||
.mw-ui-icon-before {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
|
||||
&:before {
|
||||
// sizing
|
||||
display: inline-block;
|
||||
font-size: initial;
|
||||
width: auto;
|
||||
min-width: @icon-size-md;
|
||||
min-height: @icon-size-md;
|
||||
|
||||
// alignment. Margin is added to separate accompanying text.
|
||||
margin-right: @margin-icon-md-labelled;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and ( min-width: @width-breakpoint-desktop ) {
|
||||
.mw-ui-icon-with-label-desktop {
|
||||
color: @icon-color;
|
||||
width: auto;
|
||||
line-height: inherit;
|
||||
flex-basis: auto;
|
||||
|
||||
&:hover, &:focus, &:active, &:visited {
|
||||
color: @icon-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
// Don't use `@icon-padding-md` as we are adjacent to text.
|
||||
margin-right: @margin-icon-md-labelled;
|
||||
// Seems to be more visually centered than `middle`.
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +1,33 @@
|
|||
import mustache from 'mustache';
|
||||
import template from '!!raw-loader!../includes/Skins/footer.mustache';
|
||||
import Logo from '!!raw-loader!../includes/Skins/Logo.mustache';
|
||||
import footerItemList from '!!raw-loader!../includes/Skins/footerItemList.mustache';
|
||||
import { lastModifiedBar, lastModifiedBarActive } from './lastModifiedBar.stories';
|
||||
import { placeholder } from './utils';
|
||||
import './footer.less';
|
||||
|
||||
export default {
|
||||
title: 'Footer'
|
||||
};
|
||||
|
||||
const FOOTER_TEMPLATE_DATA = {
|
||||
headinghtml: 'Site title OR Logo',
|
||||
licensehtml: 'Content is available under <a rel="nofollow" href="#">Reading Web 3.0 License</a> unless otherwise noted.',
|
||||
dataAfterContent: placeholder( 'Extensions can add here e.g. Related Articles.' ),
|
||||
footer: true,
|
||||
lists: [
|
||||
'msg-mobile-frontend-footer-sitename': 'Site title OR Logo',
|
||||
'html-minerva-license': 'Content is available under <a rel="nofollow" href="#">Reading Web 3.0 License</a> unless otherwise noted.',
|
||||
'html-after-content': placeholder( 'Extensions can add here e.g. Related Articles.' ),
|
||||
'data-places': [
|
||||
{
|
||||
name: 'places',
|
||||
items: [
|
||||
id: 'places',
|
||||
'array-items': [
|
||||
{
|
||||
category: 'places',
|
||||
name: 'terms-use',
|
||||
linkhtml: '<a href="#">Terms of Use</a>'
|
||||
id: 'terms-use',
|
||||
html: '<a href="#">Terms of Use</a>'
|
||||
},
|
||||
{
|
||||
category: 'places',
|
||||
name: 'privacy',
|
||||
linkhtml: '<a href="#">Privacy</a>'
|
||||
id: 'privacy',
|
||||
html: '<a href="#">Privacy</a>'
|
||||
},
|
||||
{
|
||||
category: 'places',
|
||||
name: 'desktop-toggle',
|
||||
linkhtml: '<a href="#">Desktop</a>'
|
||||
id: 'desktop-toggle',
|
||||
html: '<a href="#">Desktop</a>'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -38,11 +35,18 @@ const FOOTER_TEMPLATE_DATA = {
|
|||
};
|
||||
|
||||
export const footer = () =>
|
||||
mustache.render( template, Object.assign( FOOTER_TEMPLATE_DATA, {
|
||||
lastmodified: lastModifiedBar()
|
||||
} ) );
|
||||
mustache.render( template, {
|
||||
'data-footer': Object.assign( FOOTER_TEMPLATE_DATA, {
|
||||
'html-minerva-lastmodified': lastModifiedBar()
|
||||
} )
|
||||
} );
|
||||
|
||||
export const footerRecentEdit = () =>
|
||||
mustache.render( template, Object.assign( FOOTER_TEMPLATE_DATA, {
|
||||
lastmodified: lastModifiedBarActive()
|
||||
} ) );
|
||||
mustache.render( template, {
|
||||
'data-footer': Object.assign( FOOTER_TEMPLATE_DATA, {
|
||||
'html-minerva-lastmodified': lastModifiedBarActive()
|
||||
} )
|
||||
}, {
|
||||
footerItemList,
|
||||
Logo
|
||||
} );
|
||||
|
|
|
|||
Loading…
Reference in a new issue