jenkins-bot has submitted this change and it was merged.
Change subject: Add version 1 of error states to flyout
......................................................................
Add version 1 of error states to flyout
Current error states:
1) User has made no article edits.
2) There are no similar articles or the api request failed.
Bug: 70352
Change-Id: I2e2be6c30b10db569a6f12fa7b116f4cf78f360a
---
M GettingStarted.php
M i18n/en.json
M i18n/qqq.json
A resources/lightbulb/images/lightbulb-no.png
A resources/lightbulb/images/lightbulb-no.svg
A resources/lightbulb/images/lightbulb-sad.png
A resources/lightbulb/images/lightbulb-sad.svg
M resources/lightbulb/lightbulb.flyout.js
M resources/lightbulb/lightbulb.flyout.less
9 files changed, 210 insertions(+), 18 deletions(-)
Approvals:
Mattflaschen: Looks good to me, approved
jenkins-bot: Verified
diff --git a/GettingStarted.php b/GettingStarted.php
index 6deb87b..bae53f2 100644
--- a/GettingStarted.php
+++ b/GettingStarted.php
@@ -205,6 +205,10 @@
'gettingstarted-lightbulb-text',
'gettingstarted-lightbulb-flyout-back',
'gettingstarted-lightbulb-flyout-next',
+
'gettingstarted-lightbulb-flyout-error-state-primary-text-no-article-edits',
+
'gettingstarted-lightbulb-flyout-error-state-secondary-text-no-article-edits',
+
'gettingstarted-lightbulb-flyout-error-state-primary-text-no-recommendations',
+
'gettingstarted-lightbulb-flyout-error-state-secondary-text-no-recommendations',
)
) + $gettingStartedModuleInfo;
diff --git a/i18n/en.json b/i18n/en.json
index a2a33d1..6c013e8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -72,5 +72,9 @@
"gettingstarted-lightbulb-heading": "Pages to improve",
"gettingstarted-lightbulb-text": "Recommended based on your last edit.",
"gettingstarted-lightbulb-flyout-back": "Back",
- "gettingstarted-lightbulb-flyout-next": "Next"
+ "gettingstarted-lightbulb-flyout-next": "Next",
+
"gettingstarted-lightbulb-flyout-error-state-primary-text-no-article-edits":
"No recommendations yet!",
+
"gettingstarted-lightbulb-flyout-error-state-secondary-text-no-article-edits":
"Try editing a few pages. It will help us recommend what you should edit next.",
+
"gettingstarted-lightbulb-flyout-error-state-primary-text-no-recommendations":
"Uh oh, we're unable to show recommendations right now.",
+
"gettingstarted-lightbulb-flyout-error-state-secondary-text-no-recommendations":
"Please try again."
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index c456535..abdd96a 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -74,5 +74,9 @@
"gettingstarted-lightbulb-heading": "Heading on the flyout that the
user sees when they use the Recommendations personal tool.",
"gettingstarted-lightbulb-text": "Text on the flyout that the user sees
when they use the Recommendations personal tool.",
"gettingstarted-lightbulb-flyout-back": "Title text of button that
shows previous suggestions in Recommendations flyout, if any.\n\nSee also:\n*
{{msg-mw|Gettingstarted-lightbulb-flyout-next}}\n{{Identical|Back}}",
- "gettingstarted-lightbulb-flyout-next": "Title text of button that
shows next suggestions in Recommendations flyout, if any.\n\nSee also:\n*
{{msg-mw|Gettingstarted-lightbulb-flyout-back}}\n{{Identical|Next}}"
+ "gettingstarted-lightbulb-flyout-next": "Title text of button that
shows next suggestions in Recommendations flyout, if any.\n\nSee also:\n*
{{msg-mw|Gettingstarted-lightbulb-flyout-back}}\n{{Identical|Next}}",
+
"gettingstarted-lightbulb-flyout-error-state-primary-text-no-article-edits":
"Heading text shown on empty state when the user has made no edits.",
+
"gettingstarted-lightbulb-flyout-error-state-secondary-text-no-article-edits":
"Text below header in error state instructing user to edit some articles so
that we can recommend some others.",
+
"gettingstarted-lightbulb-flyout-error-state-primary-text-no-recommendations":
"Heading text on error state when there are no similar articles or there is an
error.",
+
"gettingstarted-lightbulb-flyout-error-state-secondary-text-no-recommendations":
"Text below header asking to the user to try again."
}
diff --git a/resources/lightbulb/images/lightbulb-no.png
b/resources/lightbulb/images/lightbulb-no.png
new file mode 100644
index 0000000..e16fb7f
--- /dev/null
+++ b/resources/lightbulb/images/lightbulb-no.png
Binary files differ
diff --git a/resources/lightbulb/images/lightbulb-no.svg
b/resources/lightbulb/images/lightbulb-no.svg
new file mode 100644
index 0000000..d59ba26
--- /dev/null
+++ b/resources/lightbulb/images/lightbulb-no.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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="92px" height="142.129px" viewBox="0 0 92 142.129"
enable-background="new 0 0 92 142.129" xml:space="preserve">
+<g id="site">
+</g>
+<g id="Layer_1_1_">
+</g>
+<g id="another">
+</g>
+<g id="jimmy_wales">
+ <g>
+ <g>
+ <path fill="#C6C6C6"
d="M35.004,131.641c-2.442,0-3.665,2.951-1.935,4.685c3.359,3.358,6.312,5.805,8.553,5.805h8.756
+
c2.239,0,4.785-2.44,8.351-5.805c1.832-1.729,0.608-4.685-1.834-4.685H35.004z"/>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M61.68,125.021H30.423c-3.156,0-5.599-2.545-5.599-5.603c0-3.153,2.545-5.601,5.599-5.601H61.68
+
c3.155,0,5.6,2.546,5.6,5.601C67.38,122.578,64.835,125.021,61.68,125.021z"/>
+ </g>
+ <g>
+ <g>
+ <path fill="#C6C6C6"
d="M30.118,107.309c-2.749,0-5.092-2.035-5.6-4.785c0-0.203-1.121-6.516-7.433-15.981
+
c-0.917-1.424-1.833-2.748-2.749-4.069C7.821,72.693,1,62.615,1,45c0-10.791,4.276-21.889,11.606-30.236
+
C20.956,5.295,32.866,0.001,46,0.001c3.154,0,5.602,2.545,5.602,5.601c0,3.055-2.545,5.601-5.602,5.601
+
c-12.625,0-20.565,6.006-24.941,10.995c-5.498,6.21-8.857,14.763-8.857,22.806c0,14.15,5.294,21.99,11.503,31.154
+
c0.917,1.426,1.936,2.75,2.852,4.174c7.737,11.811,9.062,19.648,9.162,20.564c0.407,3.057-1.73,5.903-4.785,6.312
+
C30.627,107.309,30.423,107.309,30.118,107.309z"/>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M61.779,107.309c-0.307,0-0.51,0-0.813-0.102c-3.054-0.406-5.19-3.359-4.784-6.414
+
c0.104-0.814,1.426-8.756,9.162-20.564c0.916-1.426,1.936-2.852,2.852-4.176C74.406,66.891,79.702,59.05,79.702,44.9
+
c0-7.839-3.464-16.29-9.163-22.704C64.123,15.069,55.367,11.2,46.001,11.2c-3.156,0-5.6-2.545-5.6-5.6
+
c0-3.054,2.443-5.601,5.6-5.601C72.98,0,91,23.313,91,45c0,17.612-6.818,27.691-13.438,37.465
+
c-0.916,1.322-1.832,2.646-2.748,4.072c-6.312,9.67-7.435,15.883-7.435,15.98C66.975,105.375,64.631,107.309,61.779,107.309z"/>
+ </g>
+ </g>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M55.876,59.764c-0.61,0-1.324-0.204-1.833-0.714L34.292,39.3c-1.018-1.019-1.018-2.647,0-3.563
+
c1.018-1.019,2.646-1.019,3.562,0l19.751,19.75c1.019,1.018,1.019,2.646,0,3.562C57.1,59.561,56.484,59.764,55.876,59.764z"/>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M36.125,59.764c-0.61,0-1.324-0.204-1.833-0.714c-1.018-1.018-1.018-2.646,0-3.562l19.751-19.75
+
c1.02-1.019,2.646-1.019,3.562,0c1.019,1.019,1.019,2.647,0,3.563L37.957,59.05C37.448,59.561,36.735,59.764,36.125,59.764z"/>
+ </g>
+</g>
+</svg>
diff --git a/resources/lightbulb/images/lightbulb-sad.png
b/resources/lightbulb/images/lightbulb-sad.png
new file mode 100644
index 0000000..1b68a39
--- /dev/null
+++ b/resources/lightbulb/images/lightbulb-sad.png
Binary files differ
diff --git a/resources/lightbulb/images/lightbulb-sad.svg
b/resources/lightbulb/images/lightbulb-sad.svg
new file mode 100644
index 0000000..1da5dec
--- /dev/null
+++ b/resources/lightbulb/images/lightbulb-sad.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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="92px" height="142.068px" viewBox="0 0 92 142.068"
enable-background="new 0 0 92 142.068" xml:space="preserve">
+<g id="site">
+</g>
+<g id="Layer_1_1_">
+</g>
+<g id="another">
+</g>
+<g id="jimmy_wales">
+ <g>
+ <g>
+ <path fill="#C6C6C6"
d="M34.965,131.593c-2.44,0-3.661,2.949-1.933,4.68c3.356,3.354,6.306,5.797,8.543,5.797h8.747
+
c2.236,0,4.777-2.441,8.338-5.797c1.83-1.729,0.609-4.68-1.83-4.68H34.965z"/>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M61.611,124.983H30.389c-3.151,0-5.593-2.543-5.593-5.594c0-3.152,2.542-5.596,5.593-5.596h31.222
+
c3.15,0,5.592,2.541,5.592,5.596C67.305,122.44,64.762,124.983,61.611,124.983z"/>
+ </g>
+ <g>
+ <g>
+ <path fill="#C6C6C6"
d="M30.084,107.186c-2.746,0-5.085-2.033-5.593-4.779c0-0.203-1.119-6.508-7.424-15.967
+
c-0.916-1.424-1.832-2.744-2.746-4.066C7.814,72.712,1,62.54,1,45.049c0-10.776,4.271-21.862,11.594-30.201
+
c8.439-9.562,20.236-14.85,33.355-14.85c3.152,0,5.592,2.542,5.592,5.593c0,3.053-2.541,5.595-5.592,5.595
+
c-12.61,0-20.543,6-24.916,10.981c-5.491,6.204-8.848,14.746-8.848,22.78c0,14.135,5.288,21.966,11.492,31.12
+
c0.916,1.424,1.932,2.746,2.848,4.17c7.729,11.797,9.051,19.627,9.152,20.541c0.407,3.053-1.729,5.895-4.779,6.307
+
C30.593,107.186,30.389,107.186,30.084,107.186z"/>
+ </g>
+ <g>
+ <path fill="#C6C6C6"
d="M61.814,107.288c-0.309,0-0.51,0-0.814-0.102c-3.051-0.408-5.186-3.355-4.779-6.408
+
c0.104-0.812,1.426-8.744,9.152-20.541c0.916-1.424,1.932-2.848,2.848-4.17c6.203-9.154,11.492-16.984,11.492-31.12
+
c0-7.831-3.459-16.271-9.154-22.679c-6.404-7.118-15.148-10.982-24.507-10.982c-3.153,0-5.593-2.542-5.593-5.593
+
c0-3.052,2.542-5.594,5.593-5.594C73,0.102,91,23.39,91,45.049c0,17.595-6.812,27.663-13.424,37.426
+
c-0.914,1.318-1.83,2.645-2.746,4.064c-6.305,9.66-7.424,15.863-7.424,15.965C66.898,105.253,64.559,107.288,61.814,107.288z"/>
+ </g>
+ </g>
+ <circle fill="#C6C6C6" cx="32.627" cy="42.813" r="4.576"/>
+ <circle fill="#C6C6C6" cx="59.068" cy="42.813" r="4.576"/>
+ <g>
+ <path fill="#C6C6C6"
d="M59.068,68.337c-0.609,0-1.322-0.203-1.83-0.712c-3.152-3.15-7.322-4.881-11.797-4.881
+
c-4.476,0-8.645,1.729-11.797,4.881c-1.017,1.019-2.644,1.019-3.56,0c-1.017-1.017-1.017-2.644,0-3.559
+
c4.17-4.169,9.56-6.407,15.458-6.407c5.795,0,11.29,2.236,15.458,6.407c1.018,1.017,1.018,2.644,0,3.559
+ C60.389,68.134,59.678,68.337,59.068,68.337z"/>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/resources/lightbulb/lightbulb.flyout.js
b/resources/lightbulb/lightbulb.flyout.js
index fa6340e..442950a 100644
--- a/resources/lightbulb/lightbulb.flyout.js
+++ b/resources/lightbulb/lightbulb.flyout.js
@@ -4,13 +4,18 @@
MAX_PAGE_COUNT = 3,
flyoutTemplate =
'<div class="mw-gettingstarted-lightbulb-flyout
guider">\
- <h1></h1>\
- <p></p>\
+ <h1
class="mw-gettingstarted-lightbulb-flyout-heading"></h1>\
+ <p
class="mw-gettingstarted-lightbulb-flyout-text"></p>\
<ol
class="mw-gettingstarted-lightbulb-suggestions">\
</ol>\
<div
class="mw-gettingstarted-lightbulb-flyout-pagination">\
<button class="mw-ui-button
mw-gettingstarted-lightbulb-flyout-pagination-button-icon
mw-gettingstarted-lightbulb-flyout-back"></button>\
<button class="mw-ui-button
mw-gettingstarted-lightbulb-flyout-pagination-button-icon
mw-gettingstarted-lightbulb-flyout-next"></button>\
+ </div>\
+ <div
class="mw-gettingstarted-lightbulb-flyout-error-state">\
+ <div
class="mw-gettingstarted-lightbulb-flyout-error-state-image"></div>\
+ <p
class="mw-gettingstarted-lightbulb-flyout-error-state-primary-text"></p>\
+ <p
class="mw-gettingstarted-lightbulb-flyout-error-state-secondary-text"></p>\
</div>\
<div class="guider_arrow guider_arrow_up
guider_arrow_center">\
<div
class="guider_arrow_inner_container">\
@@ -30,11 +35,20 @@
function renderFlyout() {
- // By default, the flyout is hidden.
+ // By default, everything in the flyout is hidden.
var $flyout = $( flyoutTemplate ).hide();
- $flyout.find( 'h1' ).text( mw.msg(
'gettingstarted-lightbulb-heading' ) );
- $flyout.find( 'p' ).text( mw.msg(
'gettingstarted-lightbulb-text' ) );
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-heading' )
+ .text( mw.msg( 'gettingstarted-lightbulb-heading' ) )
+ .hide();
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-text' )
+ .text( mw.msg( 'gettingstarted-lightbulb-text' ) )
+ .hide();
+
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-pagination' )
+ .hide();
+
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-error-state'
).hide();
return $flyout;
}
@@ -105,6 +119,30 @@
}
/**
+ * Adds error state to the flyout
+ * @param {string} error string either no-recommendations, or
no-article-edits
+ */
+ function addErrorStateToFlyout( error ) {
+ var $errorState = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-error-state' ),
+ $errorStateImage = $errorState.find(
'.mw-gettingstarted-lightbulb-flyout-error-state-image' ),
+ $errorStatePrimaryText = $errorState.find(
'.mw-gettingstarted-lightbulb-flyout-error-state-primary-text' ),
+ $errorStateSecondaryText = $errorState.find(
'.mw-gettingstarted-lightbulb-flyout-error-state-secondary-text' );
+
+ $errorStateImage.addClass( error );
+
+ $errorStatePrimaryText.text(
+ mw.msg(
'gettingstarted-lightbulb-flyout-error-state-primary-text-' + error )
+ );
+ $errorStateSecondaryText.text(
+ mw.msg(
'gettingstarted-lightbulb-flyout-error-state-secondary-text-' + error )
+ );
+
+ $flyout.data( 'error-state', true );
+
+ $errorState.show();
+ }
+
+ /**
* Updates the flyout to render a particular page
*
* @param {Array} suggestions Full list of suggestions
@@ -129,6 +167,14 @@
$newSuggestions.append( $li );
}
+
+ // Show key elements in flyout
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-heading' )
+ .show();
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-text' )
+ .show();
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-pagination' )
+ .show();
// There can be 0 discs, in which case this is a noop.
$flyout.find(
'.mw-gettingstarted-lightbulb-flyout-pagination-disc' )
@@ -202,6 +248,7 @@
*
*/
function showFlyout() {
+ positionFlyout( $flyout, $lightbulb );
$( document ).on( 'click', checkForClickOutside );
$( window ).on( 'resize', positionFlyout );
$flyout.show();
@@ -237,7 +284,7 @@
return;
}
- if ( $flyout.data( 'has-suggestions' ) ) {
+ if ( $flyout.data( 'has-suggestions' ) || $flyout.data(
'error-state' ) ) {
if ( $flyout.is( ':visible' ) ) {
hideFlyout();
} else {
@@ -255,17 +302,26 @@
excludedTitle: title,
count:
MAX_SUGGESTION_PER_PAGE_COUNT * MAX_PAGE_COUNT,
thumbSize: 70
- } ).done( function ( response ) {
+ } )
+ .done( function ( response ) {
var suggestions = parser.parse(
response );
-
addSuggestionsToFlyout(
suggestions );
- positionFlyout();
-
$flyout.data(
'has-suggestions', true );
- requestingSuggestions = false;
-
+ } )
+ .fail( function () {
+ // no recommendations state
+ addErrorStateToFlyout(
'no-recommendations' );
+ } )
+ .always( function () {
showFlyout();
+ requestingSuggestions = false;
} );
+ } )
+ .fail( function () {
+ // no article edit state
+ addErrorStateToFlyout(
'no-article-edits' );
+ requestingSuggestions = false;
+ showFlyout();
} );
} );
diff --git a/resources/lightbulb/lightbulb.flyout.less
b/resources/lightbulb/lightbulb.flyout.less
index b49b7b9..568ff39 100644
--- a/resources/lightbulb/lightbulb.flyout.less
+++ b/resources/lightbulb/lightbulb.flyout.less
@@ -13,14 +13,15 @@
box-sizing: border-box;
padding: 23px;
- h1 {
+ .mw-gettingstarted-lightbulb-flyout-heading {
margin-bottom: 0;
font-size: 1.5em;
}
- p {
- margin-bottom: 1.5em;
- }
+}
+
+.mw-gettingstarted-lightbulb-flyout-text {
+ margin-bottom: 1.5em;
}
.mw-gettingstarted-lightbulb-flyout-pagination {
@@ -103,6 +104,33 @@
}
}
+.mw-gettingstarted-lightbulb-flyout-error-state {
+ padding: 3em 2em 2em 2em;
+ text-align: center;
+}
+
+.mw-gettingstarted-lightbulb-flyout-error-state-image {
+ width: 90px;
+ height: 142px;
+ margin: 0 auto;
+ background-position: center top;
+ background-size: 90px 142px;
+ margin-bottom: 1em;
+}
+
+.mw-gettingstarted-lightbulb-flyout-error-state-image.no-recommendations {
+ .background-image-svg('images/lightbulb-sad.svg',
'images/lightbulb-sad.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-error-state-image.no-edits {
+ .background-image-svg('images/lightbulb-no.svg',
'images/lightbulb-no.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-error-state-primary-text {
+ font-weight: bold;
+ font-size: 1.25em;
+}
+
// TODO (phuedx, 2014/07/30): Classes like this would simplify the
// GuidedTour library. Create the entire set of classes upstream.
--
To view, visit https://gerrit.wikimedia.org/r/157001
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I2e2be6c30b10db569a6f12fa7b116f4cf78f360a
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
Gerrit-Reviewer: MSyed <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: Swalling <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
