Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/153707
Change subject: E2d: Add the mark as read button to messages view
......................................................................
E2d: Add the mark as read button to messages view
Don't mark messages as read until they have been acted on.
Show a mark as read button that marks entire list as read.
Change-Id: I4450a66cffd11c67b9a4ba9aac0fe958dc760e15
---
M modules/overlay/ext.echo.overlay.js
M modules/overlay/ext.echo.overlay.less
M tests/qunit/overlay/test_ext.echo.overlay.js
3 files changed, 88 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/07/153707/1
diff --git a/modules/overlay/ext.echo.overlay.js
b/modules/overlay/ext.echo.overlay.js
index 0d0a6e7..853dba3 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -12,11 +12,13 @@
this._buildOverlay( apiResultNotifications );
}
- function EchoOverlayTab( name, notifications ) {
+ function EchoOverlayTab( options, notifications ) {
this.api = mw.echo.overlay.api;
- this.name = name;
+ this.markOnView = options.markOnView;
+ this.markAsReadCallback = options.markAsReadCallback;
+ this.name = options.name;
this.unread = [];
- this._buildList( notifications );
+ this._buildList( notifications[this.name] );
}
EchoOverlayTab.prototype = {
@@ -39,9 +41,10 @@
'token': mw.user.tokens.get(
'editToken' )
} ) ).then( function ( result ) {
return
result.query.echomarkread[self.name];
- } ).done( function() {
+ } ).done( function( result ) {
// reset internal state of unread
messages
self.unread = [];
+ self.markAsReadCallback( result );
} );
} else {
return new $.Deferred();
@@ -56,10 +59,21 @@
*/
_buildList: function( notifications ) {
var self = this,
- $ul = $( '<ul>' ).addClass(
'mw-echo-notifications' )
+ $container = $( '<div
class="mw-echo-notifications">' )
.data( 'tab', this )
- .css( 'max-height', $( window
).height() - 134 );
+ .css( 'max-height', $( window
).height() - 134 ),
+ $ul = $( '<ul>' ).appendTo( $container );
+ if ( !this.markOnView ) {
+ $( '<button class="mw-ui-button mw-ui-quiet">' )
+ .text( 'Mark all as read' )
+ .on( 'click', function() {
+ self.markAsRead().done(
function() {
+ self.$el.find(
'.mw-echo-unread' ).removeClass( 'mw-echo-unread' );
+ } );
+ } )
+ .appendTo( $container );
+ }
$.each( notifications.index, function ( index, id ) {
var $wrapper,
data = notifications.list[id],
@@ -123,7 +137,7 @@
mw.echo.setUpDismissability( $li );
}
} );
- this.$el = $ul;
+ this.$el = $container;
}
};
@@ -216,17 +230,15 @@
},
_showTabList: function( tab ) {
- var $lists = this.$el.find( '.mw-echo-notifications'
).hide(),
- self = this;
+ var $lists = this.$el.find( '.mw-echo-notifications'
).hide();
this.activeTabName = tab.name;
$lists.each( function() {
if ( $( this ).data( 'tab' ).name === tab.name
) {
$( this ).show();
- tab.markAsRead().done( function( data )
{
- self.updateBadgeCount(
data.count, data.rawcount );
- self._updateTitleElement();
- } );
+ if ( tab.markOnView ) {
+ tab.markAsRead();
+ }
}
} );
},
@@ -283,21 +295,27 @@
_buildOverlay: function ( notifications ) {
var tabs,
self = this,
+ options = {
+ markAsReadCallback: function( data ) {
+ self.updateBadgeCount(
data.count, data.rawcount );
+ self._updateTitleElement();
+ }
+ },
$overlay = $( '<div>' ).addClass(
'mw-echo-overlay' );
this.$el = $overlay;
if ( notifications.message.index.length ) {
- tabs = [ 'message', 'alert' ];
+ tabs = [ { name: 'message' }, { name: 'alert',
markOnView: true } ];
} else {
- tabs = [ 'alert' ];
+ tabs = [ { name: 'alert', markOnView: true } ];
}
- $.each( tabs, function( i, tabName ) {
- var tab = new EchoOverlayTab( tabName,
notifications[tabName] );
+ $.each( tabs, function( i, tabOptions ) {
+ var tab = new EchoOverlayTab( $.extend(
tabOptions, options ), notifications );
self.$el.append( tab.$el );
self.tabs.push( tab );
- self.notificationCount.all +=
notifications[tabName].index.length;
+ self.notificationCount.all +=
notifications[tabOptions.name].index.length;
} );
this.activeTabName = this.tabs[0].name;
diff --git a/modules/overlay/ext.echo.overlay.less
b/modules/overlay/ext.echo.overlay.less
index 4761b70..da34d6b 100644
--- a/modules/overlay/ext.echo.overlay.less
+++ b/modules/overlay/ext.echo.overlay.less
@@ -26,7 +26,7 @@
#p-personal {
.mw-echo-overlay-title ul,
- ul.mw-echo-notifications {
+ .mw-echo-notifications ul {
// override #p-personal ul in core
padding: 0;
}
@@ -46,6 +46,10 @@
.mw-echo-overlay {
.mw-echo-section-current {
font-weight: bold;
+ }
+
+ .mw-ui-progressive {
+ cursor: pointer;
}
a.mw-echo-grey-link {
@@ -109,6 +113,14 @@
line-height: 15px;
padding: 15px 15px 15px 28px;
border-bottom: 1px solid #DDDDDD;
+
+ button {
+ line-height: 15px;
+ top: 15px;
+ right: 15px;
+ position: absolute;
+ font: inherit;
+ }
}
/* override #p-personal li*/
diff --git a/tests/qunit/overlay/test_ext.echo.overlay.js
b/tests/qunit/overlay/test_ext.echo.overlay.js
index c1a52fb..71dddde 100644
--- a/tests/qunit/overlay/test_ext.echo.overlay.js
+++ b/tests/qunit/overlay/test_ext.echo.overlay.js
@@ -14,7 +14,9 @@
return new $.Deferred().resolve(
this.getNewNotificationCountData( data ) );
},
get: function() {
- var data = this.getData();
+ var i, id,
+ index = [], listObj = {},
+ data = this.getData();
if ( this.mode === 1 ) {
data.query.notifications.message = {
index: [ 100 ],
@@ -28,6 +30,18 @@
}
}
};
+ } else if ( this.mode === 2 ) {
+ for ( i = 0; i < 7; i++ ) {
+ id = 500 + i;
+ index.push( id );
+ listObj[id] = { '*':
'!', category: 'message', id: id, type: 'message' };
+ }
+
data.query.notifications.message = {
+ index: index,
+ list: listObj
+ };
+ data.query.notifications.count
= '7';
+
data.query.notifications.rawcount = 7;
}
return $.Deferred().resolve( data );
},
@@ -116,8 +130,8 @@
$overlay = $o;
} );
assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul
li' ).length, 1, 'Only one tab in header' );
- assert.strictEqual( $overlay.find( 'ul.mw-echo-notifications'
).length, 1, 'Overlay contains a list of notifications.' );
- assert.strictEqual( $overlay.find( 'ul.mw-echo-notifications
li' ).length, 2, 'There are two notifications.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-notifications'
).length, 1, 'Overlay contains a list of notifications.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-notifications li'
).length, 2, 'There are two notifications.' );
assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length,
1, 'There is one unread notification.' );
assert.strictEqual( $overlay.find( '#mw-echo-overlay-footer a'
).length, 2,
'There is a footer with 2 links to preferences and all
notifications.' );
@@ -186,4 +200,26 @@
true, 'Second tab is the selected tab.' );
} );
+ QUnit.test( 'Unread message behaviour', 4, function( assert ) {
+ var $overlay;
+
+ this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 2
) );
+ mw.echo.overlay.buildOverlay( function( $o ) {
+ $overlay = $o;
+ } );
+
+ // Test initial state
+ assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li
a' ).eq( 0 ).text(), 'Messages (7)',
+ 'Check the label has a count in it and it is not
automatically reset when tab is open.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length,
8, 'There are 8 unread notifications.' );
+
+ // Click mark as read
+ $overlay.find( '.mw-echo-notifications button' ).trigger(
'click' );
+ assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li
a' ).eq( 0 ).text(), 'Messages (0)',
+ 'Check all the notifications (even those outside
overlay) have been marked as read.' );
+ assert.strictEqual( $overlay.find( '.mw-echo-notifications '
).eq( 0 ).find( '.mw-echo-unread' ).length,
+ 0, 'There are now no unread notifications in this tab.'
);
+ } );
+
+
}( jQuery, mediaWiki ) );
--
To view, visit https://gerrit.wikimedia.org/r/153707
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4450a66cffd11c67b9a4ba9aac0fe958dc760e15
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: two_tabs
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
