Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/116969
Change subject: Icon tweaks
......................................................................
Icon tweaks
Use an SVG icon with a PNG fallback for the following buttons:
* Close
* The "Edit this page" primary CTA
* The "Find pages that need easy fixes" primary and secondary CTAs
Change-Id: I02fab6603fc7802833b4fe32f6a66765b4718172
---
M resources/ext.gettingstarted.return.js
M resources/ext.gettingstarted.return.less
A resources/images/light_bulb_darkgray.png
A resources/images/light_bulb_darkgray.svg
A resources/images/light_bulb_white.png
A resources/images/light_bulb_white.svg
D resources/images/lightbulb.png
D resources/images/lightbulb_dark.png
D resources/images/pencil.png
D resources/images/pencil_dark.png
A resources/images/pencil_white.png
A resources/images/pencil_white.svg
D resources/images/source/lightbulb.svg
D resources/images/source/lightbulb_dark.svg
D resources/images/source/pencil.svg
D resources/images/source/pencil_dark.svg
A resources/images/x.png
A resources/images/x.svg
18 files changed, 74 insertions(+), 63 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/69/116969/1
diff --git a/resources/ext.gettingstarted.return.js
b/resources/ext.gettingstarted.return.js
index 6392e30..5550b81 100644
--- a/resources/ext.gettingstarted.return.js
+++ b/resources/ext.gettingstarted.return.js
@@ -117,10 +117,11 @@
} );
- $icon = $( '<img>' ).attr( {
- src: imagePath + spec.icon,
- 'class': 'mw-gettingstarted-cta-button-icon'
+ $icon = $( '<div>' ).attr( {
+ 'aria-role': 'img'
} );
+ $icon.addClass( 'mw-gettingstarted-cta-button-icon' );
+ $icon.addClass( 'mw-gettingstarted-cta-button-icon-' +
spec.action );
$mainText = $( '<span>' )
.attr( 'class', 'mw-gettingstarted-cta-button-main' )
@@ -225,27 +226,27 @@
// The possible CTA dialogs have similar but different
buttons.
editCurrentPrimaryButton = {
id: 'mw-gettingstarted-editable-main-edit-page',
- icon: 'pencil.png',
isPrimary: true,
mainText: mw.message(
'gettingstarted-cta-edit-page' ).text(),
subText: mw.message(
'gettingstarted-cta-edit-page-sub' ).text(),
- click: doEditThisPage
+ click: doEditThisPage,
+ action: 'edit'
};
suggestionSecondaryButton = {
id: 'mw-gettingstarted-editable-main-fix-pages',
- icon: 'lightbulb_dark.png',
mainText: mw.message(
'gettingstarted-cta-fix-pages' ).text(),
- click: doFixPages
+ click: doFixPages,
+ action: 'copyedit'
};
suggestionPrimaryButton = {
id: 'mw-gettingstarted-other-fix-pages',
- icon: 'lightbulb.png',
isPrimary: true,
mainText: mw.msg(
'gettingstarted-cta-fix-pages' ),
subText: mw.message(
'gettingstarted-cta-fix-pages-sub' ).text(),
- click: doFixPages
+ click: doFixPages,
+ action: 'copyedit'
};
if ( pageKind === 'editablemain' ) {
@@ -352,7 +353,6 @@
title: closeText,
'aria-label': closeText
} )
- .text( '×' )
.click( closeDialogByClick );
$heading = $( '<div>' )
diff --git a/resources/ext.gettingstarted.return.less
b/resources/ext.gettingstarted.return.less
index 97df0e8..7e9524e 100644
--- a/resources/ext.gettingstarted.return.less
+++ b/resources/ext.gettingstarted.return.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins'
+
/* Specific elements */
#mw-gettingstarted-cta-editable-main-page {
width: 510px;
@@ -115,7 +117,9 @@
.mw-gettingstarted-cta-close {
float: right;
- color: #aaa;
+ width: 13px;
+ height: 13px;
+ .background-image-svg('images/x.svg', 'images/x.png');
}
.mw-gettingstarted-cta-heading {
@@ -134,10 +138,29 @@
font-size: 0.8em;
}
+/* Button icons */
.mw-gettingstarted-cta-button-icon {
float: left;
margin: 10px 10px 10px 0;
width: 28px;
+ height: 28px;
+}
+
+.mw-gettingstarted-cta-button-icon-edit {
+ .background-image-svg('images/pencil_white.svg',
'images/pencil_white.png');
+}
+
+.mw-gettingstarted-cta-button-icon-copyedit {
+ .background-image-svg('images/light_bulb_darkgray.svg',
'images/light_bulb_darkgray.png');
+ margin: 0 0 0 -10px;
+ height: 48px;
+ width: 48px;
+}
+
+.mw-ui-primary {
+ .mw-gettingstarted-cta-button-icon-copyedit {
+ .background-image-svg('images/light_bulb_white.svg',
'images/light_bulb_white.png');
+ }
}
.mw-gettingstarted-cta-leave-link {
diff --git a/resources/images/light_bulb_darkgray.png
b/resources/images/light_bulb_darkgray.png
new file mode 100644
index 0000000..cab79d9
--- /dev/null
+++ b/resources/images/light_bulb_darkgray.png
Binary files differ
diff --git a/resources/images/light_bulb_darkgray.svg
b/resources/images/light_bulb_darkgray.svg
new file mode 100644
index 0000000..e58d4e3
--- /dev/null
+++ b/resources/images/light_bulb_darkgray.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
+<path id="light-bulb-7-icon" fill="#444444"
d="M299.8,364.4h-87.6c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1h87.6
+ c6.1,0,11.1-5,11.1-11.1S306,364.4,299.8,364.4z
M297.8,401.4h-83.6c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1h83.6
+ c6.1,0,11.1-5,11.1-11.1S304,401.4,297.8,401.4z
M214.8,438c21.7,20,23.9,24,32.5,24h16.6c8.5,0,10.5-3.7,33.3-24H214.8z
+
M382.6,171.5c0,75.3-64.8,117.5-64.8,176.9h-29.5c0-73.2,64.2-111.8,64.2-176.9c0-121.9-193.2-122.1-193.2,0
+
c0,65.1,63.1,102,64.6,176.9h-29.8c0-59.4-64.8-101.6-64.8-176.9C129.4,9.6,382.6,9.4,382.6,171.5z
M238.1,289.6l68.8-101h-40
+ l19.9-69.4L215,219.1h43.6L238.1,289.6z"/>
+</svg>
diff --git a/resources/images/light_bulb_white.png
b/resources/images/light_bulb_white.png
new file mode 100644
index 0000000..a2d22a2
--- /dev/null
+++ b/resources/images/light_bulb_white.png
Binary files differ
diff --git a/resources/images/light_bulb_white.svg
b/resources/images/light_bulb_white.svg
new file mode 100644
index 0000000..1640fa8
--- /dev/null
+++ b/resources/images/light_bulb_white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
+<path id="light-bulb-7-icon" fill="#FFFFFF"
d="M299.8,364.4h-87.6c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1h87.6
+ c6.1,0,11.1-5,11.1-11.1S306,364.4,299.8,364.4z
M297.8,401.4h-83.6c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1h83.6
+ c6.1,0,11.1-5,11.1-11.1S304,401.4,297.8,401.4z
M214.8,438c21.7,20,23.9,24,32.5,24h16.6c8.5,0,10.5-3.7,33.3-24H214.8z
+
M382.6,171.5c0,75.3-64.8,117.5-64.8,176.9h-29.5c0-73.2,64.2-111.8,64.2-176.9c0-121.9-193.2-122.1-193.2,0
+
c0,65.1,63.1,102,64.6,176.9h-29.8c0-59.4-64.8-101.6-64.8-176.9C129.4,9.6,382.6,9.4,382.6,171.5z
M238.1,289.6l68.8-101h-40
+ l19.9-69.4L215,219.1h43.6L238.1,289.6z"/>
+</svg>
diff --git a/resources/images/lightbulb.png b/resources/images/lightbulb.png
deleted file mode 100644
index 98187d4..0000000
--- a/resources/images/lightbulb.png
+++ /dev/null
Binary files differ
diff --git a/resources/images/lightbulb_dark.png
b/resources/images/lightbulb_dark.png
deleted file mode 100644
index 9b56f49..0000000
--- a/resources/images/lightbulb_dark.png
+++ /dev/null
Binary files differ
diff --git a/resources/images/pencil.png b/resources/images/pencil.png
deleted file mode 100644
index 2921f31..0000000
--- a/resources/images/pencil.png
+++ /dev/null
Binary files differ
diff --git a/resources/images/pencil_dark.png b/resources/images/pencil_dark.png
deleted file mode 100644
index 672b71e..0000000
--- a/resources/images/pencil_dark.png
+++ /dev/null
Binary files differ
diff --git a/resources/images/pencil_white.png
b/resources/images/pencil_white.png
new file mode 100644
index 0000000..012e4a8
--- /dev/null
+++ b/resources/images/pencil_white.png
Binary files differ
diff --git a/resources/images/pencil_white.svg
b/resources/images/pencil_white.svg
new file mode 100644
index 0000000..020f55e
--- /dev/null
+++ b/resources/images/pencil_white.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ viewBox="0 0 96 96" enable-background="new 0 0 96 96"
xml:space="preserve">
+<path fill="#FFFFFF"
d="M96,26.7c-0.3-5.2-2.7-10.2-6.3-14.2C86.1,8.4,81,5.3,75.6,4.4c-15.9,14.2-56.1,50.3-70,62.8c0,0,0,0,0,0
+
c0,0,0,0,0,0L0,92.5l25.9-2.8c0,0,0,0,0,0c0,0,0,0,0,0h0c0,0,0,0,0,0C39.9,77,80.1,41,96,26.7z
M18.4,74.5c-2-2-3.7-3.2-6-4.8
+ l62.9-56.9c2.1,0.7,5.1,2.4,6,4.8L18.4,74.5z"/>
+</svg>
diff --git a/resources/images/source/lightbulb.svg
b/resources/images/source/lightbulb.svg
deleted file mode 100644
index 52d6386..0000000
--- a/resources/images/source/lightbulb.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="32px" height="32px" viewBox="0 0 32 32" enable-background="new
0 0 32 32" xml:space="preserve">
-<circle fill="#FFFFFF" cx="16.051" cy="10.336" r="10.337"/>
-<path fill="#FFFFFF"
d="M22.061,21.829c0,0-1.938,1.116-6.036,1.116c-4.099,0-5.982-1.116-5.982-1.116v-8.381h12.018V21.829z"/>
-<g>
- <path fill="#FFFFFF"
d="M10.377,23.409c0.012,0.005,1.789,0.999,5.554,0.999c3.774,0,5.604-0.998,5.622-1.01v1.824
-
c-0.982,0.361-2.841,0.86-5.622,0.86c-2.756,0-4.585-0.491-5.561-0.854L10.377,23.409"/>
-</g>
-<path fill="#FFFFFF"
d="M20.5,26.9l-1.843,0.326v1.123c0,0.004,0,0.006,0,0.006c0,1.387-1.13,1.711-2.517,1.711
-
c-1.371,0-2.484-0.299-2.511-1.664v-1.15l-1.843-0.329v1.411c0,0.007-0.002,0.014-0.002,0.021c0,0.016,0.002,0.028,0.002,0.043
-
v0.021h0.001c0.037,2.372,1.975,3.486,4.353,3.486c2.387,0,4.331-1.127,4.354-3.51H20.5V26.9z"/>
-</svg>
diff --git a/resources/images/source/lightbulb_dark.svg
b/resources/images/source/lightbulb_dark.svg
deleted file mode 100644
index 3c9098d..0000000
--- a/resources/images/source/lightbulb_dark.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="32px" height="32px" viewBox="0 0 32 32" enable-background="new
0 0 32 32" xml:space="preserve">
-<circle fill="#6D6E70" cx="16.051" cy="10.336" r="10.337"/>
-<path fill="#6D6E70"
d="M22.061,21.829c0,0-1.938,1.116-6.036,1.116c-4.099,0-5.982-1.116-5.982-1.116v-8.381h12.018V21.829z"/>
-<g>
- <path fill="#6D6E70"
d="M10.377,23.409c0.012,0.005,1.789,0.999,5.554,0.999c3.774,0,5.604-0.998,5.622-1.01v1.824
-
c-0.982,0.36-2.841,0.859-5.622,0.859c-2.756,0-4.585-0.491-5.561-0.854L10.377,23.409"/>
-</g>
-<path fill="#6D6E70"
d="M20.5,26.9l-1.843,0.326v1.123c0,0.004,0,0.006,0,0.006c0,1.387-1.13,1.711-2.517,1.711
-
c-1.371,0-2.484-0.299-2.511-1.664v-1.15l-1.843-0.329v1.411c0,0.007-0.002,0.014-0.002,0.021c0,0.016,0.002,0.027,0.002,0.043
-
v0.021h0.001c0.037,2.372,1.975,3.485,4.353,3.485c2.387,0,4.331-1.127,4.354-3.51H20.5V26.9z"/>
-</svg>
diff --git a/resources/images/source/pencil.svg
b/resources/images/source/pencil.svg
deleted file mode 100644
index cf00e66..0000000
--- a/resources/images/source/pencil.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="32px" height="32px" viewBox="0 0 32 32" enable-background="new
0 0 32 32" xml:space="preserve">
-<path fill="#FFFFFF"
d="M32.05,7.51c-0.089-1.734-0.899-3.417-2.094-4.747c-1.224-1.363-2.901-2.41-4.714-2.708
-
C19.938,4.814,6.511,16.863,1.868,21.023c0.006,0.004,0.011,0.009,0.016,0.011c-0.004-0.002-0.009-0.005-0.014-0.007L0,29.456
-
l8.64-0.951c0,0.002,0.002,0.004,0.002,0.006c0.003-0.002,0.005-0.006,0.007-0.006l0.007-0.002c0-0.002,0-0.002-0.001-0.004
- C13.324,24.311,26.742,12.271,32.05,7.51z
M6.129,23.475c-0.665-0.668-1.228-1.078-2.003-1.606L25.123,2.883
- c0.709,0.219,1.691,0.792,1.992,1.611L6.129,23.475z"/>
-</svg>
diff --git a/resources/images/source/pencil_dark.svg
b/resources/images/source/pencil_dark.svg
deleted file mode 100644
index dbf930c..0000000
--- a/resources/images/source/pencil_dark.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- width="32px" height="32px" viewBox="0 0 32 32" enable-background="new
0 0 32 32" xml:space="preserve">
-<path fill="#6D6E70"
d="M32.05,7.51c-0.089-1.734-0.899-3.417-2.094-4.747c-1.224-1.363-2.901-2.41-4.714-2.708
-
C19.938,4.814,6.511,16.863,1.868,21.023c0.006,0.004,0.011,0.009,0.016,0.011c-0.004-0.002-0.009-0.005-0.014-0.007L0,29.456
-
l8.64-0.951c0,0.002,0.002,0.004,0.002,0.006c0.003-0.002,0.005-0.006,0.007-0.006l0.007-0.002c0-0.002,0-0.002-0.001-0.004
- C13.324,24.311,26.742,12.271,32.05,7.51z
M6.129,23.475c-0.665-0.668-1.228-1.078-2.003-1.605L25.123,2.883
- c0.709,0.219,1.691,0.792,1.992,1.611L6.129,23.475z"/>
-</svg>
diff --git a/resources/images/x.png b/resources/images/x.png
new file mode 100644
index 0000000..8849daa
--- /dev/null
+++ b/resources/images/x.png
Binary files differ
diff --git a/resources/images/x.svg b/resources/images/x.svg
new file mode 100644
index 0000000..938fd51
--- /dev/null
+++ b/resources/images/x.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ viewBox="0 0 96 96" enable-background="new 0 0 96 96"
xml:space="preserve">
+<polygon fill="#AAAAAB" points="96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96
48,62 82,96 96,82 62,48 "/>
+</svg>
--
To view, visit https://gerrit.wikimedia.org/r/116969
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I02fab6603fc7802833b4fe32f6a66765b4718172
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Phuedx <g...@samsmith.io>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
