Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/219506
Change subject: WIP: Onboarding tutorial for first time gatherers
......................................................................
WIP: Onboarding tutorial for first time gatherers
bug: T99109
Change-Id: If6687f83b94fc6999c44a2e40ca9a418aa8ceb82
---
M extension.json
M resources/ext.gather.collection.contentOverlay/CollectionsContentOverlay.js
M resources/ext.gather.collection.contentOverlay/content.hogan
M resources/ext.gather.collection.editor/CollectionEditOverlay.js
A resources/ext.gather.collection.editor/SearchTutorialOverlay.hogan
A resources/ext.gather.collection.editor/SearchTutorialOverlay.js
A resources/ext.gather.collection.editor/searchTutorialOverlay.less
M resources/ext.gather.init/init.js
M resources/ext.gather.routes/routes.js
M resources/ext.gather.watchstar/CollectionsWatchstar.js
10 files changed, 144 insertions(+), 40 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Gather
refs/changes/06/219506/1
diff --git a/extension.json b/extension.json
index c80570e..0c602cc 100644
--- a/extension.json
+++ b/extension.json
@@ -441,6 +441,7 @@
"ext.gather.relatedpages",
"ext.gather.logging",
"mobile.overlays",
+ "mobile.contentOverlays",
"mobile.toast",
"mediawiki.ui.checkbox",
"ext.gather.api",
@@ -465,13 +466,17 @@
],
"templates": {
"header.hogan":
"resources/ext.gather.collection.editor/header.hogan",
- "content.hogan":
"resources/ext.gather.collection.editor/content.hogan"
+ "content.hogan":
"resources/ext.gather.collection.editor/content.hogan",
+ "SearchTutorialOverlay.hogan":
"resources/ext.gather.collection.editor/SearchTutorialOverlay.hogan"
},
"scripts": [
+
"resources/ext.gather.collection.editor/SearchTutorialOverlay.js",
"resources/ext.gather.collection.editor/CollectionEditOverlay.js"
],
"styles": [
-
"resources/ext.gather.collection.editor/editOverlay.less"
+
"resources/ext.gather.collection.editor/editOverlay.less",
+
"resources/ext.gather.collection.editor/searchTutorialOverlay.less"
+
]
},
"ext.gather.page.search": {
diff --git
a/resources/ext.gather.collection.contentOverlay/CollectionsContentOverlay.js
b/resources/ext.gather.collection.contentOverlay/CollectionsContentOverlay.js
index 0a15be1..7218464 100644
---
a/resources/ext.gather.collection.contentOverlay/CollectionsContentOverlay.js
+++
b/resources/ext.gather.collection.contentOverlay/CollectionsContentOverlay.js
@@ -38,7 +38,8 @@
'input input': 'onInput',
'click .overlay-content li': 'onSelectCollection',
'touchend .create-collection': 'onCreateNewCollection',
- 'submit form': 'onCreateNewCollection'
+ 'submit form': 'onCreateNewCollection',
+ 'click .tutorial-next': 'onClickTutorialNext'
},
/** @inheritdoc */
hasFixedHeader: false,
@@ -62,6 +63,7 @@
subheading: mw.msg( 'gather-add-to-existing' ),
moreLinkLabel: mw.msg( 'gather-add-to-another' ),
createButtonLabel: mw.msg(
'gather-create-new-button-label' ),
+ showTutorial: false,
collections: undefined
},
/** @inheritdoc */
@@ -106,6 +108,10 @@
this.$( 'form' ).append( this.createButton.$el
);
}
this.expandForm();
+ if ( this.options.showTutorial ) {
+ this.$( '.collectionContent' ).addClass(
'hidden' );
+ this.$(' .tutorial' ).removeClass( 'hidden' );
+ }
},
/**
* Adjust the form so that it takes up the available screen.
@@ -170,6 +176,13 @@
$( ev.currentTarget ).remove();
this._loadCollections( user.getName(),
this.options.page, this._continue );
+ },
+ /**
+ * Event handler for clicking the tutorial next button
+ */
+ onClickTutorialNext: function () {
+ this.$( '.tutorial').addClass( 'hidden' );
+ this.$('.collectionContent' ).removeClass( 'hidden' );
},
/**
* Event handler for focusing input
@@ -346,7 +359,11 @@
* @param {Number} id of collection
*/
loadEditor: function ( id ) {
- window.location.hash = '#/collection/edit/' + id;
+ var hash = '#/collection/edit/' + id;
+ if ( this.options.showTutorial ) {
+ hash += '/tutorial';
+ }
+ window.location.hash = hash;
},
/**
* Communicate with API to create a collection
diff --git a/resources/ext.gather.collection.contentOverlay/content.hogan
b/resources/ext.gather.collection.contentOverlay/content.hogan
index f2abc16..ab992ea 100644
--- a/resources/ext.gather.collection.contentOverlay/content.hogan
+++ b/resources/ext.gather.collection.contentOverlay/content.hogan
@@ -1,32 +1,43 @@
{{{spinner}}}
-<div class="snapshot">
-{{#page}}
- <div class="thumbnail{{^pageImageUrl}} missing{{/pageImageUrl}}">
- {{#pageImageUrl}}
- <img src="{{pageImageUrl}}" alt="{{title}}">
- {{/pageImageUrl}}
+<div class="tutorial hidden">
+ <div>
+ Start a collection of your favorite interests that you can
bookmark for later or share with others.
</div>
- <strong>{{title}}</strong>
- {{description}}
-{{/page}}
+ <span>
+ Or, add this to your <b>watchlist</b> to follow changes to the
article.
+ </span>
+ <button class="mw-ui-progressive mw-ui-button
tutorial-next">Okay</button>
</div>
-<hr/>
-<h3>{{subheadingNewCollection}}</h3>
-<form>
- <input class="create-collection-input mw-ui-input mw-ui-input-inline"
placeholder="{{placeholder}}">
-</form>
-<hr/>
-<h3>{{subheading}}</h3>
-<ul>
-{{#collections}}
- <li data-collection-title="{{title}}" data-collection-id="{{id}}"
- data-collection-is-watchlist="{{isWatchlist}}"
- data-collection-is-member="{{titleInCollection}}">
- {{title}}
{{^titleInCollection}}{{{iconDisabledButton}}}{{/titleInCollection}}
- {{#titleInCollection}}{{{iconButton}}}{{/titleInCollection}}
- </li>
-{{/collections}}
-</ul>
-{{#moreLink}}
-<button class="mw-ui-quiet mw-ui-anchor mw-ui-progressive
more-collections">{{moreLinkLabel}}</button>
-{{/moreLink}}
+<div class="collectionContent">
+ <div class="snapshot">
+ {{#page}}
+ <div class="thumbnail{{^pageImageUrl}}
missing{{/pageImageUrl}}">
+ {{#pageImageUrl}}
+ <img src="{{pageImageUrl}}" alt="{{title}}">
+ {{/pageImageUrl}}
+ </div>
+ <strong>{{title}}</strong>
+ {{description}}
+ {{/page}}
+ </div>
+ <hr/>
+ <h3>{{subheadingNewCollection}}</h3>
+ <form>
+ <input class="create-collection-input mw-ui-input
mw-ui-input-inline" placeholder="{{placeholder}}">
+ </form>
+ <hr/>
+ <h3>{{subheading}}</h3>
+ <ul>
+ {{#collections}}
+ <li data-collection-title="{{title}}"
data-collection-id="{{id}}"
+ data-collection-is-watchlist="{{isWatchlist}}"
+ data-collection-is-member="{{titleInCollection}}">
+ {{title}}
{{^titleInCollection}}{{{iconDisabledButton}}}{{/titleInCollection}}
+
{{#titleInCollection}}{{{iconButton}}}{{/titleInCollection}}
+ </li>
+ {{/collections}}
+ </ul>
+ {{#moreLink}}
+ <button class="mw-ui-quiet mw-ui-anchor mw-ui-progressive
more-collections">{{moreLinkLabel}}</button>
+ {{/moreLink}}
+</div>
diff --git a/resources/ext.gather.collection.editor/CollectionEditOverlay.js
b/resources/ext.gather.collection.editor/CollectionEditOverlay.js
index 312fec3..b2c9d40 100644
--- a/resources/ext.gather.collection.editor/CollectionEditOverlay.js
+++ b/resources/ext.gather.collection.editor/CollectionEditOverlay.js
@@ -10,8 +10,9 @@
schema = new SchemaGather(),
router = M.require( 'router' ),
CollectionDeleteOverlay = M.require(
'ext.gather.collection.delete/CollectionDeleteOverlay' ),
- RelatedPages = M.require(
'ext.gather.relatedpages/RelatedPages' );
-
+ RelatedPages = M.require(
'ext.gather.relatedpages/RelatedPages' ),
+ SearchTutorialOverlay = M.require(
'ext.gather.collection.edit/SearchTutorialOverlay' ),
+ skin = M.require( 'skin' );
/**
* Overlay for editing a collection
* @extends Overlay
@@ -56,6 +57,7 @@
} ).options,
collection: null,
reloadOnSave: false,
+ showTutorial: false,
confirmExitMessage: mw.msg(
'gather-edit-collection-confirm' ),
editSuccessMsg: mw.msg(
'gather-update-collection-success' ),
editFailedError: mw.msg(
'gather-edit-collection-failed-error' ),
@@ -136,7 +138,8 @@
* @private
*/
_populateCollectionMembers: function () {
- var self = this;
+ var self = this,
+ searchTutorialOverlay;
this.$( '.manage-members-pane' ).removeClass( 'hidden'
);
this.api.getCollectionMembers( this.id ).done( function
( pages ) {
self.searchPanel = new CollectionSearchPanel( {
@@ -146,6 +149,13 @@
} );
self.searchPanel.on( 'change', $.proxy( self,
'onCollectionMembersChange' ) );
self.searchPanel.show();
+ if ( self.options.showTutorial ) {
+ searchTutorialOverlay = new
SearchTutorialOverlay( {
+ target: self.$(
'.mw-ui-icon-search' ),
+ skin: skin
+ } );
+ searchTutorialOverlay.show();
+ }
// If there is 1 to 3 elements set up related
results
if ( pages.length > 0 && pages.length < 4 ) {
diff --git a/resources/ext.gather.collection.editor/SearchTutorialOverlay.hogan
b/resources/ext.gather.collection.editor/SearchTutorialOverlay.hogan
new file mode 100644
index 0000000..5486b68
--- /dev/null
+++ b/resources/ext.gather.collection.editor/SearchTutorialOverlay.hogan
@@ -0,0 +1,5 @@
+<p>{{{topText}}}</p>
+<p>{{{bottomText}}}</p>
+<div class="button-bar">
+ {{#dismissMsg}}<button class="mw-ui-button mw-ui-progressive
dismiss">{{dismissMsg}}</button>{{/dismissMsg}}
+</div>
diff --git a/resources/ext.gather.collection.editor/SearchTutorialOverlay.js
b/resources/ext.gather.collection.editor/SearchTutorialOverlay.js
new file mode 100644
index 0000000..6939ffd
--- /dev/null
+++ b/resources/ext.gather.collection.editor/SearchTutorialOverlay.js
@@ -0,0 +1,32 @@
+( function ( M, $ ) {
+ var PageActionOverlay = M.require(
'modules/tutorials/PageActionOverlay' ),
+ SearchTutorialOverlay;
+
+ SearchTutorialOverlay = PageActionOverlay.extend( {
+ template: mw.template.get( 'ext.gather.collection.editor',
'SearchTutorialOverlay.hogan' ),
+ className: 'overlay content-overlay search-tutorial-overlay
slide active editing',
+ events: $.extend( {}, PageActionOverlay.prototype.events, {
+ 'click .dismiss': 'onDismissClick'
+ } ),
+ appendToElement: 'body',
+ defaults: {
+ topText: 'topText',
+ bottomText: 'bottomText',
+ dismissMsg: 'Okay'
+ },
+ /**
+ * Event handler for dismissing the overlay
+ * @emits action
+ * @param {jQuery.Event} ev
+ */
+ onDismissClick: function ( ev ) {
+ this.hide();
+ /**
+ * @event action
+ */
+ this.emit( 'action', ev );
+ }
+ } );
+
+ M.define( 'ext.gather.collection.edit/SearchTutorialOverlay',
SearchTutorialOverlay );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/resources/ext.gather.collection.editor/searchTutorialOverlay.less
b/resources/ext.gather.collection.editor/searchTutorialOverlay.less
new file mode 100644
index 0000000..a0adc38
--- /dev/null
+++ b/resources/ext.gather.collection.editor/searchTutorialOverlay.less
@@ -0,0 +1,22 @@
+.content-overlay {
+ &.search-tutorial-overlay {
+ background: #ededed;
+
+ .tutorial-pointer {
+ border-bottom: solid 10px #ededed;
+ }
+
+ p {
+ text-align: left;
+ }
+
+ .button {
+ border-radius: 2px;
+ padding: 6px;
+ }
+
+ .button-bar {
+ text-align: center;
+ }
+ }
+}
diff --git a/resources/ext.gather.init/init.js
b/resources/ext.gather.init/init.js
index 8fad2c4..9fabc33 100644
--- a/resources/ext.gather.init/init.js
+++ b/resources/ext.gather.init/init.js
@@ -33,7 +33,7 @@
// Don't show if the overlay is open as user could have
clicked watchstar
!$( 'html' ).hasClass( 'gather-overlay-enabled' ) &&
// Tutorial has never been dismissed
- !settings.get( settingOverlayWasDismissed ) &&
+ // !settings.get( settingOverlayWasDismissed ) &&
// Feature flag is enabled
mw.config.get( 'wgGatherShouldShowTutorial' )
) {
diff --git a/resources/ext.gather.routes/routes.js
b/resources/ext.gather.routes/routes.js
index 433ff6a..e70802e 100644
--- a/resources/ext.gather.routes/routes.js
+++ b/resources/ext.gather.routes/routes.js
@@ -5,7 +5,7 @@
overlayManager = M.require( 'overlayManager' ),
loader = M.require( 'loader' );
- overlayManager.add( /^\/collection\/(.*)\/(.*)$/, function ( action, id
) {
+ overlayManager.add( /^\/collection\/(.*)\/(.*)\/(.*)$/, function (
action, id, flag ) {
var d = $.Deferred(),
api = new CollectionsApi();
@@ -19,7 +19,8 @@
d.resolve(
new
CollectionEditOverlay( {
collection:
collection,
- reloadOnSave:
isSpecialPage
+ reloadOnSave:
isSpecialPage,
+ showTutorial:
flag === 'tutorial' ? true : false
} )
);
} );
diff --git a/resources/ext.gather.watchstar/CollectionsWatchstar.js
b/resources/ext.gather.watchstar/CollectionsWatchstar.js
index 2d7aa96..f23b710 100644
--- a/resources/ext.gather.watchstar/CollectionsWatchstar.js
+++ b/resources/ext.gather.watchstar/CollectionsWatchstar.js
@@ -112,7 +112,8 @@
// FIXME: Should be retrievable from
Page
description: mw.config.get(
'wgMFDescription' ),
// FIXME: Should be retrievable from
Page
- pageImageUrl: mw.config.get(
'wgGatherPageImageThumbnail' )
+ pageImageUrl: mw.config.get(
'wgGatherPageImageThumbnail' ),
+ showTutorial: options.wasUserPrompted
} );
overlay.on( 'collection-watch', function (
collection, isNewCollection ) {
/**
--
To view, visit https://gerrit.wikimedia.org/r/219506
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If6687f83b94fc6999c44a2e40ca9a418aa8ceb82
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Gather
Gerrit-Branch: master
Gerrit-Owner: Robmoen <rm...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
