wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-27 15:40:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix storybook dev-script imports

Browse source 
* Correctly pull down mediawiki.skin.variables.less
* Update source of clock icon in last modified bar
* Update query selectors
* Push to docs.wikimedia.org so things do not break so easily
again

Bug: T263270
Change-Id: I93cb7e53fb78d3a03019583b3b0c69a057088044
This commit is contained in:
Volker E 2020-09-18 12:34:48 -07:00 committed by jdlrobson
parent 6fbb0cdc68
commit 9d1db05e7b
4 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
dev-scripts/setup-storybook.sh
View file

@ -4,17 +4,18 @@ set -eu
mkdir -p .resolve-less-imports/images mkdir -p .resolve-less-imports/images
mkdir -p .resolve-less-imports/mediawiki.ui mkdir -p .resolve-less-imports/mediawiki.ui
# LESS imports # Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
curl "https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.less/mediawiki.mixins.less?view=raw" -o .resolve-less-imports/mediawiki.mixins.less -L curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.skin.variables.less
curl "https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?view=raw" -o .resolve-less-imports/mediawiki.ui/variables.less -L curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.mixins.less
curl "https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?view=raw" -o .resolve-less-imports/mediawiki.mixins.rotation.less -L curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.ui/variables.less
curl "https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?view=raw" -o .resolve-less-imports/mediawiki.mixins.animation.less -L 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
# Append compatibility with wgMinervaApplyKnownTemplateHacks. # Append compatibility with wgMinervaApplyKnownTemplateHacks.
echo "@wgMinervaApplyKnownTemplateHacks: 1;" >> .resolve-less-imports/mediawiki.ui/variables.less echo "@wgMinervaApplyKnownTemplateHacks: 1;" >> .resolve-less-imports/mediawiki.ui/variables.less
# clock icon # clock icon
curl "https://en.m.wikipedia.org/w/load.php?modules=skins.minerva.icons.images&image=clock&format=original&skin=minerva&version=7aa66" -o .resolve-less-imports/images/clock.svg 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 # 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&variant=gray&format=rasterized&skin=minerva&version=grblv" -o .resolve-less-imports/images/expand.svg

4
package.json
View file

@ -3,9 +3,9 @@
"scripts": { "scripts": {
"storybook:setup": "./dev-scripts/setup-storybook.sh", "storybook:setup": "./dev-scripts/setup-storybook.sh",
"storybook": "npm run storybook:setup && start-storybook -p 6006", "storybook": "npm run storybook:setup && start-storybook -p 6006",
"build-storybook": "npm run storybook:setup && build-storybook -o docs/", "build-storybook": "npm run storybook:setup && build-storybook -o docs/ui",
"test": "grunt test && npm run doc && dev-scripts/svg_check.sh", "test": "grunt test && npm run doc && dev-scripts/svg_check.sh",
"doc": "jsdoc -c jsdoc.json", "doc": "jsdoc -c jsdoc.json && npm run build-storybook",
"test:size": "node ./tests/resource-loader-bundlesize.js", "test:size": "node ./tests/resource-loader-bundlesize.js",
"selenium-test-cucumber": "wdio tests/selenium/wdio.conf.cucumber.js", "selenium-test-cucumber": "wdio tests/selenium/wdio.conf.cucumber.js",
"selenium-daily": "MW_SERVER=https://en.m.wikipedia.beta.wmflabs.org npm run selenium-test", "selenium-daily": "MW_SERVER=https://en.m.wikipedia.beta.wmflabs.org npm run selenium-test",

6
stories/footer.less
View file

@ -3,15 +3,15 @@
} }
// Icons // Icons
.mw-ui-icon-mf-expand-gray:before { .mw-ui-icon-mf-arrow-gray:before {
background-image: url( ../.resolve-less-imports/images/expand.svg ); background-image: url( ../.resolve-less-imports/images/expand.svg );
} }
.mw-ui-icon-minerva-clock:before { .mw-ui-icon-wikimedia-history-base20:before {
background-image: url( ../.resolve-less-imports/images/clock.svg ); background-image: url( ../.resolve-less-imports/images/clock.svg );
} }
.mw-ui-icon-mf-expand-invert:before, .mw-ui-icon-mf-expand-invert:before,
.mw-ui-icon-minerva-clock-invert:before { .mw-ui-icon-wikimedia-history-invert:before {
filter: brightness( 0 ) invert( 1 ); filter: brightness( 0 ) invert( 1 );
} }

8
stories/lastModifiedBar.stories.js
View file

@ -9,7 +9,7 @@ export default {
export const lastModifiedBar = () => export const lastModifiedBar = () =>
withAnnotation( mustache.render( template, { withAnnotation( mustache.render( template, {
clockIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-minerva-clock', historyIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-wikimedia-history-base20',
arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray', arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
text: 'Last edited on 20 January 2020, at 18:38', text: 'Last edited on 20 January 2020, at 18:38',
href: "#/wiki/Special:History/Username", href: "#/wiki/Special:History/Username",
@ -20,7 +20,7 @@ export const lastModifiedBar = () =>
export const lastModifiedBarActive = () => { export const lastModifiedBarActive = () => {
const html = mustache.render( template, { const html = mustache.render( template, {
clockIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-minerva-clock', historyIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-wikimedia-history-base20',
arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray', arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
text: 'Last edited on 20 January 2020, at 18:38', text: 'Last edited on 20 January 2020, at 18:38',
href: "#/wiki/Special:History/Username", href: "#/wiki/Special:History/Username",
@ -35,8 +35,8 @@ export const lastModifiedBarActive = () => {
node.querySelector( '.last-modified-bar__text' ).outerHTML = `<span class="last-modified-bar__text"> node.querySelector( '.last-modified-bar__text' ).outerHTML = `<span class="last-modified-bar__text">
<a href="#">Last edited 57 seconds ago</a> by <a href="#">Username</a></span>`; <a href="#">Last edited 57 seconds ago</a> by <a href="#">Username</a></span>`;
// invert icons // invert icons
node.querySelector( '.mw-ui-icon-minerva-clock' ).classList.add( node.querySelector( '.mw-ui-icon-wikimedia-history-base20' ).classList.add(
'mw-ui-icon-minerva-clock-invert' 'mw-ui-icon-wikimedia-history-invert'
); );
node.querySelector( '.mw-ui-icon-mf-expand-gray' ).classList.add( node.querySelector( '.mw-ui-icon-mf-expand-gray' ).classList.add(
'mw-ui-icon-mf-expand-invert' 'mw-ui-icon-mf-expand-invert'