jenkins-bot has submitted this change and it was merged.
Change subject: Various improvements to mobile notifications...
......................................................................
Various improvements to mobile notifications...
Enable loading more than 20 notifications in the archive view
Set up logging capability and turn on logging for archives
and overlay view.
Disable notallunread api param for now since it doesn't do
anything yet (except throw a warning).
Add 'All notifications' link to notifications overlay.
Only load notifications overlay code for logged in users in Beta
or Alpha mode.
Also updating echo API calls per changes in Echo.
Dependency: I9fa8c4501e038ded9125c3b43e5207c355af2db9
Change-Id: I378158023cdf769cf3c4eb746f25d9f375101e4d
---
M includes/Resources.php
M includes/skins/SkinMobileBeta.php
M includes/specials/SpecialMobileNotifications.php
R javascripts/modules/NotificationsOverlay.js
A javascripts/specials/notifications.js
R less/modules/NotificationsOverlay.less
M less/specials/notifications.less
M templates/overlays/notifications.html
8 files changed, 191 insertions(+), 21 deletions(-)
Approvals:
JGonera: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index fc36ad7..c9cd1d4 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -319,7 +319,7 @@
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
- // notifications.js
+ // NotificationsOverlay.js
'overlays/notifications',
// page.js
'pageActionTutorial',
@@ -355,7 +355,6 @@
),
'scripts' => array(
'javascripts/modules/mf-toggle-dynamic.js',
- 'javascripts/modules/notifications.js',
'javascripts/modules/talk/talk.js',
'javascripts/modules/search/pageImages.js',
'javascripts/modules/languages/preferred.js',
@@ -704,12 +703,38 @@
// stop flash of unstyled content when loading from cache
'position' => 'top',
),
- 'mobile.notifications.styles' => $wgMFMobileResourceBoilerplate + array(
+ 'mobile.notifications.special.styles' =>
$wgMFMobileSpecialPageResourceBoilerplate + array(
'styles' => array(
'less/specials/notifications.less',
),
'position' => 'top',
),
+ 'mobile.notifications.special.scripts' =>
$wgMFMobileSpecialPageResourceScriptBoilerplate + array(
+ 'scripts' => array(
+ 'javascripts/specials/notifications.js',
+ ),
+ 'messages' => array(
+ // defined in Echo
+ 'echo-load-more-error',
+ ),
+ ),
+ 'mobile.notifications.overlay' => $wgMFMobileResourceBoilerplate +
array(
+ 'dependencies' => array(
+ 'mobile.stable',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/NotificationsOverlay.js',
+ ),
+ 'styles' => array(
+ 'less/modules/NotificationsOverlay.less',
+ ),
+ 'messages' => array(
+ // defined in Echo
+ 'echo-none',
+ 'notifications',
+ 'echo-overlay-link',
+ ),
+ ),
'mobile.search.styles' => $wgMFMobileSpecialPageResourceBoilerplate +
array(
'styles' => array(
'less/specials/search.less',
diff --git a/includes/skins/SkinMobileBeta.php
b/includes/skins/SkinMobileBeta.php
index c290a37..60db1a8 100644
--- a/includes/skins/SkinMobileBeta.php
+++ b/includes/skins/SkinMobileBeta.php
@@ -23,6 +23,9 @@
public function getDefaultModules() {
$modules = parent::getDefaultModules();
$modules['beta'] = array( 'mobile.beta' );
+ if ( $this->getUser()->isLoggedIn() ) {
+ $modules['beta'][] = 'mobile.notifications.overlay';
+ }
return $modules;
}
diff --git a/includes/specials/SpecialMobileNotifications.php
b/includes/specials/SpecialMobileNotifications.php
index 2cd8c80..f2b4baf 100644
--- a/includes/specials/SpecialMobileNotifications.php
+++ b/includes/specials/SpecialMobileNotifications.php
@@ -5,6 +5,7 @@
class SpecialMobileNotifications extends SpecialNotifications {
public function execute( $par ) {
$out = $this->getOutput();
+ $out->addModuleStyles( 'mobile.notifications.special.styles' );
$title = $out->getRequest()->getText( 'returnto' );
$title = Title::newFromText( $title );
if ( $title ) {
@@ -15,5 +16,14 @@
);
}
parent::execute( $par );
+ $out->addModules( 'mobile.notifications.special.scripts' );
+ }
+
+ /**
+ * Don't show this page on Special:SpecialPages
+ * @return false
+ */
+ public function isListed() {
+ return false;
}
}
diff --git a/javascripts/modules/notifications.js
b/javascripts/modules/NotificationsOverlay.js
similarity index 73%
rename from javascripts/modules/notifications.js
rename to javascripts/modules/NotificationsOverlay.js
index 04b4ae3..300db0c 100644
--- a/javascripts/modules/notifications.js
+++ b/javascripts/modules/NotificationsOverlay.js
@@ -8,9 +8,11 @@
className: 'mw-mf-overlay list-overlay',
template: M.template.get( 'overlays/notifications' ),
defaults: {
- heading: mw.msg( 'notifications' )
+ heading: mw.msg( 'notifications' ),
+ archiveLink: mw.util.wikiGetlink(
'Special:Notifications' ),
+ archiveLinkMsg: mw.msg( 'echo-overlay-link' )
},
- _error: function() {
+ onError: function() {
// Fall back to notifications archive page.
window.location.href = this.$badge.attr( 'href'
);
},
@@ -30,13 +32,12 @@
this.$badge = options.$badge;
// On error use the url as a fallback
if ( options.error ) {
- this._error();
+ this.onError();
} else {
api.get( {
action : 'query',
meta : 'notifications',
notformat : 'flyout',
- notallunread : true,
notprop : 'index|list|count'
} ).done( function ( result ) {
var notifications;
@@ -45,7 +46,7 @@
return {
message: a['*'], timestamp: a.timestamp.mw };
} );
} else {
- this._error();
+ self.onError();
}
// Add the notifications to the
overlay
@@ -56,29 +57,35 @@
}
self.render( options );
- // If there is a primary link,
make the entire notification clickable.
- $( '.mw-echo-notification'
).each( function() {
+ self.$( '.mw-echo-notification'
).each( function() {
var $notification = $(
this ),
$primaryLink =
$notification.find( '.mw-echo-notification-primary-link' );
+ // If there is a
primary link, make the entire notification clickable.
if (
$primaryLink.length ) {
-
$notification.css( 'cursor', 'pointer' );
-
$notification.click( function() {
+
$notification.addClass( 'mw-echo-linked-notification' );
+
$notification.on( 'click', function() {
window.location.href = $primaryLink.attr( 'href' );
} );
}
+ // Set up event logging
for each notification
+ mw.loader.using(
'ext.echo.base', function() {
+
mw.echo.setupNotificationLogging( $notification, 'mobile-overlay' );
+ } );
} );
self.markAllAsRead();
} ).fail( function () {
- self._error();
+ self.onError();
} );
}
},
markAllAsRead: function() {
- api.post( {
- action: 'query',
- meta: 'notifications',
- notmarkallread : true
+ api.getToken( 'edit' ).done( function( token ) {
+ api.post( {
+ action : 'echomarkread',
+ all : true,
+ token : token
+ } );
} );
},
postRender: function( options ) {
diff --git a/javascripts/specials/notifications.js
b/javascripts/specials/notifications.js
new file mode 100644
index 0000000..9ab3a09
--- /dev/null
+++ b/javascripts/specials/notifications.js
@@ -0,0 +1,113 @@
+( function( M, $ ) {
+
+ var api = M.require( 'api' ),
+ notContinue = null,
+ header = '',
+ processing = false;
+
+ function initialize() {
+ // Convert more link into a button and bind to loadMore function
+ $( '#mw-echo-more' )
+ .addClass( 'button' )
+ .on( 'click', function ( ev ) {
+ ev.preventDefault();
+ if ( !processing ) {
+ processing = true;
+ loadMore();
+ }
+ } );
+ notContinue = mw.config.get( 'wgEchoNextContinue' );
+ header = mw.config.get( 'wgEchoDateHeader' );
+ mw.loader.using( 'ext.echo.base', function() {
+ $( '.mw-echo-notification' ).each( function () {
+ mw.echo.setupNotificationLogging( $( this ),
'mobile-archive' );
+ } );
+ } );
+ }
+
+ /**
+ * Load more notification records.
+ */
+ function loadMore() {
+ var notifications, data, container, $li, unread = [];
+
+ api.get( {
+ action : 'query',
+ meta : 'notifications',
+ notformat : 'html',
+ notprop : 'index|list',
+ notcontinue: notContinue,
+ notlimit: mw.config.get( 'wgEchoDisplayNum' )
+ } ).done( function ( result ) {
+ container = $( '#mw-echo-special-container' );
+ notifications = result.query.notifications;
+ unread = [];
+
+ $.each( notifications.index, function ( index, id ) {
+ data = notifications.list[id];
+
+ if ( header !== data.timestamp.date ) {
+ header = data.timestamp.date;
+ $( '<li>' ).addClass(
'mw-echo-date-section' ).append( header ).appendTo( container );
+ }
+
+ $li = $( '<li>' )
+ .data( 'details', data )
+ .data( 'id', id )
+ .addClass( 'mw-echo-notification' )
+ .attr( {
+ // To facilitate debugging /
bug reports
+ 'data-notification-event':
data.id
+ } )
+ .append( data['*'] )
+ .appendTo( container );
+
+ if ( !data.read ) {
+ $li.addClass( 'mw-echo-unread' );
+ unread.push( id );
+ }
+ mw.loader.using( 'ext.echo.base', function() {
+ mw.echo.setupNotificationLogging( $li,
'mobile-archive' );
+ } );
+ } );
+
+ notContinue = notifications['continue'];
+ if ( unread.length > 0 ) {
+ markAsRead( unread );
+ } else {
+ onSuccess();
+ }
+ } ).fail( function () {
+ onError();
+ } );
+ }
+
+ /**
+ * Mark notifications as read.
+ */
+ function markAsRead( unread ) {
+ api.getToken( 'edit' ).done( function( token ) {
+ api.post( {
+ action : 'echomarkread',
+ list : unread.join( '|' ),
+ token : token
+ } ).done( onSuccess ).fail( onError );
+ } ).fail( onError );
+ }
+
+ function onSuccess() {
+ if ( !notContinue ) {
+ $( '#mw-echo-more' ).hide();
+ }
+ processing = false;
+ }
+
+ function onError() {
+ // TODO: Show detail error message based on error code
+ $( '#mw-echo-more' ).text( mw.msg( 'echo-load-more-error' ) );
+ processing = false;
+ }
+
+ initialize();
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/notifications.less
b/less/modules/NotificationsOverlay.less
similarity index 62%
rename from less/modules/notifications.less
rename to less/modules/NotificationsOverlay.less
index c9b559f..f3845cb 100644
--- a/less/modules/notifications.less
+++ b/less/modules/NotificationsOverlay.less
@@ -2,6 +2,9 @@
.mw-mf-overlay {
+ .mw-mf-notifications {
+ padding-bottom: 0;
+ }
.mw-echo-icon {
width: 30px;
height: 30px;
@@ -12,7 +15,7 @@
margin-left: 40px;
}
.mw-echo-notification-footer {
- font-size: 0.8em;
+ font-size: 0.75em;
}
.mw-echo-notification-primary-link {
display: none;
@@ -20,4 +23,11 @@
.mw-echo-notification:hover {
background-color: #F9F9F9;
}
+ .mw-echo-linked-notification {
+ cursor: pointer;
+ }
+ #notifications-archive-link {
+ display: block;
+ padding: 12px 0 20px 40px;
+ }
}
diff --git a/less/specials/notifications.less b/less/specials/notifications.less
index 26ba971..15aafc3 100644
--- a/less/specials/notifications.less
+++ b/less/specials/notifications.less
@@ -1,5 +1,6 @@
@import '../variables.less';
-.mw-echo-unread .mw-echo-title {
- font-weight: bold;
-}
+
+#mw-echo-more {
+ margin: 1em 0;
+}
\ No newline at end of file
diff --git a/templates/overlays/notifications.html
b/templates/overlays/notifications.html
index 59a9b54..bd784c6 100644
--- a/templates/overlays/notifications.html
+++ b/templates/overlays/notifications.html
@@ -11,3 +11,4 @@
</li>
{{/notifications}}
</ul>
+<a href="{{archiveLink}}"
id="notifications-archive-link">{{archiveLinkMsg}}</a>
--
To view, visit https://gerrit.wikimedia.org/r/82073
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I378158023cdf769cf3c4eb746f25d9f375101e4d
Gerrit-PatchSet: 25
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Legoktm <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
