jenkins-bot has submitted this change and it was merged.
Change subject: OOUIfying Echo in MobileFrontend
......................................................................
OOUIfying Echo in MobileFrontend
Bug: T124188
Depends-On: I4a8be19a79b9e38c21907bb9d4123540a648c535
Change-Id: I48ab73f9bb96c57230c7a3488ce40a6e9c476619
---
M includes/MobileFrontend.hooks.php
M jsduck.json
M resources/mobile.notifications.overlay/NotificationsOverlay.js
M resources/mobile.notifications.overlay/NotificationsOverlay.less
D resources/mobile.notifications.overlay/NotificationsOverlayContent.hogan
5 files changed, 77 insertions(+), 158 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index c66cc34..6c4bbed 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -1106,16 +1106,13 @@
'mobile.notifications.overlay' =>
$resourceBoilerplate + array(
'dependencies' => array(
'mobile.overlays',
- 'ext.echo.logger',
+ 'ext.echo.ui.mobile',
),
'scripts' => array(
'resources/mobile.notifications.overlay/NotificationsOverlay.js',
),
'styles' => array(
'resources/mobile.notifications.overlay/NotificationsOverlay.less',
- ),
- 'templates' => array(
- 'content.hogan' =>
'resources/mobile.notifications.overlay/NotificationsOverlayContent.hogan',
),
'messages' => array(
// defined in Echo
diff --git a/jsduck.json b/jsduck.json
index 720056c..22f2c7d 100644
--- a/jsduck.json
+++ b/jsduck.json
@@ -21,7 +21,8 @@
"OO.ui.Tool",
"OO.ui.mixin.LookupElement",
"OO.EventEmitter",
- "ve.init.mw.MobileArticleTarget"
+ "ve.init.mw.MobileArticleTarget",
+ "mw.echo.dm.NotificationItem"
],
"--warnings": ["-nodoc(class,public)", "-dup_member",
"-link_ambiguous"],
"--": [
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.js
b/resources/mobile.notifications.overlay/NotificationsOverlay.js
index 7078083..bdc9b27 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.js
@@ -1,7 +1,7 @@
( function ( M, $ ) {
var Overlay = M.require( 'mobile.overlays/Overlay' ),
- api = new mw.Api(),
- Anchor = M.require( 'mobile.startup/Anchor' );
+ Anchor = M.require( 'mobile.startup/Anchor' ),
+ NotificationsOverlay;
/**
* Overlay for notifications
@@ -9,91 +9,50 @@
* @extend Overlay
* @uses mw.Api
*/
- function NotificationsOverlay( options ) {
- var self = this;
+ NotificationsOverlay = function ( options ) {
+ var model, wrapperWidget,
+ echoApi = new mw.echo.api.EchoApi();
+
Overlay.apply( this, options );
+
// Anchor tag that corresponds to a notifications badge
this.$badge = options.$badge;
+ this.$overlay = $( '<div>' )
+ .addClass( 'notifications-overlay-overlay
position-fixed' );
+
// On error use the url as a fallback
if ( options.error ) {
this.onError();
- } else {
- // FIXME: Move to NotificationApi class
- api.get( {
- action: 'query',
- meta: 'notifications',
- notformat: 'flyout',
- notprop: 'index|list|count',
- uselang: 'user'
- } ).done( function ( result ) {
- var notifications;
- if ( result.query && result.query.notifications
) {
- notifications = $.map(
result.query.notifications.list, function ( a ) {
- return {
- message: a['*'],
- timestamp:
a.timestamp.mw,
- unread: (
a.hasOwnProperty( 'read' ) ? 'mw-echo-notification-read' :
'mw-echo-notification-unread' )
- };
- } ).sort( function ( a, b ) {
- return a.timestamp <
b.timestamp ? 1 : -1;
- } );
- if ( notifications.length ) {
- options.notifications =
notifications;
- } else {
- options.errorMessage = mw.msg(
'echo-none' );
- }
-
- self.render( options );
- self.$( '.mw-echo-notification' ).each(
function () {
- var $notification = $( this ),
- $primaryLink =
$notification.find( '.mw-echo-notification-primary-link' ),
- eventId =
$notification.attr( 'data-notification-event' ),
- eventType =
$notification.attr( 'data-notification-type' );
-
- // If there is a primary link,
make the entire notification clickable.
- if ( $primaryLink.length ) {
- $notification.addClass(
'mw-echo-linked-notification' );
- $notification.on(
'click', function () {
-
mw.echo.logger.logInteraction(
-
mw.echo.Logger.static.actions.notificationClick,
-
'mobile-overlay',
- eventId,
-
eventType,
- true
- );
-
window.location.href = $primaryLink.attr( 'href' );
- } );
- }
- // Log notification impression
- mw.echo.logger.logInteraction(
-
mw.echo.Logger.static.actions.notificationImpression,
- 'mobile-overlay',
- eventId,
- eventType,
- true
- );
- } );
- // Only fire 'mark as read' API call
when unread notification
- // count is not zero. Question: why
does this fire an API call
- // for 'mark all as read', the overlay
may not load all unread
- // notifications
- if (
result.query.notifications.rawcount !== 0 ) {
- self.markAllAsRead();
- }
- } else {
- self.onError();
- }
- } ).fail( function () {
- self.onError();
- } );
+ return;
}
- }
+
+ model = new mw.echo.dm.NotificationsModel(
+ echoApi,
+ { type: 'all' }
+ );
+
+ wrapperWidget = new mw.echo.ui.MobileNotificationsWrapper(
model, {
+ $overlay: this.$overlay
+ } );
+
+ // Events
+ wrapperWidget.connect( this, {
+ unreadChange: 'onUnreadChange'
+ } );
+
+ // Initialize
+ this.$( '.overlay-content' ).append(
+ wrapperWidget.$element,
+ this.$overlay
+ );
+
+ // Populate notifications
+ wrapperWidget.populate()
+ .then( model.updateSeenTime.bind( model, 'all' ) );
+ };
OO.mfExtend( NotificationsOverlay, Overlay, {
className: 'overlay notifications-overlay navigation-drawer',
- templatePartials: $.extend( {},
Overlay.prototype.templatePartials, {
- content: mw.template.get(
'mobile.notifications.overlay', 'content.hogan' )
- } ),
/**
* @inheritdoc
* @cfg {Object} defaults Default options hash.
@@ -116,22 +75,17 @@
window.location.href = this.$badge.attr( 'href' );
},
/**
- * Mark as read. Change the UI only, no API request.
+ * Update the unread number on the notifications badge
+ *
+ * @param {mw.echo.dm.NotificationItem} items An array of the
unread items
* @method
*/
- markAsRead: function () {
- this.$badge.find( '.notification-count' ).remove();
- },
- /**
- * Mark notifications as read in the server. Make an API
request.
- * @method
- */
- markAllAsRead: function () {
- // FIXME: Move to NotificationApi class
- api.postWithToken( 'edit', {
- action: 'echomarkread',
- all: true
- } );
+ onUnreadChange: function ( items ) {
+ if ( items.length > 0 ) {
+ this.$badge.find( '.notification-count' ).text(
items.length );
+ } else {
+ this.$badge.find( '.notification-count'
).remove();
+ }
},
/** @inheritdoc */
preRender: function () {
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.less
b/resources/mobile.notifications.overlay/NotificationsOverlay.less
index 14dbe8c..86a7573 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.less
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.less
@@ -11,6 +11,31 @@
position: static !important;
}
+ &-overlay {
+ position: absolute;
+ bottom: 3.35em;
+ right: 0;
+ left: 0;
+ z-index: 1;
+
+ .mw-echo-ui-actionMenuPopupWidget-menu {
+ padding: 0.5em;
+ font-size: 1.5em;
+ border: 0;
+ box-shadow: none;
+ border: 1px solid #666666;
+ // Override the positioning of the menu
+ // so it is "stuck" on the bottom of the
+ // notification overlay panel
+ position: static !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ width: 100% !important;
+ height: auto !important;
+ top: auto !important;
+ }
+ }
+
.overlay-content {
// this is needed not only on iOS, that's why we repeat it here
even though
// it's in Overlay.less too
@@ -20,61 +45,12 @@
bottom: @headerHeight;
width: 100%;
margin-top: 1px;
- }
+ padding-bottom: 0;
- .mw-echo-icon {
- width: 30px;
- height: 30px;
- float: left;
- margin: 0 10px 0 0;
- }
-
- .mw-echo-content {
- margin-left: 40px;
- font-size: .9em;
- line-height: 1.4;
- }
-
- .mw-echo-notification-footer {
- margin-top: .6em;
- font-size: .9em;
- }
-
- .mw-echo-notification-primary-link {
- display: none;
- }
-
- .mw-echo-notification {
- padding: 1.2em 1em 1em;
- border-bottom: 1px solid @colorGray13;
- // FIXME: ARgghghghg more grays - think of the children!
- background: #F1F1F1;
-
- &:hover {
- // FIXME: Yet another gray..
- background-color: @colorGray15;
+ .mw-echo-ui-notificationsWidget {
+ top: @headerHeight;
+ height: 100%;
}
- }
-
- .mw-echo-notification-unread {
- background: white;
-
- &:hover {
- background-color: white;
- }
- }
-
- .mw-echo-linked-notification {
- cursor: pointer;
- }
-
- .mw-echo-title {
- font-size: 1em;
- line-height: 1.4;
- }
-
- .mw-echo-payload {
- margin-top: .4em
}
.user-button {
diff --git
a/resources/mobile.notifications.overlay/NotificationsOverlayContent.hogan
b/resources/mobile.notifications.overlay/NotificationsOverlayContent.hogan
deleted file mode 100644
index a3ffc4c..0000000
--- a/resources/mobile.notifications.overlay/NotificationsOverlayContent.hogan
+++ /dev/null
@@ -1,9 +0,0 @@
-{{{spinner}}}
-{{#errorMessage}}<div class="content">{{errorMessage}}</div>{{/errorMessage}}
-<ul class="mw-mf-notifications">
- {{#notifications}}
- <li class="mw-echo-notification {{unread}}">
- {{{message}}}
- </li>
- {{/notifications}}
-</ul>
--
To view, visit https://gerrit.wikimedia.org/r/237509
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I48ab73f9bb96c57230c7a3488ce40a6e9c476619
Gerrit-PatchSet: 17
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: Sbisson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
