Mooeypoo has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/278208

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 two config variables: a global
$wgEchoShowFooterNotice to enable this feature selectively
on wikis and a localized user option
"echo-dismiss-feedback-alert" to allow the user to
permanently dismiss the alert.

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, 178 insertions(+), 5 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo 
refs/changes/08/278208/1

diff --git a/Echo.php b/Echo.php
index 500426b..ac84cec 100644
--- a/Echo.php
+++ b/Echo.php
@@ -168,6 +168,9 @@
 // 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;
+
 // Define which output formats are available for each notification category
 $wgEchoDefaultNotificationTypes = array(
        'all' => array(
@@ -492,6 +495,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 9c33464..f77803d 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,7 @@
 
                $seenAlertTime = EchoSeenTime::newFromUser( $user )->getTime( 
'alert' );
                $seenMsgTime = EchoSeenTime::newFromUser( $user )->getTime( 
'message' );
+
 
                $sk->getOutput()->addJsConfigVars( 'wgEchoSeenTime', array(
                        'alert' => $seenAlertTime,
@@ -1205,8 +1213,9 @@
        }
 
        public static function onResourceLoaderGetConfigVars( &$vars ) {
-               global $wgEchoMaxNotificationCount;
+               global $wgEchoMaxNotificationCount, $wgEchoShowFooterNotice;
                $vars['wgEchoMaxNotificationCount'] = 
$wgEchoMaxNotificationCount;
+               $vars['wgEchoShowFooterNotice'] = $wgEchoShowFooterNotice;
                return true;
        }
 
diff --git a/Resources.php b/Resources.php
index 28dd778..58c2c1b 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 3664901..df12ede 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 Wikimedia 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 0fdc838..ec2b965 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": "take this quick survey about 
notifications.",
+       "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..c26582d
--- /dev/null
+++ b/modules/ooui/mw.echo.ui.FooterNoticeWidget.js
@@ -0,0 +1,77 @@
+( function ( mw, $ ) {
+       /**
+        * Footer notice widget to display for the user.
+        *
+        * @class
+        * @extends OO.ui.OptionWidget
+        *
+        * @constructor
+        * @param {Object} [config] Configuration object
+        */
+       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.link
+                               ).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 );
+
+       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 d78a798..23b9cfe 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,
+                       notice;
 
                config = config || {};
                config.links = config.links || {};
@@ -94,11 +95,29 @@
                } );
 
                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
+               if (
+                       mw.config.get( 'wgEchoShowFooterNotice' ) &&
+                       !mw.user.options.get( 'echo-dismiss-feedback-alert' ) &&
+                       this.numItems >= 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',
+                               link: 
'https://wikimedia.qualtrics.com/SE/?SID=SV_eRMpgEPhVcUEkn3',
+                       } );
+                       // Event
+                       notice.connect( this, { dismiss: 
'onFooterNoticeDismiss' } );
+                       // Prepend to the footer
+                       $footer.prepend( notice.$element );
+               }
 
                this.popup = new OO.ui.PopupWidget( {
                        $content: this.notificationsWidget.$element,
@@ -186,6 +205,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/278208
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: master
Gerrit-Owner: 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