jenkins-bot has submitted this change and it was merged.
Change subject: Create new SVG icons library
......................................................................
Create new SVG icons library
In preparation for using mw-ui-icon in alpha
Change-Id: Id155a3f2e6ac80d0a30d1d35902a871e85db9722
---
M includes/Resources.php
A less/iconsNew.less
A less/images/icons/FIXME.txt
A less/images/icons/bell.png
A less/images/icons/bell.svg
A less/images/icons/blue-triangle.png
A less/images/icons/blue-triangle.svg
A less/images/icons/contents-ltr.png
A less/images/icons/contents-ltr.svg
A less/images/icons/editSourceNormal.svg
A less/images/icons/editToggle.svg
A less/images/icons/editVeNormal.svg
A less/images/icons/gray-triangle.png
A less/images/icons/gray-triangle.svg
A less/images/icons/hamburger.png
A less/images/icons/hamburger.svg
A less/images/icons/userAnonymous.png
A less/images/icons/userAnonymous.svg
A less/images/icons/userNormal.png
A less/images/icons/userNormal.svg
M less/minerva.less/minerva.mixins.less
21 files changed, 260 insertions(+), 0 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 516cad5..192b7e5 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -124,6 +124,13 @@
'position' => 'top',
),
+ 'skins.minerva.icons.styles' => $wgMFMobileResourceBoilerplate + array(
+ 'styles' => array(
+ 'less/iconsNew.less',
+ ),
+ 'position' => 'top',
+ ),
+
// Important: This module is loaded on both mobile and desktop skin
'mobile.head' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
diff --git a/less/iconsNew.less b/less/iconsNew.less
new file mode 100644
index 0000000..7a6da03
--- /dev/null
+++ b/less/iconsNew.less
@@ -0,0 +1,178 @@
+// FIXME: This file should be shared across repositories
+@import "minerva.variables";
+@import "minerva.mixins";
+@import "mediawiki.mixins";
+
+// FIXME: BEGIN: Find svg versions of all of these and add to icons folder
+// UI set
+.mw-ui-icon-talk {
+ .m-background-image('images/pagemenu/talk.png');
+}
+
+.mw-ui-icon-watch {
+ .m-background-image('images/watch.png');
+}
+
+.mw-ui-icon-edit {
+ .m-background-image('images/pagemenu/edit-locked.png');
+}
+
+.mw-ui-icon-edit-enabled {
+ .m-background-image('images/pagemenu/edit.png');
+}
+
+.mw-ui-icon-arrow-down {
+ .m-background-image('images/show.png');
+}
+
+.mw-ui-icon-arrow-up {
+ .m-background-image('images/hide.png');
+}
+
+.mw-ui-icon-watched {
+ .m-background-image('images/watched.png');
+}
+
+// Menu set
+.mw-ui-icon-home {
+ .m-background-image('images/menu/home.png');
+}
+
+.mw-ui-icon-random {
+ .m-background-image('images/menu/random.png');
+}
+
+.mw-ui-icon-watchlist {
+ .m-background-image('images/menu/watchlist.png');
+}
+
+.mw-ui-icon-uploads {
+ .m-background-image('images/menu/uploads.png');
+}
+
+.mw-ui-icon-nearby {
+ .m-background-image('images/menu/nearby.png');
+}
+
+.mw-ui-icon-settings {
+ .m-background-image('images/menu/settings.png');
+}
+
+.mw-ui-icon-secondary-logout {
+ .m-background-image('images/menu/loginout.png');
+}
+
+.mw-ui-icon-profile {
+ .m-background-image('images/menu/user.png');
+}
+
+// FIXME: This should use mw-ui-icon-anonymous in some clever way since they
are essentially the same icon
+.mw-ui-icon-anonymous-white {
+ .m-background-image('images/menu/anon.png');
+}
+
+// overlay set
+
+.mw-ui-icon-cancel {
+ .m-background-image('images/cancel.png');
+}
+
+.mw-ui-icon-clear {
+ .m-background-image('images/clear.png');
+}
+
+
+// Uploads set
+.mw-ui-icon-addimage {
+ .m-background-image('images/pagemenu/upload-locked.png');
+}
+
+.mw-ui-icon-addimage-enabled {
+ .m-background-image('images/pagemenu/upload.png');
+}
+
+.mw-ui-icon-photo {
+ .m-background-image('images/camera.png');
+}
+
+.mw-ui-icon-previous {
+ .m-background-image('modules/images/uploads/chevronLeft.png');
+}
+
+.mw-ui-icon-next {
+ .m-background-image('modules/images/uploads/chevronRight.png');
+}
+
+// Diffs set
+.mw-ui-icon-bytesadded {
+ .m-background-image('special/images/positive.png');
+}
+
+.mw-ui-icon-bytesremoved {
+ .m-background-image('special/images/negative.png');
+}
+
+.mw-ui-icon-bytesneutral {
+ .m-background-image('special/images/neutral.png');
+}
+
+.mw-ui-icon-back {
+ .m-background-image('images/back-ltr.png');
+}
+// FIXME: END
+
+.mw-ui-icon-toc {
+ .m-background-image-svg-quick( 'images/icons/contents-ltr' );
+}
+
+.mw-ui-icon-cleanup {
+ .m-background-image-svg-quick( 'images/icons/blue-triangle' );
+}
+
+.mw-ui-icon-cleanup-gray {
+ .m-background-image-svg-quick( 'images/icons/gray-triangle' );
+}
+
+.mw-ui-icon-mainmenu {
+ .m-background-image-svg-quick( 'images/icons/hamburger' );
+}
+
+.mw-ui-icon-notifications {
+ .m-background-image-svg-quick( 'images/icons/bell' );
+}
+
+.mw-ui-icon-user {
+ .m-background-image-svg-quick('images/icons/userNormal');
+}
+
+.mw-ui-icon-anonymous {
+ .m-background-image-svg-quick('images/icons/userAnonymous');
+}
+
+// no fallback mixin for those SVGs (VE doesn't work on browsers without SVG
+// support anyway)
+.mw-ui-icon-edit-source {
+ .m-background-image-svg-quick( 'images/icons/editSourceNormal' );
+}
+
+.mw-ui-icon-edit-ve {
+ .m-background-image-svg-quick( 'images/icons/editVeNormal' );
+}
+
+.mw-ui-icon-edit-switch {
+ .m-background-image-svg-quick( 'images/icons/editToggle' );
+}
+
+// FIXME: Find better workaround for this
+span.mw-ui-icon {
+ // a block inside an inline element is never a good idea - effects line
height of mobile diff bytesadded class
+ display: inline-block;
+}
+
+// FIXME: Upstream to mediawiki ui
+.mw-ui-icon {
+ &:before {
+ background-position: 50% 50%;
+ height: 100%;
+ }
+}
diff --git a/less/images/icons/FIXME.txt b/less/images/icons/FIXME.txt
new file mode 100644
index 0000000..1cd25d8
--- /dev/null
+++ b/less/images/icons/FIXME.txt
@@ -0,0 +1 @@
+This folder should be generated from a canonical source and shared across all
projects. PNGs should be generated from SVGs.
diff --git a/less/images/icons/bell.png b/less/images/icons/bell.png
new file mode 100644
index 0000000..5e36546
--- /dev/null
+++ b/less/images/icons/bell.png
Binary files differ
diff --git a/less/images/icons/bell.svg b/less/images/icons/bell.svg
new file mode 100644
index 0000000..e04ac8e
--- /dev/null
+++ b/less/images/icons/bell.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="48" height="48"
viewBox="-282.375 419.5 48 48" enable-background="new -282.375 419.5 48 48">
+ <path fill="#555" d="M-252.692 457.249h7.582c.697 0 1.395-.463
1.625-1.084.309-.618.154-1.392-.388-1.935-2.476-2.552-3.016-6.345-3.48-9.979-.774-5.416-1.625-11.528-9.362-12.303v-1.006c0-1.005-.772-1.779-1.778-1.779-1.007
0-1.78.774-1.78 1.779v1.006c-7.66.775-8.511 6.887-9.285 12.303-.541
3.635-1.005 7.428-3.481 9.979-.464.543-.619 1.239-.386 1.935.309.621.928 1.084
1.624 1.084h7.427m5.88 2.167c-1.239 0-2.168-.929-2.245-2.167h4.487c-.076
1.16-1.084 2.167-2.242 2.167zm0-5.727h-9.827c1.47-2.862 1.935-6.035
2.322-8.976.851-6.266 1.547-9.284 7.505-9.284 6.035 0 6.729 3.018 7.582
9.284.385 2.94.851 6.113 2.32 8.976h-9.902z"/>
+</svg>
diff --git a/less/images/icons/blue-triangle.png
b/less/images/icons/blue-triangle.png
new file mode 100644
index 0000000..30853ef
--- /dev/null
+++ b/less/images/icons/blue-triangle.png
Binary files differ
diff --git a/less/images/icons/blue-triangle.svg
b/less/images/icons/blue-triangle.svg
new file mode 100644
index 0000000..c454ee1
--- /dev/null
+++ b/less/images/icons/blue-triangle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="80" height="80" viewBox="0 0 80
80">
+ <path fill="#36b" d="M1.112 73.678l38.885-67.356 38.892 67.356z"/>
+ <path fill="#fff" d="M43.525
57.7v7.103h-6.823v-7.103h6.823zm-2.029-5.905h-3.272l-1.753-12.245v-7.854h6.824v7.854l-1.799
12.245z"/>
+</svg>
diff --git a/less/images/icons/contents-ltr.png
b/less/images/icons/contents-ltr.png
new file mode 100644
index 0000000..43538cf
--- /dev/null
+++ b/less/images/icons/contents-ltr.png
Binary files differ
diff --git a/less/images/icons/contents-ltr.svg
b/less/images/icons/contents-ltr.svg
new file mode 100644
index 0000000..69e2b55
--- /dev/null
+++ b/less/images/icons/contents-ltr.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="40" height="40" viewBox="0 0 40
40">
+ <g fill="#ABABAB">
+ <path d="M2.176 37.586v-6.202c0-.171.113-.298.243-.298h35.162c.134 0
.243.133.243.298v6.202c0 .164-.11.296-.243.296h-35.162c-.13
0-.243-.132-.243-.296z"/>
+ <path d="M37.824 16.602v6.207c0 .166-.11.298-.243.298h-35.162c-.13
0-.243-.135-.243-.298v-6.207c0-.16.113-.296.243-.296h35.162c.134 0
.243.136.243.296z"/>
+ <path d="M2.176 2.355c0-.132.108-.237.236-.237h21.94c.134 0
.236.105.236.237v6.677c0 .133-.103.237-.236.237h-21.94c-.13
0-.236-.104-.236-.237v-6.677z"/>
+ </g>
+</svg>
diff --git a/less/images/icons/editSourceNormal.svg
b/less/images/icons/editSourceNormal.svg
new file mode 100644
index 0000000..163b45a
--- /dev/null
+++ b/less/images/icons/editSourceNormal.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 32 32"
enable-background="new 0 0 40 40">
+ <g fill="#575757">
+ <path d="M22.496
11.403c-.057-1.1-.571-2.167-1.328-3.01-.776-.865-1.841-1.529-2.989-1.717l-14.826
13.3.01.006-.008-.004-1.188 5.346
5.481-.604.001.003.004-.003.006-.001-.002-.003c2.963-2.657 11.472-10.293
14.839-13.313zm-16.439
10.125c-.422-.423-.779-.683-1.271-1.02l13.316-12.04c.45.139 1.073.502 1.264
1.022l-13.309
12.038zm15.553-3.947v1.316h-1.435v8.089h1.435v1.316h-3.104v-10.72h3.104zm5.119
10.72v-1.316h1.435v-8.089h-1.435v-1.316h3.104v10.72h-3.104z"/>
+ </g>
+</svg>
diff --git a/less/images/icons/editToggle.svg b/less/images/icons/editToggle.svg
new file mode 100644
index 0000000..ea195b5
--- /dev/null
+++ b/less/images/icons/editToggle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="850" height="606.667"
viewBox="2.5 791.5 850.00001 606.667" enable-background="new 2.5 791.5 606.667
606.667">
+ <path d="M513.5
1135.041v-76.082l-46.687-7.782c-3.46-12.536-8.646-24.64-14.699-35.447l27.235-38.474-53.604-54.037-38.475
27.235c-11.238-6.053-22.911-11.24-35.447-14.699l-7.782-46.255h-76.082l-7.782
46.688c-12.536 3.458-24.64 8.646-35.447 14.698l-38.474-27.234-54.037 53.604
27.235 38.474c-6.053 11.239-11.24 22.911-14.699 35.88l-46.255
7.35v76.082l46.255 7.782c3.458 12.536 8.646 24.64 14.699 35.88l-27.235 38.474
53.604 53.605 38.474-27.235c11.24 6.052 22.911 11.239 35.88 14.697l7.782
46.256h76.082l7.782-46.687c12.536-3.46 24.64-8.646 35.447-14.699l38.475 27.235
53.604-53.604-27.235-38.475c6.053-11.238 11.239-22.911
14.699-35.88l46.687-7.35zm-207.5 41.5c-44.094 0-79.541-35.879-79.541-79.541
0-44.094 35.879-79.541 79.541-79.541s79.541 35.447 79.541 79.541c0
44.095-35.446 79.541-79.541 79.541z" fill="#555"/>
+ <path fill-rule="evenodd" d="M670.97 1157.195l67.144-114.595h-134.307z"
fill="#414141"/>
+</svg>
diff --git a/less/images/icons/editVeNormal.svg
b/less/images/icons/editVeNormal.svg
new file mode 100644
index 0000000..e33aaa8
--- /dev/null
+++ b/less/images/icons/editVeNormal.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 32 32"
enable-background="new 0 0 40 40">
+ <path d="M26.164
11.403c-.057-1.1-.571-2.167-1.328-3.01-.776-.865-1.841-1.529-2.989-1.717l-14.826
13.3.01.006-.008-.004-1.188 5.346
5.481-.604.001.003.004-.003.006-.001-.002-.003c2.963-2.657 11.472-10.293
14.839-13.313zm-16.439
10.125c-.422-.423-.779-.683-1.271-1.02l13.316-12.04c.45.139 1.073.502 1.264
1.022l-13.309 12.038z" fill="#575757"/>
+</svg>
diff --git a/less/images/icons/gray-triangle.png
b/less/images/icons/gray-triangle.png
new file mode 100644
index 0000000..93edb39
--- /dev/null
+++ b/less/images/icons/gray-triangle.png
Binary files differ
diff --git a/less/images/icons/gray-triangle.svg
b/less/images/icons/gray-triangle.svg
new file mode 100644
index 0000000..6494ae9
--- /dev/null
+++ b/less/images/icons/gray-triangle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="80" height="80" viewBox="0 0 80
80">
+ <path fill="#ccc" d="M1.092 73.695l38.906-67.39 38.91 67.39z"/>
+ <path fill="#fff" d="M43.528
57.71v7.104h-6.829v-7.104h6.829zm-2.03-5.908h-3.275l-1.754-12.253v-7.859h6.828v7.858l-1.799
12.254z"/>
+</svg>
diff --git a/less/images/icons/hamburger.png b/less/images/icons/hamburger.png
new file mode 100644
index 0000000..a3fcf4f
--- /dev/null
+++ b/less/images/icons/hamburger.png
Binary files differ
diff --git a/less/images/icons/hamburger.svg b/less/images/icons/hamburger.svg
new file mode 100644
index 0000000..b1477b6
--- /dev/null
+++ b/less/images/icons/hamburger.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; width="48" height="48" viewBox="0 0 48
48">
+ <path d="M46 5.432v7.133c0 .242-.148.435-.328.435h-43.344c-.175
0-.328-.197-.328-.435v-7.133c0-.234.153-.432.328-.432h43.344c.18 0
.328.198.328.432zm0 30v7.133c0 .242-.148.435-.328.435h-43.344c-.175
0-.328-.197-.328-.435v-7.133c0-.234.153-.432.328-.432h43.344c.18 0
.328.198.328.432zm0-15v7.133c0 .242-.148.435-.328.435h-43.344c-.175
0-.328-.197-.328-.435v-7.133c0-.234.153-.432.328-.432h43.344c.18 0
.328.198.328.432z" fill="#565656"/>
+</svg>
diff --git a/less/images/icons/userAnonymous.png
b/less/images/icons/userAnonymous.png
new file mode 100644
index 0000000..ce67f88
--- /dev/null
+++ b/less/images/icons/userAnonymous.png
Binary files differ
diff --git a/less/images/icons/userAnonymous.svg
b/less/images/icons/userAnonymous.svg
new file mode 100644
index 0000000..ade9e0e
--- /dev/null
+++ b/less/images/icons/userAnonymous.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 16 16"
enable-background="new 0 0 960 560">
+ <path enable-background="new" d="M2.112 0c-1.995 0-2.112 1.932-2.112
1.994v14.006h13.888c1.995 0 2.112-1.932 2.112-1.994v-14.006h-13.888zm.426
4.89s.726.726 2.295.726l2.233-.726c0 1.026-1.027 1.811-2.295 1.811-1.269
0-2.233-.784-2.233-1.811zm8.935
6.517c-.543.3-1.148.542-1.811.726-.543.121-1.148.179-1.753.179-.726
0-1.39-.121-2.053-.3-.605-.179-1.206-.421-1.69-.726-.3-.179-.421-.605-.179-.905.179-.3.605-.421.906-.179.363.242.847.421
1.327.542 1.027.3 2.174.3 3.201.058.543-.121 1.027-.3
1.448-.542.3-.179.726-.058.906.242.125.305.004.726-.3.905zm-.058-4.706c-1.269
0-2.295-.847-2.295-1.811 0 0 .726.726 2.295.726l2.233-.726c.063 1.026-.964
1.811-2.233 1.811z" fill="#e7beba"/>
+</svg>
diff --git a/less/images/icons/userNormal.png b/less/images/icons/userNormal.png
new file mode 100644
index 0000000..7f0b0e4
--- /dev/null
+++ b/less/images/icons/userNormal.png
Binary files differ
diff --git a/less/images/icons/userNormal.svg b/less/images/icons/userNormal.svg
new file mode 100644
index 0000000..252a47e
--- /dev/null
+++ b/less/images/icons/userNormal.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="271.5 72.8 16 16"
enable-background="new 271.5 72.8 437.1 431.8">
+ <g>
+ <path d="M273.591 72.8c-2.032 0-2.091 1.907-2.091
2.032v13.968h13.909c2.032 0 2.091-1.907 2.091-2.032v-13.968h-13.909z"
fill="#d0d0d0"/>
+ <g fill="#fff" transform="matrix(.042 0 0 .042 259.047 68.752)">
+ <circle cx="437" cy="234.1" r="28"/>
+ <circle cx="553.5" cy="234.1" r="28"/>
+ </g>
+ <path d="M279.879 85.338c-1.798
0-3.532-.617-4.582-1.609-.248-.248-.248-.68 0-.928s.68-.248.928 0c.806.806
2.167 1.239 3.654 1.239 1.424 0 2.789-.433 3.591-1.239.248-.248.68-.248.928
0s.248.68 0 .928c-1.113.987-2.722 1.609-4.519 1.609z" fill="#fff"/>
+ </g>
+</svg>
diff --git a/less/minerva.less/minerva.mixins.less
b/less/minerva.less/minerva.mixins.less
index 1ee537b..097913e 100644
--- a/less/minerva.less/minerva.mixins.less
+++ b/less/minerva.less/minerva.mixins.less
@@ -5,6 +5,24 @@
.background-image-svg( ~"@{url}.svg", ~"@{url}.png" );
}
+.m-background-image( @url ) {
+ &:after,
+ &:before {
+ .background-image(@url)
+ }
+}
+
+.m-background-image-svg( @svg, @fallback ) {
+ &:after,
+ &:before {
+ .background-image-svg( @svg, @fallback );
+ }
+}
+
+.m-background-image-svg-quick( @url ) {
+ .m-background-image-svg( ~"@{url}.svg", ~"@{url}.png" );
+}
+
.box-sizing( @value ) {
-moz-box-sizing: @value;
-webkit-box-sizing: @value;
--
To view, visit https://gerrit.wikimedia.org/r/165096
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id155a3f2e6ac80d0a30d1d35902a871e85db9722
Gerrit-PatchSet: 21
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
