jenkins-bot has submitted this change and it was merged.
Change subject: Add pagination support
......................................................................
Add pagination support
Number of discs/pages is set up up front based on the total number of
suggestions.
Pages are rendered on demand, and buttons are enabled/disabled,
corresponding with the discs.
Works for any number of suggestions (0 is already handled, 1 to 9
works with the dynamic pagination)
For IE, show only IE 8+ for now.
Change-Id: I8423168691e8cd9e7a0c6b39d8ffca80195403df
---
M GettingStarted.php
M i18n/en.json
M i18n/qqq.json
A resources/lightbulb/images/next-disabled.png
A resources/lightbulb/images/next-disabled.svg
A resources/lightbulb/images/next.png
A resources/lightbulb/images/next.svg
A resources/lightbulb/images/prev-disabled.png
A resources/lightbulb/images/prev-disabled.svg
A resources/lightbulb/images/prev.png
A resources/lightbulb/images/prev.svg
M resources/lightbulb/lightbulb.flyout.js
M resources/lightbulb/lightbulb.flyout.less
M resources/lightbulb/lightbulb.postEdit.js
R resources/lightbulb/lightbulb.suggestionRenderer.js
15 files changed, 415 insertions(+), 20 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/GettingStarted.php b/GettingStarted.php
index e3666e4..5718118 100644
--- a/GettingStarted.php
+++ b/GettingStarted.php
@@ -192,6 +192,7 @@
// should be extracted from the GuidedTour library, but, for
// now, it's enough to emulate it.
'ext.guidedTour.styles',
+ 'jquery.client',
'mediawiki.user',
'schema.TaskRecommendationLightbulbClick',
),
@@ -199,6 +200,8 @@
'gettingstarted-lightbulb-recommendations-personal-tool',
'gettingstarted-lightbulb-heading',
'gettingstarted-lightbulb-text',
+ 'gettingstarted-lightbulb-flyout-back',
+ 'gettingstarted-lightbulb-flyout-next',
)
) + $gettingStartedModuleInfo;
@@ -206,7 +209,7 @@
'styles' => 'lightbulb/lightbulb.common.less',
'scripts' => array(
'lightbulb/lightbulb.parser.js',
- 'lightbulb/lightbulb.suggestionView.js',
+ 'lightbulb/lightbulb.suggestionRenderer.js',
),
'dependencies' => array(
'mediawiki.util',
diff --git a/i18n/en.json b/i18n/en.json
index ce7cba4..a2a33d1 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -70,5 +70,7 @@
"gettingstarted-lightbulb-notification-body-lastedited": "Edited $1",
"gettingstarted-lightbulb-recommendations-personal-tool":
"Recommendations",
"gettingstarted-lightbulb-heading": "Pages to improve",
- "gettingstarted-lightbulb-text": "Recommended based on your last edit."
+ "gettingstarted-lightbulb-text": "Recommended based on your last edit.",
+ "gettingstarted-lightbulb-flyout-back": "Back",
+ "gettingstarted-lightbulb-flyout-next": "Next"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 5fe5d49..c099e62 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -72,5 +72,7 @@
"gettingstarted-lightbulb-notification-body-lastedited": "When the
similar article was last edited. Parameters:\n* $1 - Time from now string
generated by moment.js",
"gettingstarted-lightbulb-recommendations-personal-tool": "The title of
the Recommendations personal tool.\n{{Identical|Recommendation}}",
"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-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",
+ "gettingstarted-lightbulb-flyout-next": "Title text of button that
shows next suggestions in Recommendations flyout, if any"
}
diff --git a/resources/lightbulb/images/next-disabled.png
b/resources/lightbulb/images/next-disabled.png
new file mode 100644
index 0000000..42e7109
--- /dev/null
+++ b/resources/lightbulb/images/next-disabled.png
Binary files differ
diff --git a/resources/lightbulb/images/next-disabled.svg
b/resources/lightbulb/images/next-disabled.svg
new file mode 100644
index 0000000..b6cf30c
--- /dev/null
+++ b/resources/lightbulb/images/next-disabled.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 14 14"
+ enable-background="new 0 0 56 56"
+ xml:space="preserve"
+ inkscape:version="0.48.5 r10040"
+ width="100%"
+ height="100%"
+ sodipodi:docname="next-disabled.svg"
+
inkscape:export-filename="/home/matthew/Code/Wikimedia/vagrant-latest/mediawiki/extensions/GettingStarted/resources/lightbulb/images/next-disabled.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><metadata
+ id="metadata2997"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs2995" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="640"
+ inkscape:window-height="480"
+ id="namedview2993"
+ showgrid="false"
+ fit-margin-left="3.15"
+ fit-margin-right="3.15"
+ fit-margin-top="0.9"
+ fit-margin-bottom="0.9"
+ inkscape:zoom="4.2142857"
+ inkscape:cx="5.85"
+ inkscape:cy="7.8"
+ inkscape:window-x="295"
+ inkscape:window-y="59"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Layer_1" /><g
+ id="g2987"
+ transform="translate(-22.15,-21.8)"><g
+ id="g2989"><polygon
+ points="25.3,24.3 26.9,22.7 33,28.8 26.9,34.9 25.3,33.2 29.8,28.8 "
+ id="polygon2991"
+ style="fill:#cccccc" /></g></g></svg>
\ No newline at end of file
diff --git a/resources/lightbulb/images/next.png
b/resources/lightbulb/images/next.png
new file mode 100644
index 0000000..ab5f688
--- /dev/null
+++ b/resources/lightbulb/images/next.png
Binary files differ
diff --git a/resources/lightbulb/images/next.svg
b/resources/lightbulb/images/next.svg
new file mode 100644
index 0000000..1d3d43a
--- /dev/null
+++ b/resources/lightbulb/images/next.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 14 14"
+ enable-background="new 0 0 56 56"
+ xml:space="preserve"
+ inkscape:version="0.48.5 r10040"
+ width="100%"
+ height="100%"
+ sodipodi:docname="next.svg"
+
inkscape:export-filename="/home/matthew/Code/Wikimedia/vagrant-latest/mediawiki/extensions/GettingStarted/resources/lightbulb/images/next.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><metadata
+ id="metadata3010"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs3008" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="714"
+ id="namedview3006"
+ showgrid="false"
+ fit-margin-left="3.15"
+ fit-margin-right="3.15"
+ fit-margin-top="0.9"
+ fit-margin-bottom="0.9"
+ inkscape:zoom="4.2142857"
+ inkscape:cx="5.85"
+ inkscape:cy="7.8"
+ inkscape:window-x="-4"
+ inkscape:window-y="-4"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><g
+ id="g3000"
+ transform="translate(-22.15,-21.8)"><g
+ id="g3002"><polygon
+ points="25.3,24.3 26.9,22.7 33,28.8 26.9,34.9 25.3,33.2 29.8,28.8 "
+ id="polygon3004"
+ style="fill:#7a7a7a" /></g></g></svg>
\ No newline at end of file
diff --git a/resources/lightbulb/images/prev-disabled.png
b/resources/lightbulb/images/prev-disabled.png
new file mode 100644
index 0000000..da4170e
--- /dev/null
+++ b/resources/lightbulb/images/prev-disabled.png
Binary files differ
diff --git a/resources/lightbulb/images/prev-disabled.svg
b/resources/lightbulb/images/prev-disabled.svg
new file mode 100644
index 0000000..1df0e3d
--- /dev/null
+++ b/resources/lightbulb/images/prev-disabled.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 14 14"
+ enable-background="new 0 0 56 56"
+ xml:space="preserve"
+ inkscape:version="0.48.5 r10040"
+ width="100%"
+ height="100%"
+ sodipodi:docname="prev-disabled.svg"
+
inkscape:export-filename="/home/matthew/Code/Wikimedia/vagrant-latest/mediawiki/extensions/GettingStarted/resources/lightbulb/images/prev-disabled.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"><metadata
+ id="metadata3023"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs3021" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="714"
+ id="namedview3019"
+ showgrid="false"
+ fit-margin-top="0.9"
+ fit-margin-left="3.15"
+ fit-margin-right="3.15"
+ fit-margin-bottom="0.9"
+ inkscape:zoom="4.2142857"
+ inkscape:cx="5.85"
+ inkscape:cy="7.7999998"
+ inkscape:window-x="-4"
+ inkscape:window-y="-4"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><g
+ id="g3013"
+ transform="translate(-22.15,-21.8)"><g
+ id="g3015"><polygon
+ points="31.4,22.7 33,24.3 28.6,28.8 33,33.2 31.4,34.9 25.3,28.8 "
+ id="polygon3017"
+ style="fill:#cccccc" /></g></g></svg>
\ No newline at end of file
diff --git a/resources/lightbulb/images/prev.png
b/resources/lightbulb/images/prev.png
new file mode 100644
index 0000000..429d99b
--- /dev/null
+++ b/resources/lightbulb/images/prev.png
Binary files differ
diff --git a/resources/lightbulb/images/prev.svg
b/resources/lightbulb/images/prev.svg
new file mode 100644
index 0000000..a937f3f
--- /dev/null
+++ b/resources/lightbulb/images/prev.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 14 14"
+ enable-background="new 0 0 56 56"
+ xml:space="preserve"
+ inkscape:version="0.48.5 r10040"
+ width="100%"
+ height="100%"
+ sodipodi:docname="prev.svg"><metadata
+ id="metadata13"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/></cc:Work></rdf:RDF></metadata><defs
+ id="defs11" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="714"
+ id="namedview9"
+ showgrid="false"
+ fit-margin-top="0.9"
+ fit-margin-left="3.15"
+ fit-margin-right="3.15"
+ fit-margin-bottom="0.9"
+ inkscape:zoom="4.2142857"
+ inkscape:cx="5.8499997"
+ inkscape:cy="7.8000001"
+ inkscape:window-x="-4"
+ inkscape:window-y="-4"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><g
+ id="g3"
+ transform="translate(-22.15,-21.8)"><g
+ id="g5"><polygon
+ points="31.4,22.7 33,24.3 28.6,28.8 33,33.2 31.4,34.9 25.3,28.8 "
+ id="polygon7"
+ style="fill:#7a7a7a" /></g></g></svg>
\ No newline at end of file
diff --git a/resources/lightbulb/lightbulb.flyout.js
b/resources/lightbulb/lightbulb.flyout.js
index 5739a26..8bedcf8 100644
--- a/resources/lightbulb/lightbulb.flyout.js
+++ b/resources/lightbulb/lightbulb.flyout.js
@@ -1,11 +1,17 @@
( function ( mw, $ ) {
- var flyoutTemplate =
+ var MAX_SUGGESTION_PER_PAGE_COUNT = 3,
+ MAX_PAGE_COUNT = 3,
+ flyoutTemplate =
'<div class="lightbulb-flyout guider">\
<h1></h1>\
<p></p>\
<ol class="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="guider_arrow guider_arrow_up
guider_arrow_center">\
<div
class="guider_arrow_inner_container">\
<div
class="guider_arrow_inner"></div>\
@@ -18,7 +24,9 @@
</li>',
POKEY_HEIGHT = 42, // (px) (See mediawiki.libs.guiders.js, L183)
FLYOUT_WIDTH = 390, // (px)
- parser = new mw.gettingStarted.lightbulb.Parser();
+ parser = new mw.gettingStarted.lightbulb.Parser(),
+ suggestionRenderer = new
mw.gettingStarted.lightbulb.SuggestionRenderer(),
+ currentFlyoutPageIndex; // 0-based
function renderFlyout() {
@@ -31,17 +39,91 @@
return $flyout;
}
+ /**
+ * Adds the suggestions to the flyout. This sets up pagination and
shows the
+ * first page of suggestions.
+ *
+ * @param {jQuery} $flyout Flyout jQuery set
+ * @param {Array} suggestions Array of suggestions from the parser
+ */
function addSuggestionsToFlyout( $flyout, suggestions ) {
- var $suggestions = $flyout.find( '.lightbulb-suggestions' ),
- suggestionView = new
mw.gettingStarted.lightbulb.SuggestionView();
+ var $nextButton,
+ $pagination = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-pagination' ),
+ pageCount = Math.ceil( suggestions.length /
MAX_SUGGESTION_PER_PAGE_COUNT ),
+ i;
- $.each( suggestions, function ( i, suggestion ) {
- var $suggestion = suggestionView.render( suggestion ),
- $li = $( '<li></li>' ).append( $suggestion );
+ $pagination.find( '.mw-gettingstarted-lightbulb-flyout-back' )
+ .attr( 'title', mw.msg(
'gettingstarted-lightbulb-flyout-back' ) )
+ .click( function () {
+ currentFlyoutPageIndex--;
+ renderFlyoutPage( $flyout, suggestions,
currentFlyoutPageIndex, pageCount );
+ } );
- $suggestions.append( $li );
- } );
+
+ $nextButton = $pagination
+ .find( '.mw-gettingstarted-lightbulb-flyout-next' )
+ .attr( 'title', mw.msg(
'gettingstarted-lightbulb-flyout-next' ) )
+ .click( function () {
+ currentFlyoutPageIndex++;
+ renderFlyoutPage( $flyout, suggestions,
currentFlyoutPageIndex, pageCount );
+ } );
+ if ( pageCount > 1 ) {
+ for ( i = 0; i < pageCount; i++ ) {
+ $( '<span> ' )
+ .attr( 'class',
'mw-gettingstarted-lightbulb-flyout-pagination-disc' )
+ .text( '●' )
+ .insertBefore( $nextButton );
+ }
+ } else {
+ $pagination.hide();
+ }
+
+ currentFlyoutPageIndex = 0;
+ renderFlyoutPage( $flyout, suggestions, currentFlyoutPageIndex,
pageCount );
}
+
+ /**
+ * Updates the flyout to render a particular page
+ *
+ * @param {jQuery} $flyout jQuery set for flyout
+ * @param {Array} suggestions Full list of suggestions
+ * @param {Number} pageIndex Page index to show, 0-based
+ * @param {Number} pageCount Number of pages
+ */
+ function renderFlyoutPage( $flyout, suggestions, pageIndex, pageCount )
{
+ var $suggestions = $flyout.find( '.lightbulb-suggestions' ),
+ $newSuggestions = $( '<ol>' ).attr( 'class',
'lightbulb-suggestions' ),
+ suggestion,
+ $suggestion,
+ $prevButton,
+ $nextButton,
+ suggestionStartIndex = pageIndex *
MAX_SUGGESTION_PER_PAGE_COUNT,
+ $li,
+ i;
+
+ for ( i = 0; i < MAX_SUGGESTION_PER_PAGE_COUNT && (
suggestionStartIndex + i ) < suggestions.length; i++ ) {
+ suggestion = suggestions[suggestionStartIndex + i];
+ $suggestion = suggestionRenderer.render( suggestion );
+ $li = $( '<li></li>' ).append( $suggestion );
+
+ $newSuggestions.append( $li );
+ }
+
+ // There can be 0 discs, in which case this is a noop.
+ $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-pagination-disc' )
+ .removeClass(
'mw-gettingstarted-lightbulb-flyout-selected-page' )
+ .eq( pageIndex )
+ .addClass(
'mw-gettingstarted-lightbulb-flyout-selected-page' );
+
+ $prevButton = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-back' )
+ .prop( 'disabled', pageIndex === 0 );
+
+ $nextButton = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-next' )
+ .prop( 'disabled', pageIndex === ( pageCount - 1 ) );
+
+ $suggestions.replaceWith( $newSuggestions );
+ }
+
function renderLightbulb() {
var $lightbulb = $( lightbulbTemplate );
@@ -70,7 +152,14 @@
} );
}
- $( function () {
+ // TODO (mattflaschen, 2014-08-11): Generate this server-side
+ // hide it for no JS, and by default, and show it if it's a supported
browser
+ // (or hide it for blacklisted ones)
+
+ /**
+ * Adds lightbulb icon (for flyout) and renders flyout except
suggestions
+ */
+ function addFlyout() {
var $lightbulb = renderLightbulb(),
$flyout = renderFlyout();
@@ -94,7 +183,7 @@
.done( function ( title ) {
api.getSuggestions( {
excludedTitle: title,
- count: 3,
+ count:
MAX_SUGGESTION_PER_PAGE_COUNT * MAX_PAGE_COUNT,
thumbSize: 70
} ).done( function ( response ) {
var suggestions = parser.parse(
response );
@@ -111,6 +200,14 @@
$( '#p-personal ul' ).prepend( $lightbulb );
$( document.body ).append( $flyout );
- } );
+ }
+ $( function () {
+ // This will return true for IE >= 8 and non-IE browsers
+ if ( $.client.test( {
+ msie: [ [ '>=', 8 ] ]
+ } ) ) {
+ addFlyout();
+ }
+ } );
} ( mediaWiki, jQuery ) );
diff --git a/resources/lightbulb/lightbulb.flyout.less
b/resources/lightbulb/lightbulb.flyout.less
index 9803849..5f3906b 100644
--- a/resources/lightbulb/lightbulb.flyout.less
+++ b/resources/lightbulb/lightbulb.flyout.less
@@ -1,5 +1,6 @@
@import "mediawiki.ui/variables";
@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
@flyoutWidth: 390px;
@@ -38,6 +39,67 @@
}
}
+.mw-gettingstarted-lightbulb-flyout-pagination {
+ margin-top: 35px;
+ text-align: center;
+}
+
+// Also override corresponding .mw-ui-button states, since they don't work for
the icon
+.mw-gettingstarted-lightbulb-flyout-pagination-button-icon,
+.mw-gettingstarted-lightbulb-flyout-pagination-button-icon.mw-ui-button:active,
+.mw-gettingstarted-lightbulb-flyout-pagination-button-icon.mw-ui-button[disabled]:hover
{
+ background-color: #fff;
+ width: 60px;
+ height: 40px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 14px 14px;
+ padding: 12px 22px;
+}
+
+.mw-gettingstarted-lightbulb-flyout-back,
+.mw-gettingstarted-lightbulb-flyout-back.mw-ui-button:active {
+ margin-right: 17px;
+ .background-image-svg('images/prev.svg', 'images/prev.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-back[disabled],
+.mw-gettingstarted-lightbulb-flyout-back[disabled]:hover {
+ .background-image-svg('images/prev-disabled.svg',
'images/prev-disabled.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-next,
+.mw-gettingstarted-lightbulb-flyout-next.mw-ui-button:active {
+ margin-left: 17px;
+ .background-image-svg('images/next.svg', 'images/next.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-next[disabled],
+.mw-gettingstarted-lightbulb-flyout-next[disabled]:hover {
+ .background-image-svg('images/next-disabled.svg',
'images/next-disabled.png');
+}
+
+.mw-gettingstarted-lightbulb-flyout-pagination-disc {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ cursor: default;
+
+ font-size: 22px;
+
+ vertical-align: middle;
+
+ color: @colorGray13;
+}
+
+.mw-gettingstarted-lightbulb-flyout-pagination-disc.mw-gettingstarted-lightbulb-flyout-selected-page
{
+ color: @colorGray7;
+}
+
.lightbulb-suggestions {
list-style-type: none;
margin: 0;
diff --git a/resources/lightbulb/lightbulb.postEdit.js
b/resources/lightbulb/lightbulb.postEdit.js
index df3da0c..b027f8f 100644
--- a/resources/lightbulb/lightbulb.postEdit.js
+++ b/resources/lightbulb/lightbulb.postEdit.js
@@ -15,13 +15,13 @@
function createNotification( suggestions, headerMsg ) {
var $notification = $( notificationTemplate ),
$notificationBody = $notification.find(
'.lightbulb-notification-body' ),
- suggestionView = new
mw.gettingStarted.lightbulb.SuggestionView();
+ suggestionRenderer = new
mw.gettingStarted.lightbulb.SuggestionRenderer();
$notification.find( 'h1' ).text( headerMsg );
$notificationBody.find( 'p' ).text( notificationBodyMsg );
$.each( suggestions, function ( i, suggestion ) {
- $notificationBody.append( suggestionView.render(
suggestion ) );
+ $notificationBody.append( suggestionRenderer.render(
suggestion ) );
} );
$notification.find( '.lightbulb-notification-hide' )
diff --git a/resources/lightbulb/lightbulb.suggestionView.js
b/resources/lightbulb/lightbulb.suggestionRenderer.js
similarity index 90%
rename from resources/lightbulb/lightbulb.suggestionView.js
rename to resources/lightbulb/lightbulb.suggestionRenderer.js
index 0f04909..d43cfd8 100644
--- a/resources/lightbulb/lightbulb.suggestionView.js
+++ b/resources/lightbulb/lightbulb.suggestionRenderer.js
@@ -11,9 +11,9 @@
</div>\
</div>';
- function SuggestionView() {}
+ function SuggestionRenderer() {}
- SuggestionView.prototype.render = function( suggestion ) {
+ SuggestionRenderer.prototype.render = function( suggestion ) {
var $result = $( template ),
lastEdited,
url = mw.util.getUrl( suggestion.title );
@@ -57,6 +57,6 @@
mw.gettingStarted = mw.gettingStarted || {};
mw.gettingStarted.lightbulb = mw.gettingStarted.lightbulb || {};
- mw.gettingStarted.lightbulb.SuggestionView = SuggestionView;
+ mw.gettingStarted.lightbulb.SuggestionRenderer = SuggestionRenderer;
} ( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/151267
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8423168691e8cd9e7a0c6b39d8ffca80195403df
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <[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
