Catrope has uploaded a new change for review. https://gerrit.wikimedia.org/r/279256
Change subject: Add footer notice widget for invitations for feedback ...................................................................... Add footer notice widget for invitations for feedback Add a mw.echo.ui.FooterNoticeWidget that includes a link to a feedback survey, and three config variables: * $wgEchoShowFooterNotice: Enable this feature per wiki (Defaults to false) * $wgEchoFooterNoticeURL: The URL for the survey (Defaults to '') * User preference 'echo-dismiss-feedback-alert': determines whether the user permanently dismissed the feedback alert. (Defaults to false) Bug: T128937 Change-Id: I918a70beaba7b173e764519fe4fe0f780b61082d --- M Echo.php M Hooks.php M Resources.php M i18n/en.json M i18n/qqq.json A modules/icons/feedback.svg A modules/ooui/mw.echo.ui.FooterNoticeWidget.js M modules/ooui/mw.echo.ui.NotificationBadgeWidget.js A modules/ooui/styles/mw.echo.ui.FooterNoticeWidget.less M modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less 10 files changed, 208 insertions(+), 4 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo refs/changes/56/279256/1 diff --git a/Echo.php b/Echo.php index 4f59f5c..1c0784e 100644 --- a/Echo.php +++ b/Echo.php @@ -164,6 +164,13 @@ // Whether or not to enable a new talk page message alert for logged in users $wgEchoNewMsgAlert = true; +// Whether or not to show the footer feedback notice in the notifications popup +$wgEchoShowFooterNotice = false; + +// A URL for the survey that appears in the footer feedback notice in the +// notification popup +$wgEchoFooterNoticeURL = ''; + // Define which output formats are available for each notification category $wgEchoDefaultNotificationTypes = array( 'all' => array( @@ -486,6 +493,9 @@ // By default, send emails for each notification as they come in $wgDefaultUserOptions['echo-email-frequency'] = 0; /*EchoHooks::EMAIL_IMMEDIATELY*/ +// By default, do not dismiss the feedback alert +$wgDefaultUserOptions['echo-dismiss-feedback-alert' ] = 0; + if ( $wgAllowHTMLEmail ) { $wgDefaultUserOptions['echo-email-format'] = 'html'; /*EchoHooks::EMAIL_FORMAT_HTML*/ } else { diff --git a/Hooks.php b/Hooks.php index faddf80..da17390 100644 --- a/Hooks.php +++ b/Hooks.php @@ -249,7 +249,8 @@ public static function getPreferences( $user, &$preferences ) { global $wgEchoDefaultNotificationTypes, $wgAuth, $wgEchoEnableEmailBatch, $wgEchoNotifiers, $wgEchoNotificationCategories, $wgEchoNotifications, - $wgEchoNewMsgAlert, $wgAllowHTMLEmail, $wgEchoUseCrossWikiBetaFeature; + $wgEchoNewMsgAlert, $wgAllowHTMLEmail, $wgEchoUseCrossWikiBetaFeature, + $wgEchoShowFooterNotice; // Show email frequency options $never = wfMessage( 'echo-pref-email-frequency-never' )->plain(); @@ -422,6 +423,12 @@ if ( isset( $wgEchoNotifications['edit-user-talk'] ) ) { $preferences['enotifusertalkpages']['type'] = 'hidden'; unset( $preferences['enotifusertalkpages']['section'] ); + } + + if ( $wgEchoShowFooterNotice ) { + $preferences['echo-dismiss-feedback-alert'] = array( + 'type' => 'api', + ); } return true; @@ -785,6 +792,11 @@ $seenAlertTime = EchoSeenTime::newFromUser( $user )->getTime( 'alert' ); $seenMsgTime = EchoSeenTime::newFromUser( $user )->getTime( 'message' ); + + $sk->getOutput()->addJsConfigVars( 'wgEchoInitialNotifCount', array( + 'alert' => $alertCount, + 'message' => $msgCount + ) ); $sk->getOutput()->addJsConfigVars( 'wgEchoSeenTime', array( 'alert' => $seenAlertTime, @@ -1205,7 +1217,12 @@ } public static function onResourceLoaderGetConfigVars( &$vars ) { + global $wgEchoShowFooterNotice, $wgEchoFooterNoticeURL; + $vars['wgEchoMaxNotificationCount'] = MWEchoNotifUser::MAX_BADGE_COUNT; + $vars['wgEchoShowFooterNotice'] = $wgEchoShowFooterNotice; + $vars['wgEchoFooterNoticeURL'] = $wgEchoFooterNoticeURL; + return true; } diff --git a/Resources.php b/Resources.php index 02cbdd1..1079eff 100644 --- a/Resources.php +++ b/Resources.php @@ -74,6 +74,7 @@ 'ooui/mw.echo.ui.BundledNotificationGroupWidget.js', 'ooui/mw.echo.ui.ActionMenuPopupWidget.js', 'ooui/mw.echo.ui.MenuItemWidget.js', + 'ooui/mw.echo.ui.FooterNoticeWidget.js', ), 'styles' => array( 'ooui/styles/mw.echo.ui.overlay.less', @@ -83,6 +84,7 @@ 'ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less', 'ooui/styles/mw.echo.ui.BundledNotificationGroupWidget.less', 'ooui/styles/mw.echo.ui.MenuItemWidget.less', + 'ooui/styles/mw.echo.ui.FooterNoticeWidget.less', ), 'skinStyles' => array( 'monobook' => array( @@ -124,6 +126,9 @@ 'echo-notification-message', 'echo-notification-loginrequired', 'echo-notification-popup-loginrequired', + 'echo-popup-footer-feedback', + 'echo-popup-footer-feedback-survey', + 'echo-popup-footer-feedback-info', 'notification-link-text-collapse-all', "notification-link-text-expand-alert-count", "notification-link-text-expand-message-count", diff --git a/i18n/en.json b/i18n/en.json index 77f930d..577cd8f 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -85,6 +85,9 @@ "echo-none": "You have no notifications.", "echo-more-info": "More info", "echo-feedback": "Feedback", + "echo-popup-footer-feedback": "Provide feedback. [$2 $1]", + "echo-popup-footer-feedback-survey": "Take this quick survey about notifications.", + "echo-popup-footer-feedback-info": "This feedback link is designed to help the developers learn more about how people use Notifications so we continue to improve the tool. Clicking the survey link will send you to a third-party website.", "echo-quotation-marks": "\"$1\"", "echo-api-failure": "Could not retrieve notifications. Please try again. (Error $1)", "echo-api-failure-cross-wiki": "Access to the remote domain was denied.", diff --git a/i18n/qqq.json b/i18n/qqq.json index a1e7b8a..cad170b 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -76,6 +76,9 @@ "echo-none": "Message shown to users who have no notifications. Also shown in the overlay.", "echo-more-info": "This is used for the title (mouseover text) of an icon that links to a page with more information about the Echo extension.\n{{Identical|More information}}", "echo-feedback": "Text for a link that goes to a feedback survey shown at [[Special:Notifications]].\n{{Identical|Feedback}}", + "echo-popup-footer-feedback": "Text introducing the feedback link in a feedback alert in the notifications popup.\n\nParameters:\n* $1 - Text of the feedback link.\n* $2 - Link for the specific feedback.", + "echo-popup-footer-feedback-survey": "Text introducing the survey feedback link itself in the feedback alert in the notification popup.", + "echo-popup-footer-feedback-info": "Text for the popup that shows on hover over the info icon in the notification popup feedback alert.", "echo-quotation-marks": "Unused at this time.\n\n{{optional}}\nPuts the edit summary in quotation marks. Only translate if different than English.\n\nParameters:\n* $1 - ...", "echo-api-failure": "Label for the text that notes an error in retrieving notifications for the Echo popup.\n$1 - The api error code.", "echo-api-failure-cross-wiki": "Label for the api failure text for a failure to fetch cross-wiki notifications, but the remote server is not granted access.", diff --git a/modules/icons/feedback.svg b/modules/icons/feedback.svg new file mode 100644 index 0000000..fc6b955 --- /dev/null +++ b/modules/icons/feedback.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch --> + <title>feedback</title> + <desc>Created with Sketch.</desc> + <defs> + <path id="path-1" d="M8.35406072,21.387126 L9.34667097,24.9542505 C9.6941685,26.2511317 11.2009455,27.025063 12.4978239,26.6775654 C13.7181068,26.3505929 14.4656449,25.0094214 14.1181419,23.712543 L13.4521761,21.3856056 L29,21.3867213 L24.1497187,3 L1.27068388,15.9869465 C0.5243271,17.2796767 1.42475534,20.6506872 2.71201112,21.3871862 L8.35406072,21.387126 Z"></path> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="feedback"> + <g id="Page-1"> + <use fill="#165CA0" fill-rule="evenodd" xlink:href="#path-1"></use> + <use fill="none" xlink:href="#path-1"></use> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/modules/ooui/mw.echo.ui.FooterNoticeWidget.js b/modules/ooui/mw.echo.ui.FooterNoticeWidget.js new file mode 100644 index 0000000..2df05fb --- /dev/null +++ b/modules/ooui/mw.echo.ui.FooterNoticeWidget.js @@ -0,0 +1,94 @@ +( function ( mw, $ ) { + /** + * Footer notice widget. + * + * @class + * @extends OO.ui.Widget + * + * @constructor + * @param {Object} [config] Configuration object + * @cfg {string} [iconUrl] The source URL of the feedback icon + * @cfg {string} [url] The URL for the survey + */ + mw.echo.ui.FooterNoticeWidget = function MwEchoUiFooterNoticeWidget( config ) { + var $icon, label, dismissButton, infoIcon, + $row = $( '<div>' ) + .addClass( 'mw-echo-ui-footerNoticeWidget-row' ); + + config = config || {}; + + // Parent constructor + mw.echo.ui.FooterNoticeWidget.parent.call( this, config ); + + if ( config.iconUrl ) { + $icon = $( '<div>' ) + .addClass( 'mw-echo-ui-footerNoticeWidget-icon' ) + .append( $( '<img>' ).attr( 'src', config.iconUrl ) ); + + $row.append( $icon ); + } + + label = new OO.ui.LabelWidget( { + label: $( '<span>' ).append( + mw.message( 'echo-popup-footer-feedback', + // Text + mw.msg( 'echo-popup-footer-feedback-survey' ), + // Link + config.url + ).parse() + ).contents(), + classes: [ 'mw-echo-ui-footerNoticeWidget-label' ] + } ); + + dismissButton = new OO.ui.ButtonWidget( { + icon: 'close', + framed: false, + classes: [ 'mw-echo-ui-footerNoticeWidget-dismiss' ] + } ); + + infoIcon = new OO.ui.ButtonWidget( { + icon: 'info', + framed: false, + title: mw.msg( 'echo-popup-footer-feedback-info' ), + classes: [ 'mw-echo-ui-footerNoticeWidget-info' ] + } ); + + // Events + dismissButton.connect( this, { click: 'onDismissButtonClick' } ); + + this.$element + .addClass( 'mw-echo-ui-footerNoticeWidget' ) + .append( + $row + .append( + label.$element, + infoIcon.$element, + dismissButton.$element + ) + ); + }; + + /* Initialization */ + + OO.inheritClass( mw.echo.ui.FooterNoticeWidget, OO.ui.Widget ); + + /* Events */ + + /** + * The notice was dismissed. + * + * @event dismiss + */ + + /* Methods */ + + /** + * Respond to dismiss button click. + * + * @fires dismiss + */ + mw.echo.ui.FooterNoticeWidget.prototype.onDismissButtonClick = function () { + this.toggle( false ); + this.emit( 'dismiss' ); + }; +} )( mediaWiki, jQuery ); diff --git a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js index 4ace01e..a903fa6 100644 --- a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js +++ b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js @@ -25,7 +25,8 @@ * for popups. */ mw.echo.ui.NotificationBadgeWidget = function MwEchoUiNotificationBadgeButtonPopupWidget( model, config ) { - var buttonFlags, allNotificationsButton, preferencesButton, footerButtonGroupWidget, $footer; + var buttonFlags, allNotificationsButton, preferencesButton, footerButtonGroupWidget, $footer, + initialNotifCount, notice; config = config || {}; config.links = config.links || {}; @@ -95,11 +96,31 @@ } ); footerButtonGroupWidget = new OO.ui.ButtonGroupWidget( { - items: [ allNotificationsButton, preferencesButton ] + items: [ allNotificationsButton, preferencesButton ], + classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons' ] } ); $footer = $( '<div>' ) .addClass( 'mw-echo-ui-notificationBadgeButtonPopupWidget-footer' ) .append( footerButtonGroupWidget.$element ); + + // Footer notice + initialNotifCount = mw.config.get( 'wgEchoInitialNotifCount' ); + initialNotifCount = this.type === 'all' ? ( initialNotifCount.alert + initialNotifCount.message ) : initialNotifCount[ this.type ]; + if ( + mw.config.get( 'wgEchoShowFooterNotice' ) && + !mw.user.options.get( 'echo-dismiss-feedback-alert' ) && + initialNotifCount >= 5 + ) { + notice = new mw.echo.ui.FooterNoticeWidget( { + // This is probably not the right way of doing this + iconUrl: mw.config.get( 'wgExtensionAssetsPath' ) + '/Echo/modules/icons/feedback.svg', + url: mw.config.get( 'wgEchoFooterNoticeURL' ) + } ); + // Event + notice.connect( this, { dismiss: 'onFooterNoticeDismiss' } ); + // Prepend to the footer + $footer.prepend( notice.$element ); + } this.popup = new OO.ui.PopupWidget( { $content: this.notificationsWidget.$element, @@ -187,6 +208,16 @@ /* Methods */ + mw.echo.ui.NotificationBadgeWidget.prototype.onFooterNoticeDismiss = function () { + // Clip again to recalculate height + this.popup.clip(); + + // Save the preference in general + new mw.Api().saveOption( 'echo-dismiss-feedback-alert', 1 ); + // Save the preference for this session + mw.user.options.set( 'echo-dismiss-feedback-alert', 1 ); + }; + /** * Respond to badge button click */ diff --git a/modules/ooui/styles/mw.echo.ui.FooterNoticeWidget.less b/modules/ooui/styles/mw.echo.ui.FooterNoticeWidget.less new file mode 100644 index 0000000..913426c --- /dev/null +++ b/modules/ooui/styles/mw.echo.ui.FooterNoticeWidget.less @@ -0,0 +1,24 @@ +@import '../../echo.variables'; + +.mw-echo-ui-footerNoticeWidget { + padding: 0.5em; + border-bottom: 1px solid #DDDDDD; + + &-row { + display: table-row; + } + + &-dismiss, + &-info, + &-label { + display: table-cell; + } + + &-label { + width: 100%; + } + + &-icon { + padding-right: 0.5em; + } +} diff --git a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less index b4149b8..226451b 100644 --- a/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less +++ b/modules/ooui/styles/mw.echo.ui.NotificationBadgeWidget.less @@ -51,7 +51,7 @@ display: block; } - .oo-ui-buttonElement { + .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement { display: table-cell; white-space: normal; font-weight: bold; -- To view, visit https://gerrit.wikimedia.org/r/279256 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I918a70beaba7b173e764519fe4fe0f780b61082d Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Echo Gerrit-Branch: wmf/1.27.0-wmf.18 Gerrit-Owner: Catrope <roan.katt...@gmail.com> Gerrit-Reviewer: Mooeypoo <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits