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

Reply via email to