jenkins-bot has submitted this change and it was merged. Change subject: Footer changes ......................................................................
Footer changes Mocked up here: https://trello.com/c/VEtJ2KiJ/229-3-changes-to-wikigrok-ui * Make HTML markup and CSS classes for panes consistent * Move all panes into WikiGrokDialog.hogan so that all of the markup is in one place * Move all buttons into the pane footers * Add helper methods to show one of the panes Change-Id: I53cb4dc800656f6a4bb053fd18903008af647fe9 --- M i18n/en.json M i18n/qqq.json M includes/Resources.php M resources/dialog.c/DialogC.less M resources/dialog.c/WikiGrokDialogC.js M resources/dialog.c/WikiGrokRouletteBadge.hogan M resources/dialog/WikiGrokDialog.hogan M resources/dialog/WikiGrokDialog.js M resources/dialog/WikiGrokDialog.less D resources/dialog/WikiGrokError.hogan D resources/dialog/WikiGrokThanks.hogan 11 files changed, 258 insertions(+), 219 deletions(-) Approvals: Bmansurov: Looks good to me, approved jenkins-bot: Verified diff --git a/i18n/en.json b/i18n/en.json index 7a87478..634edfc 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -27,7 +27,7 @@ "wikigrok-roulette-error-message-body": "There was a problem.", "wikigrok-roulette-error-ok-button-label": "Okay", "wikigrok-dialog-instruction": "Improve Wikipedia by tagging information on this page", - "wikigrok-dialog-tell-more-button-label": "Tell me more", + "wikigrok-dialog-tell-more": "Tell me more", "wikigrok-dialog-no-thanks-button-label": "No, thanks", "wikigrok-dialog-proceed-button-label": "Okay!", "wikigrok-dialog-license-info": "Submissions are <a href=\"$1\">released freely</a>.", diff --git a/i18n/qqq.json b/i18n/qqq.json index 98e786f..d66991b 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -31,7 +31,7 @@ "wikigrok-roulette-error-message-body": "The body of the error text which lets the user know that an error has occurred.", "wikigrok-roulette-error-ok-button-label": "The label of the OK button on the error pane.\n{{Identical|OK}}", "wikigrok-dialog-instruction": "Message that tells what to do", - "wikigrok-dialog-tell-more-button-label": "Tell me more button label", + "wikigrok-dialog-tell-more": "Tell me more button and link label", "wikigrok-dialog-no-thanks-button-label": "'No, thanks' button label", "wikigrok-dialog-proceed-button-label": "Proceed button label\n{{Identical|OK}}", "wikigrok-dialog-license-info": "Sentence with a link that once clicked shows more info about the license of submissions. Do not translate the $1, it's the link.", diff --git a/includes/Resources.php b/includes/Resources.php index a528672..d61c8f5 100644 --- a/includes/Resources.php +++ b/includes/Resources.php @@ -53,10 +53,8 @@ 'mediawiki.ui.checkbox', ), 'templates' => array( - 'Error.hogan' => 'dialog/WikiGrokError.hogan', 'Dialog.hogan' => 'dialog/WikiGrokDialog.hogan', 'WikiGrokMoreInfo/content.hogan' => 'dialog/WikiGrokMoreInfo.hogan', - 'Thanks.hogan' => 'dialog/WikiGrokThanks.hogan', 'tagButton.hogan' => 'dialog/tagButton.hogan', ), 'scripts' => array( @@ -69,7 +67,7 @@ ), 'messages' => array( 'wikigrok-dialog-instruction', - 'wikigrok-dialog-tell-more-button-label', + 'wikigrok-dialog-tell-more', 'wikigrok-dialog-no-thanks-button-label', 'wikigrok-dialog-proceed-button-label', 'wikigrok-dialog-license-info', diff --git a/resources/dialog.c/DialogC.less b/resources/dialog.c/DialogC.less index 5c18f3a..a53a386 100644 --- a/resources/dialog.c/DialogC.less +++ b/resources/dialog.c/DialogC.less @@ -1,43 +1,66 @@ @import "minerva.variables"; @import "minerva.mixins"; -.drawer { - &.wikigrok { - padding: 0; - .wg-link { - &.wg-badge { - .next { - .spinner { - height: auto; - vertical-align: middle; - visibility: hidden; - } - } +.wikigrok.drawer { + padding: 0; + margin-bottom: 0; + + .mw-ui-button { + margin-bottom: 0; + } + + .pane.badge { + + // The next ("Yay, let's do more…") button contains two span elements, which wrap the + // message itself and a spinner: + // <button class="mw-ui-button mw-ui-progressive next"> + // <span class="text">{{{label}}}</span> + // {{{spinner}}} + // </button> + .next { + display: inherit; + + .text, .spinner { + height: inherit; + vertical-align: middle; + margin: 0; } - &.wg-badge-1 { - .background-image-svg-quick('wg-badge-1'); - } - &.wg-badge-3 { - .background-image-svg-quick('wg-badge-3'); - } - &.wg-badge-5 { - .background-image-svg-quick('wg-badge-5'); - } - &.wg-badge-10 { - .background-image-svg-quick('wg-badge-10'); - } - &.wg-badge-20 { - .background-image-svg-quick('wg-badge-20'); - } - &.wg-badge-50 { - .background-image-svg-quick('wg-badge-50'); - } - &.wg-badge-100 { - .background-image-svg-quick('wg-badge-100'); + .spinner { + display: none; } } + + .wg-badge { + margin: 0 auto; + height: 5em; + width: 5em; + background-repeat: no-repeat; + } + + .wg-badge-1 { + .background-image-svg-quick('wg-badge-1'); + } + .wg-badge-3 { + .background-image-svg-quick('wg-badge-3'); + } + .wg-badge-5 { + .background-image-svg-quick('wg-badge-5'); + } + .wg-badge-10 { + .background-image-svg-quick('wg-badge-10'); + } + .wg-badge-20 { + .background-image-svg-quick('wg-badge-20'); + } + .wg-badge-50 { + .background-image-svg-quick('wg-badge-50'); + } + .wg-badge-100 { + .background-image-svg-quick('wg-badge-100'); + } } + .wikigrok-error { padding-top: 1em; } diff --git a/resources/dialog.c/WikiGrokDialogC.js b/resources/dialog.c/WikiGrokDialogC.js index 02e30aa..6f8b742 100644 --- a/resources/dialog.c/WikiGrokDialogC.js +++ b/resources/dialog.c/WikiGrokDialogC.js @@ -25,7 +25,7 @@ continueBtnLbl: mw.msg( 'wikigrok-dialog-c-continue-button-label' ) } ), events: $.extend( {}, Drawer.prototype.events, WikiGrokDialog.prototype.events, { - 'click .wg-badge .next': 'onClickNext' + 'click .pane.badge .next': 'onClickNext' } ), /** * Load the next page if available. @@ -70,6 +70,7 @@ } ).toHtmlString(); this.template = mw.template.get( 'ext.wikigrok.dialog.c', 'Badge.hogan' ); this.render( options ); + this._showBadgePane(); } } if ( showNext ) { @@ -84,7 +85,7 @@ this.$el.find( '.next ' ).prop( 'disabled', true ) .find( '.text' ).hide() .end() - .find( '.spinner' ).css( 'visibility', 'visible' ); + .find( '.spinner' ).css( 'display', 'inline-block' ); wikiGrokRoulette.navigateToNextPage( true ); }, @@ -99,7 +100,6 @@ // Don't run this when rendering the Badge template if ( !options.beginQuestions ) { options.beginQuestions = true; - self.$( '.tags, .footer, .spinner' ).hide(); self.askWikidataQuestion( options ); @@ -107,6 +107,15 @@ wikiGrokRoulette.getNextPage(); } this.show(); + }, + + /** + * Shows the "badge" pane. + * + * @private + */ + _showBadgePane: function () { + this._showPane( 'badge' ); } } ); diff --git a/resources/dialog.c/WikiGrokRouletteBadge.hogan b/resources/dialog.c/WikiGrokRouletteBadge.hogan index 7e623a0..17987e3 100644 --- a/resources/dialog.c/WikiGrokRouletteBadge.hogan +++ b/resources/dialog.c/WikiGrokRouletteBadge.hogan @@ -1,13 +1,17 @@ -<div class="pane content"> - <p class="wg-content"> - {{encouragementText}} - <br> - {{{tasksCompleted}}} - </p> - <p class="wg-link wg-badge wg-badge-{{responseCount}}"> - <button class="mw-ui-button mw-ui-progressive mw-ui-block next"> - <span class="text">{{{continueBtnLbl}}}</span> - {{{spinner}}} - </button> - </p> +<div class="pane badge"> + <div class="pane-content"> + <p class="message"> + {{encouragementText}}<br> + {{{tasksCompleted}}} + </p> + <div class="wg-badge wg-badge-{{responseCount}}"></div> + </div> + <div class="footer"> + <div class="footer-button-container"> + <button class="mw-ui-button mw-ui-progressive next"> + <span class="text">{{{continueBtnLbl}}}</span> + {{{spinner}}} + </button> + </div> + </div> </div> diff --git a/resources/dialog/WikiGrokDialog.hogan b/resources/dialog/WikiGrokDialog.hogan index 53332ea..a8a2952 100644 --- a/resources/dialog/WikiGrokDialog.hogan +++ b/resources/dialog/WikiGrokDialog.hogan @@ -1,23 +1,53 @@ -<!-- note English language only! --> -<div class="pane content"> - <p class="wg-content">{{contentMsg}}</p> - <p class="wg-buttons"> - {{#buttons}} - <button class="{{classes}}">{{label}}</button> - {{/buttons}} - </p> - <p class="tags"> - </p> - {{{spinner}}} - {{#noticeMsg}} - <p class="wg-notice">{{{noticeMsg}}}</p> - {{/noticeMsg}} - +<div class="pane intro"> + <div class="pane-content"> + <p class="message">{{introMsg}}</p> + </div> <div class="footer"> - <span class="license">{{{licenseInfoMsg}}}</span> - <button class="mw-ui-button save none">{{{noneBtnLbl}}}</button> - <button class="mw-ui-button mw-ui-constructive save next">{{{nextBtnLbl}}}</button> + <p class="footer-message"> + <a href="#/wikigrok/about">{{tellMoreMsg}}</a> + </p> + <div class="footer-button-container"> + <button class="mw-ui-button cancel">{{noThanksBtnLbl}}</button> + <button class="mw-ui-button mw-ui-progressive proceed">{{proceedBtnLbl}}</button> + </div> </div> </div> -{{>error}} +<div class="pane main"> + <div class="pane-content"> + <p class="message">{{{mainMsg}}}</p> + <div class="tags"> + </div> + {{{spinner}}} + </div> + <div class="footer"> + <p class="footer-message">{{{licenseInfoMsg}}}</p> + <div class="footer-button-container"> + <button class="mw-ui-button save none">{{noneBtnLbl}}</button> + <button class="mw-ui-button mw-ui-constructive save next">{{nextBtnLbl}}</button> + </div> + </div> +</div> + +<div class="pane thanks"> + <div class="pane-content"> + <p class="message">{{noProblemMsg}}</p> + </div> + <div class="footer"> + <div class="footer-button-container"> + <a href="#/wikigrok/about" class="mw-ui-button mw-ui-progressive tell-more">{{tellMoreMsg}}</a> + </div> + </div> +</div> + +<div class="pane error"> + <div class="pane-content"> + <p>{{{errorMsgHeading}}}</p> + <p>{{{errorMsgBody}}}</p> + </div> + <div class="footer"> + <div class="footer-button-container"> + <button class="close mw-ui-button mw-ui-progressive">{{errorOKBtnLbl}}</button> + </div> + </div> +</div> diff --git a/resources/dialog/WikiGrokDialog.js b/resources/dialog/WikiGrokDialog.js index ee67ed0..4af1b5d 100644 --- a/resources/dialog/WikiGrokDialog.js +++ b/resources/dialog/WikiGrokDialog.js @@ -49,40 +49,32 @@ errorMsgHeading: mw.msg( 'wikigrok-dialog-error-message-heading' ), errorMsgBody: mw.msg( 'wikigrok-dialog-error-message-body' ), errorOKBtnLbl: mw.msg( 'wikigrok-dialog-error-ok-button-label' ), - contentMsg: mw.msg( 'wikigrok-dialog-instruction' ), - tellMoreMsg: mw.msg( 'wikigrok-dialog-tell-more-button-label' ), + introMsg: mw.msg( 'wikigrok-dialog-instruction' ), + tellMoreMsg: mw.msg( 'wikigrok-dialog-tell-more' ), + thanksMsg: mw.msg( 'wikigrok-dialog-thanks' ), + noProblemMsg: mw.msg( 'wikigrok-dialog-no-problem' ), // Other ideas: // Can you help improve Wikipedia? // Play a game to help Wikipedia! // Help add tags to this page! - buttons: [ - { - classes: 'cancel inline mw-ui-button', - label: mw.msg( 'wikigrok-dialog-no-thanks-button-label' ) - }, - { - classes: 'proceed inline mw-ui-button mw-ui-progressive', - label: mw.msg( 'wikigrok-dialog-proceed-button-label' ) - } - ], + noThanksBtnLbl: mw.msg( 'wikigrok-dialog-no-thanks-button-label' ), + proceedBtnLbl: mw.msg( 'wikigrok-dialog-proceed-button-label' ), spinner: icons.spinner().toHtmlString(), - // FIXME: Split first 2 steps into separate templates so that we don't have to - // include HTML in the notice messages. - noticeMsg: '<a class="wg-notice-link" href="#/wikigrok/about">' + mw.msg( 'wikigrok-dialog-tell-more-button-label' ) + '</a>', isDrawer: false }, template: mw.template.get( 'ext.wikigrok.dialog', 'Dialog.hogan' ), - templatePartials: { - error: mw.template.get( 'ext.wikigrok.dialog', 'Error.hogan' ) - }, events: { - 'click .wg-link .tell-more': 'onClickTellMore', - 'click .pane.error .close': 'hide', - 'click .ui-tag-button': 'onClickTagButton', - 'click .save': 'onClickSave', - 'click .wg-buttons .cancel': 'onClickCancel', - 'click .wg-buttons .proceed': 'onClickProceed', - 'click .wg-notice-link': 'onClickNoticeLink' + 'click .pane.intro .footer-message a': 'onClickNoticeLink', + 'click .pane.intro .cancel': 'onClickCancel', + 'click .pane.intro .proceed': 'onClickProceed', + + 'click .pane.main .ui-tag-button': 'onClickTagButton', + 'click .pane.main .save': 'onClickSave', + 'click .pane.main .footer-message a': 'onClickNoticeLink', + + 'click .pane.thanks .tell-more': 'onClickTellMore', + + 'click .pane.error .close': 'hide' }, /** @inheritdoc */ @@ -91,6 +83,8 @@ // Remove any disambiguation parentheticals from the title. options.name = options.title.replace( / \(.+\)$/, '' ); + + options.mainMsg = mw.msg( 'wikigrok-dialog-select-tags', options.title ); this.apiWikiGrokResponse = new WikiGrokResponseApi( { itemId: options.itemId, @@ -162,7 +156,7 @@ * @param {String} error */ handleError: function ( error ) { - this.showError(); + this._showErrorPane(); this.logError( error ); }, @@ -210,8 +204,6 @@ _renderSuggestions: function () { var suggestions, allSuggestions, - $next, - $none, self = this; allSuggestions = wikiGrokCampaigns.getAllSuggestions(); @@ -220,15 +212,6 @@ // Now work out the labels if we have some suggestions if ( suggestions.length ) { - $next = self.$( '.footer .next' ); - $none = self.$( '.footer .none' ); - - // Hard-code the "Next" button width to match the "None" button width. - // That way, when the buttons are switched, the width stays the same. - // This depends on the assumption that the "Next" button text is - // always shorter than the "None" button text. - $next.css( 'width', $none.outerWidth() ); - self.$( '.tags' ).show(); $.each( suggestions, function ( i, suggestion ) { var tagHtml, templateData, propertyName; @@ -273,32 +256,13 @@ /** * Show suggestions to the user. * Also record claims when the user hits the save button. - * FIXME: Please refactor + * * @method * @param {Object} options needed to render */ askWikidataQuestion: function ( options ) { - var self = this; - - self.$( '.wg-notice' ).hide(); - self.$( '.wg-buttons' ).hide(); - self.$( '.spinner' ).show(); - self.$( '.wg-content' ).text( mw.msg( 'wikigrok-dialog-select-tags', options.title ) ); - self.$( '.footer' ).show(); - - self._renderSuggestions( options.campaign ); - - this.$save = this.$( '.save' ); - }, - - /** - * Show the error message - * @method - */ - showError: function () { - this.$( '.pane.content' ).hide(); - this.$( '.pane.error' ).show(); - this.show(); + this._renderSuggestions( options.campaign ); + this._showMainPane(); }, /** @@ -342,6 +306,9 @@ /** * Show a thank you message to the user for their contribution. Also log event. + * + * A different message is shown to the user if they have attempted to answer the question. + * * @method * @param {Object} options * @param {Boolean} answerAttempted has the user attempted to answer or @@ -353,18 +320,16 @@ this.rememberWikiGrokContribution(); // Choose an appropriate thanks message. if ( answerAttempted ) { - options.contentMsg = mw.msg( 'wikigrok-dialog-thanks' ); + this.$( '.pane.thanks .message' ).text( mw.msg( 'wikigrok-dialog-thanks' ) ); // change tellMoreMsg because we want to show the WikiGrokRoulette menu // item to the user if ( skin.getMainMenu().$el.find( '.wikigrok-roulette' ).length === 1 ) { - options.tellMoreMsg = mw.msg( 'wikigrok-dialog-contribute-more' ); + this.$( '.pane.thanks .tell-more' ).text( mw.msg( 'wikigrok-dialog-contribute-more' ) ); } - } else { - options.contentMsg = mw.msg( 'wikigrok-dialog-no-problem' ); } - // Re-render with new content for 'Thanks' step. - this.template = mw.template.get( 'ext.wikigrok.dialog', 'Thanks.hogan' ); - this.render( options ); + + this._showThanksPane(); + // Log the successful completion of WikiGrok task this.log( 'widget-impression-success' ); }, @@ -476,26 +441,78 @@ * @inheritdoc */ postRender: function ( options ) { - var self = this; + if ( options.campaign && !options.beginQuestions ) { - self.$( '.tags, .footer, .spinner' ).hide(); - - // show the welcome screen once - if ( !options.beginQuestions ) { + // Show the intro pane once. options.beginQuestions = true; - this.reveal( options ); + + this._showIntroPane(); } }, /** - * Show WikiGrok dialog - * @method - * @param {Object} options + * Shows a pane while hiding the others. + * + * @param {String} pane The name of the pane. Either "intro", "content", "error", or "thanks" + * + * @private */ - reveal: function ( options ) { - if ( options.campaign ) { - this.show(); - } + _showPane: function ( pane ) { + var paneClass = '.' + pane; + + this.$( '.pane:not(' + paneClass + ')' ).hide(); + this.$( '.pane.' + pane ).show(); + this.show(); + }, + + /** + * Shows the "intro" pane. + * + * @private + */ + _showIntroPane: function () { + this._showPane( 'intro' ); + }, + + /** + * Shows the "main" pane. + * + * After the pane has been shown the next button is sized to match the "None of these" + * button so that there's no visual flicker when a claim is selected. + * + * @private + */ + _showMainPane: function () { + var noneWidth; + + this._showPane( 'main' ); + + noneWidth = this.$( '.pane.main .footer-button-container .none' ).outerWidth(); + + // Hard-code the "Next" button width to match the "None" button width. + // That way, when the buttons are switched, the width stays the same. + // This depends on the assumption that the "Next" button text is + // always shorter than the "None" button text. + this.$( '.footer .next' ) + .css( 'width', noneWidth ); + }, + + /** + * Shows the "error" pane. + * + * @private + */ + _showErrorPane: function () { + this._showPane( 'error' ); + }, + + /** + * Shows the "thanks" pane. + * + * @private + */ + _showThanksPane: function () { + this._showPane( 'thanks' ); }, /** diff --git a/resources/dialog/WikiGrokDialog.less b/resources/dialog/WikiGrokDialog.less index ff22daa..a5ff904 100644 --- a/resources/dialog/WikiGrokDialog.less +++ b/resources/dialog/WikiGrokDialog.less @@ -3,28 +3,22 @@ .wikigrok { clear: both; - margin-top: 1em; + margin: 1em 0; text-align: center; background-color: @grayLightest; - display: none; - .content { - padding: 1em @contentMargin; - margin: 0; - } + display: none; &.visible { display: block; } - .wg-close { - position: absolute; - top: 0; - right: 0; + .pane-content { + padding: 1em; } @bottomMargin: .8em; - .wg-content { + .message { font-size: 120%; line-height: 1.5; font-weight: bold; @@ -48,57 +42,38 @@ } } - .wg-buttons { - margin-bottom: .6em; - text-align: center; - - // For enwiki prototype only - .cancel, - .proceed { - width: 125px; - } - } - .tags { margin-bottom: .6em; - text-align: left; - } - - .wg-notice { - font-size: .8em; - margin-bottom: 0; - margin-top: 1em; text-align: left; } .footer { position: relative; text-align: left; - padding: .2em 0; - margin-top: .8em; + padding-left: 1em; + background-color: @grayLight; + overflow: hidden; - .mw-ui-button { - top: 0; - right: 0; - position: absolute; - bottom: 0; + .footer-message { + float: left; + margin: 0.625em 0; + padding-top: 0.3125em; + font-size: 0.8em; + color: @grayMediumDark; + + a:visited { + color: @linkColor; + } + } + + .footer-button-container { + float: right; } .next { display: none; } - .license { - display: inline-block; - // Needs to be larger than "None of these" button - // FIXME: Redo footer layout so it isn't necessary to hard-code this. - margin-right: 11.5em; - font-size: 0.8em; - color: @grayMediumDark; - // Needs to be at least as tall as button since button is absolutely - // positioned. This generally won't matter on mobile, but will on tablet. - min-height: 3em; - } } .pane.error { @@ -106,22 +81,16 @@ .background-size( auto, 3em ); background-position: center 1em; .background-image-svg-quick('w'); - display: none; - padding: 5em @contentMargin 1em; - margin: 0; + p { - font-size: 1em; font-weight: bold; margin: 0; } - button { - margin-top: 1em; - } - } - &.drawer { - .mw-ui-button { - margin-bottom: 0; + .pane-content { + padding: 5em @contentMargin 1em; } } } + + diff --git a/resources/dialog/WikiGrokError.hogan b/resources/dialog/WikiGrokError.hogan deleted file mode 100644 index f95838f..0000000 --- a/resources/dialog/WikiGrokError.hogan +++ /dev/null @@ -1,5 +0,0 @@ -<div class="pane error"> - <p>{{{errorMsgHeading}}}</p> - <p>{{{errorMsgBody}}}</p> - <button class="close inline mw-ui-button mw-ui-progressive">{{{errorOKBtnLbl}}}</button> -</div> diff --git a/resources/dialog/WikiGrokThanks.hogan b/resources/dialog/WikiGrokThanks.hogan deleted file mode 100644 index 8ba573f..0000000 --- a/resources/dialog/WikiGrokThanks.hogan +++ /dev/null @@ -1,6 +0,0 @@ -<div class="pane content"> - <p class="wg-content">{{contentMsg}}</p> - <p class="wg-link"> - <a href="#/wikigrok/about" class="mw-ui-button mw-ui-progressive mw-ui-block tell-more">{{tellMoreMsg}}</a> - </p> -</div> -- To view, visit https://gerrit.wikimedia.org/r/195552 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I53cb4dc800656f6a4bb053fd18903008af647fe9 Gerrit-PatchSet: 5 Gerrit-Project: mediawiki/extensions/WikiGrok Gerrit-Branch: master Gerrit-Owner: Phuedx <[email protected]> Gerrit-Reviewer: Bmansurov <[email protected]> Gerrit-Reviewer: Phuedx <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
