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