Kaldari has uploaded a new change for review. https://gerrit.wikimedia.org/r/158821
Change subject: WIP: Improvements to Wikigrok A interface ...................................................................... WIP: Improvements to Wikigrok A interface Change-Id: Ifd8d803d8d4437a52af229b19338f9b507be5894 See: https://trello.com/c/7P9KBEwg/1-5-wikigrok-inline-styling --- M includes/Resources.php M includes/skins/SkinMinervaBeta.php R javascripts/modules/wikigrok/WikiGrokDialog.js M javascripts/modules/wikigrok/wikigrokeval.js A less/common/inlinedialog.less R less/modules/wikigrok/WikiGrokDialog.less R templates/modules/wikigrok/WikiGrokDialog.hogan 7 files changed, 111 insertions(+), 36 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/21/158821/1 diff --git a/includes/Resources.php b/includes/Resources.php index 3f83093..3ef0709 100644 --- a/includes/Resources.php +++ b/includes/Resources.php @@ -143,6 +143,13 @@ 'position' => 'top', ), + 'skins.minerva.inlinedialog.styles' => $wgMFMobileResourceBoilerplate + array( + 'styles' => array( + 'less/common/inlinedialog.less', + ), + 'position' => 'top', + ), + // Important: This module is loaded on both mobile and desktop skin 'mobile.head' => $wgMFMobileResourceBoilerplate + array( 'dependencies' => array( @@ -410,6 +417,9 @@ 'mobile.stable.common', 'mobile.loggingSchemas', 'mobile.templates', + ), + 'scripts' => array( + 'javascripts/common/InlineDialog.js', ), ), @@ -909,14 +919,14 @@ 'mobile.alpha', ), 'templates' => array( - 'modules/wikigrok/WikiGrokDrawer.hogan', + 'modules/wikigrok/WikiGrokDialog.hogan', ), 'scripts' => array( 'javascripts/modules/wikigrok/wikigrokeval.js', - 'javascripts/modules/wikigrok/WikiGrokDrawer.js', + 'javascripts/modules/wikigrok/WikiGrokDialog.js', ), 'styles' => array( - 'less/modules/wikigrok/WikiGrokDrawer.less', + 'less/modules/wikigrok/WikiGrokDialog.less', ), ), diff --git a/includes/skins/SkinMinervaBeta.php b/includes/skins/SkinMinervaBeta.php index 83ea7ee..ccc8e78 100644 --- a/includes/skins/SkinMinervaBeta.php +++ b/includes/skins/SkinMinervaBeta.php @@ -36,6 +36,7 @@ $styles = parent::getSkinStyles(); $styles[] = 'skins.minerva.chrome.styles.beta'; + $styles[] = 'skins.minerva.inlinedialog.styles'; return $styles; } diff --git a/javascripts/modules/wikigrok/WikiGrokDrawer.js b/javascripts/modules/wikigrok/WikiGrokDialog.js similarity index 85% rename from javascripts/modules/wikigrok/WikiGrokDrawer.js rename to javascripts/modules/wikigrok/WikiGrokDialog.js index 4701611..ec7b5c2 100644 --- a/javascripts/modules/wikigrok/WikiGrokDrawer.js +++ b/javascripts/modules/wikigrok/WikiGrokDialog.js @@ -1,25 +1,25 @@ ( function( M, $ ) { M.assertMode( [ 'alpha' ] ); - var Drawer = M.require( 'Drawer' ), - WikiGrokDrawer; + var InlineDialog = M.require( 'InlineDialog' ), + WikiGrokDialog; /** - * @class WikiGrokDrawer - * @extends Drawer + * @class WikiGrokDialog + * @extends InlineDialog * THIS IS AN EXPERIMENTAL FEATURE THAT MAY BE MOVED TO A SEPARATE EXTENSION. - * This creates the drawer at the bottom of the screen that appears when a user + * This creates the dialog at the bottom of the lead section that appears when a user * scrolls past the lead. It asks the user to confirm metadata information for use * in Wikidata (https://www.wikidata.org). */ - WikiGrokDrawer = Drawer.extend( { + WikiGrokDialog = InlineDialog.extend( { locked: true, defaults: { beginQuestions: false, thankUser: false, closeMsg: mw.msg( 'mobile-frontend-overlay-close' ), headerMsg: 'Help Wikipedia', - contentMsg: 'Wikipedia needs your help with some information…', + contentMsg: 'Improve Wikipedia by tagging information on this page', // Other ideas: // Can you help improve Wikipedia? // Play a game to help Wikipedia! @@ -27,9 +27,10 @@ buttons: [ { classes: 'cancel inline mw-ui-button', label: 'No, thanks' }, { classes: 'proceed inline mw-ui-button mw-ui-progressive', label: 'Okay!' } - ] + ], + noticeMsg: '<a class="wg-notice-link" href="#">Tell me more</a>' }, - template: M.template.get( 'modules/wikigrok/WikiGrokDrawer.hogan' ), + template: M.template.get( 'modules/wikigrok/WikiGrokDialog.hogan' ), askWikidataQuestion: function( options ) { var self = this; @@ -86,6 +87,7 @@ { classes: 'not-sure inline mw-ui-button', label: 'Not Sure' }, { classes: 'no inline mw-ui-button mw-ui-progressive', label: 'No' } ]; + options.noticeMsg = 'All submissions are <a class="wg-notice-link" href="#">released freely</a>'; self.render( options ); } } @@ -116,10 +118,11 @@ success: function() { // Re-render with new content for 'Thanks' step options.thankUser = true; - options.contentMsg = 'You just made Wikipedia a little better!'; + options.contentMsg = 'You just made Wikipedia a little better, thanks!'; options.buttons = [ { classes: 'quit inline mw-ui-button mw-ui-progressive', label: 'Great!' } ]; + options.noticeMsg = '<a class="wg-notice-link" href="#">Tell me more</a>'; self.render( options ); } } ); @@ -127,10 +130,17 @@ postRender: function( options ) { var self = this; - // If the user hasn't opted-out of WikiGrok, load the interface. if ( !localStorage.getItem( 'mfHideWikiGrok' ) ) { - this._super.call( this, options ); + // Insert the dialog into the page + $( function() { + // If there is a table of contents, insert before it. + if ( $( '.toc-mobile' ).length ) { + self.insertBefore( '.toc-mobile' ); + } else { + self.appendTo( M.getLeadSection() ); + } + } ); // For final 'Thanks' step if ( options.thankUser ) { this.$( '.wg-buttons .quit' ).on( 'click', function() { @@ -139,7 +149,6 @@ // For intermediate 'Question' step } else if ( options.beginQuestions ) { this.$( '.wg-buttons .yes' ).on( 'click', function() { - self.hide(); options.claimIsCorrect = 1; self.recordClaim( options ); } ); @@ -148,22 +157,19 @@ self.hide(); } ); this.$( '.wg-buttons .no' ).on( 'click', function() { - self.hide(); options.claimIsCorrect = 0; self.recordClaim( options ); } ); // For initial 'Intro' step } else { this.$( '.wg-buttons .cancel' ).on( 'click', function() { - // Hiding is already bound to all cancel buttons, so we don't have - // bind it here. + self.hide(); // Set a localStorage value to keep WikiGrok hidden for this user. // We test for locaStorage support in wikigrok.js. // Older browsers can only store strings in localStorage (not booleans). localStorage.setItem( 'mfHideWikiGrok', 'true' ); } ); this.$( '.wg-buttons .proceed' ).on( 'click', function() { - self.hide(); // Proceed with asking the user a metadata question. self.askWikidataQuestion( options ); } ); @@ -177,5 +183,5 @@ } } ); - M.define( 'modules/wikigrok/WikiGrokDrawer', WikiGrokDrawer ); + M.define( 'modules/wikigrok/WikiGrokDialog', WikiGrokDialog ); }( mw.mobileFrontend, jQuery ) ); diff --git a/javascripts/modules/wikigrok/wikigrokeval.js b/javascripts/modules/wikigrok/wikigrokeval.js index d5f5e99..a8f7188 100644 --- a/javascripts/modules/wikigrok/wikigrokeval.js +++ b/javascripts/modules/wikigrok/wikigrokeval.js @@ -19,8 +19,8 @@ dataType: 'jsonp', success: function( data ) { var instanceClaims, - loadWikiGrokDrawer = false, - WikiGrokDrawer; + loadWikiGrokDialog = false, + WikiGrokDialog; // See if the page has any 'instance of' claims. if ( data.entities !== undefined && data.entities[wikidataID].claims.P31 !== undefined ) { @@ -30,21 +30,15 @@ if ( claim.mainsnak.datavalue.value['numeric-id'] === 5 ) { // Make sure there are no existing occupation claims. if ( data.entities[wikidataID].claims.P106 === undefined ) { - loadWikiGrokDrawer = true; + loadWikiGrokDialog = true; } // Break each loop. return false; } } ); - if ( loadWikiGrokDrawer ) { - WikiGrokDrawer = M.require( 'modules/wikigrok/WikiGrokDrawer' ); - // Instantiate a new WikiGrokDrawer when the user scrolls down. - $( window ).on( 'scroll', function() { - if ( window.pageYOffset > 300 ) { - $( window ).off( 'scroll' ); - new WikiGrokDrawer( { itemId: wikidataID } ); - } - } ); + if ( loadWikiGrokDialog ) { + WikiGrokDialog = M.require( 'modules/wikigrok/WikiGrokDialog' ); + new WikiGrokDialog( { itemId: wikidataID } ); } } } diff --git a/less/common/inlinedialog.less b/less/common/inlinedialog.less new file mode 100644 index 0000000..6d044f4 --- /dev/null +++ b/less/common/inlinedialog.less @@ -0,0 +1,56 @@ +@import "minerva.variables"; +@import "minerva.mixins"; + + +// Inline dialogs +// +// Inline dialogs appear within page content and contain CTAs +// +// Styleguide 4. + +// Basic dialog styling +// +// The close button should appear at the top of the dialog. +// The visible class needs to be present for the dialog to show. +// +// Markup: +// <div class="inline-dialog visible"> +// <a class='cancel icon'>close</a> +// <p>hello</p> +// </div> +// +// Styleguide 4.1. +.inline-dialog { + margin-top: 1em; + text-align: center; + padding: 1em @contentMargin; + background-color: @grayLightest; + + &.text { + line-height: 1; + font-size: .9em; + text-align: left; + padding-top: .5em; + } + + p { + line-height: 1.4; + margin-top: .5em; + } + + a.cancel { + display: block; + width: 100%; + height: 32px; + background-position: 50% 8px; + } + + a.button { + margin: 1em @contentMargin; + } + + .mw-ui-block { + display: block; + padding-bottom: 1em; + } +} diff --git a/less/modules/wikigrok/WikiGrokDrawer.less b/less/modules/wikigrok/WikiGrokDialog.less similarity index 84% rename from less/modules/wikigrok/WikiGrokDrawer.less rename to less/modules/wikigrok/WikiGrokDialog.less index db1474b..f6db633 100644 --- a/less/modules/wikigrok/WikiGrokDrawer.less +++ b/less/modules/wikigrok/WikiGrokDialog.less @@ -11,6 +11,7 @@ } .wg-header { + margin-top: 0; color: @grayMedium; font-size: 95%; text-align: left; @@ -25,6 +26,7 @@ } .wg-buttons { + margin-bottom: .6em; // Extra space between the buttons // FIXME: Consider pushing this into ui.less @@ -44,4 +46,10 @@ width: 75px; } } + + .wg-notice { + font-size: 90%; + margin-bottom: 0; + text-align: left; + } } diff --git a/templates/modules/wikigrok/WikiGrokDrawer.hogan b/templates/modules/wikigrok/WikiGrokDialog.hogan similarity index 67% rename from templates/modules/wikigrok/WikiGrokDrawer.hogan rename to templates/modules/wikigrok/WikiGrokDialog.hogan index 2f4802e..3a38807 100644 --- a/templates/modules/wikigrok/WikiGrokDrawer.hogan +++ b/templates/modules/wikigrok/WikiGrokDialog.hogan @@ -1,7 +1,4 @@ <div class="wikigrok"> - <div class="wg-close"> - <button class="cancel icon icon-16px icon-cancel">{{closeMsg}}</button> - </div> <p class="wg-header">{{headerMsg}}</p> <p class="wg-content">{{contentMsg}}</p> <p class="wg-buttons"> @@ -9,4 +6,7 @@ <button class="{{classes}}">{{label}}</button> {{/buttons}} </p> + {{#noticeMsg}} + <p class="wg-notice">{{{noticeMsg}}}</p> + {{/noticeMsg}} </div> -- To view, visit https://gerrit.wikimedia.org/r/158821 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ifd8d803d8d4437a52af229b19338f9b507be5894 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: Kaldari <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
