jenkins-bot has submitted this change and it was merged.
Change subject: Story 834: Adding new notifications overlay
......................................................................
Story 834: Adding new notifications overlay
Change-Id: I844b179f6d7972433afb9921755503abf96397dc
---
M includes/Resources.php
A javascripts/modules/notifications.js
A less/modules/notifications.less
A stylesheets/modules/notifications.css
A templates/overlays/notifications.html
5 files changed, 151 insertions(+), 0 deletions(-)
Approvals:
Kaldari: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 58777bb..412ba9d 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -239,6 +239,8 @@
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
+ // notifications.js
+ 'overlays/notifications',
// talk.js
'overlays/talk',
'overlays/talkSectionAdd',
@@ -271,10 +273,12 @@
'mobile.beta.common',
),
'styles' => array(
+ 'stylesheets/modules/notifications.css',
'stylesheets/modules/talk.css',
),
'scripts' => array(
'javascripts/modules/mf-toggle-dynamic.js',
+ 'javascripts/modules/notifications.js',
'javascripts/modules/talk/TalkSectionOverlay.js',
'javascripts/modules/talk.js',
'javascripts/modules/search/pageImages.js',
@@ -306,6 +310,10 @@
'mobile-frontend-talk-reply-success',
'mobile-frontend-talk-reply',
'mobile-frontend-talk-reply-info',
+
+ // notifications.js (defined in Echo)
+ 'echo-none',
+ 'notifications',
),
),
diff --git a/javascripts/modules/notifications.js
b/javascripts/modules/notifications.js
new file mode 100644
index 0000000..158dfe1
--- /dev/null
+++ b/javascripts/modules/notifications.js
@@ -0,0 +1,92 @@
+( function( M, $ ) {
+ var Overlay = M.require( 'Overlay' ),
+ api = M.require( 'api' ),
+ NotificationsOverlay;
+
+ NotificationsOverlay = Overlay.extend( {
+ active: false,
+ className: 'mw-mf-overlay list-overlay',
+ template: M.template.get( 'overlays/notifications' ),
+ defaults: {
+ heading: mw.msg( 'notifications' )
+ },
+ _error: function() {
+ // Fall back to notifications archive page.
+ window.location.href = this.$badge.attr( 'href'
);
+ },
+ updateCount: function ( newCount ) {
+ var $count = this.$badge.find( 'span' );
+ $count.text( newCount );
+ if ( newCount === 0 ) {
+ $count.addClass( 'zero' );
+ } else {
+ $count.removeClass( 'zero' );
+ }
+ },
+ initialize: function( options ) {
+ var self = this;
+ this._super( options );
+ // Anchor tag that corresponds to a
notifications badge
+ this.$badge = options.$badge;
+ // On error use the url as a fallback
+ if ( options.error ) {
+ this._error();
+ } else {
+ api.get( {
+ action : 'query',
+ meta : 'notifications',
+ notformat : 'flyout',
+ notallunread : true,
+ notprop : 'index|list|count'
+ } ).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 };
+ } ).sort( function( a,
b ) {
+ // make sure
newer notifications are at the top
+ return
a.timestamp < b.timestamp;
+ } );
+ } else {
+ this._error();
+ }
+
+ // Add the notifications to the
overlay
+ if ( notifications.length ) {
+ options.notifications =
notifications;
+ } else {
+ options.errorMessage =
mw.msg( 'echo-none' );
+ }
+ self.render( options );
+ self.markAllAsRead();
+ } ).fail( function () {
+ self._error();
+ } );
+ }
+ },
+ markAllAsRead: function() {
+ api.post( {
+ action: 'query',
+ meta: 'notifications',
+ notmarkallread : true
+ } );
+ },
+ postRender: function( options ) {
+ this._super( options );
+ if ( options.notifications ||
options.errorMessage ) {
+ this.$( '.loading' ).remove();
+ // Reset the badge
+ this.updateCount( 0 );
+ }
+ }
+ } );
+
+ function init() {
+ $( '#user-button' ).on( 'click', function( ev ) {
+ ev.preventDefault();
+ new NotificationsOverlay( { $badge: $( this ) }
).show();
+ } );
+ }
+ init();
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/notifications.less b/less/modules/notifications.less
new file mode 100644
index 0000000..cad68d2
--- /dev/null
+++ b/less/modules/notifications.less
@@ -0,0 +1,19 @@
+@import "../mixins.less";
+
+
+.mw-mf-overlay {
+ .container {
+ // For loading spinner
+ min-height: 100px;
+ }
+
+ .mw-echo-icon {
+ width: 30px;
+ height: 30px;
+ float: left;
+ margin-right: 10px;
+ }
+ .mw-echo-content {
+ margin-left: 40px;
+ }
+}
diff --git a/stylesheets/modules/notifications.css
b/stylesheets/modules/notifications.css
new file mode 100644
index 0000000..f8efe95
--- /dev/null
+++ b/stylesheets/modules/notifications.css
@@ -0,0 +1,19 @@
+/**
+ * DO NOT EDIT THIS FILE
+ * This is an automatically generated css file.
+ * It was generated by LESS (http://lesscss.org).
+ * Please edit the corresponding less file instead.
+ * See README.mediawiki for details on installing.
+ */
+.mw-mf-overlay .container {
+ min-height: 100px;
+}
+.mw-mf-overlay .mw-echo-icon {
+ width: 30px;
+ height: 30px;
+ float: left;
+ margin-right: 10px;
+}
+.mw-mf-overlay .mw-echo-content {
+ margin-left: 40px;
+}
diff --git a/templates/overlays/notifications.html
b/templates/overlays/notifications.html
new file mode 100644
index 0000000..d7874a2
--- /dev/null
+++ b/templates/overlays/notifications.html
@@ -0,0 +1,13 @@
+<div class="header">
+ <button class="cancel">{{closeMsg}}</button>
+ <h2>{{heading}}</h2>
+</div>
+<div class="loading"></div>
+{{#errorMessage}}<div class="content">{{errorMessage}}</div>{{/errorMessage}}
+<ul class="mw-mf-notifications">
+ {{#notifications}}
+ <li class="mw-echo-notification">
+ {{{message}}}
+ </li>
+ {{/notifications}}
+</ul>
--
To view, visit https://gerrit.wikimedia.org/r/81133
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I844b179f6d7972433afb9921755503abf96397dc
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
