wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-09-23 18:30:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Correct unseen animation in notifications

Browse source 
The unseen animation should display whether the option is unread or
read, because it should point out notifications that were unseen/new in
this session even if they are immediately marked as read (in cases
where the configuration is 'mark read when seen', like in alerts).

However, the animation itself switched by default to white background
which is an 'unread' state. This made cases like "mark all as read"
mark the notifications as read but still have a white background as
if they are unread, and yet have no 'x' button because they are actually
read. (Bear with me here)

This commit organizes the animation better. We now have a proper clear
naming for the two animations - unseen-to-read and unseen-to-unread and
we use unseen-to-read as default. unseen-to-unread is used when
the -unread class is applied and the other cases should reflect the
correct state of the option read/unread status.

Bug: T112826
Change-Id: I7fe8ea5dcf8c3e31d16213313be34b2350d03655
This commit is contained in:
Moriel Schottlender 2015-09-17 11:56:56 -07:00 committed by Catrope
parent 83c151746d
commit d67e474d46
2 changed files with 7 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/ooui/mw.echo.ui.NotificationOptionWidget.js
View file

@ -55,11 +55,6 @@
);
this.$element.toggleClass( 'mw-echo-ui-notificationOptionWidget-initiallyUnseen', !this.model.isSeen() );
if ( this.markReadWhenSeen ) {
this.$element.addClass( 'mw-echo-ui-notificationOptionWidget-markReadWhenSeen' );
}
};
/* Initialization */

14
modules/ooui/styles/mw.echo.ui.NotificationOptionWidget.less
View file

@ -39,8 +39,8 @@
}
&-initiallyUnseen {
-webkit-animation-name: unseen-fadeout;
animation-name: unseen-fadeout;
-webkit-animation-name: unseen-fadeout-to-read;
animation-name: unseen-fadeout-to-read;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-delay: 2s;
@ -50,9 +50,9 @@
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
&.mw-echo-ui-notificationOptionWidget-markReadWhenSeen {
-webkit-animation-name: unseen-fadeout-to-read;
animation-name: unseen-fadeout-to-read;
&.mw-echo-ui-notificationOptionWidget-unread {
-webkit-animation-name: unseen-fadeout-to-unread;
animation-name: unseen-fadeout-to-unread;
}
}
&-unread {
@ -73,12 +73,12 @@
// These styles are in modules/nojs/ext.echo.notifications.less
}
@-webkit-keyframes unseen-fadeout {
@-webkit-keyframes unseen-fadeout-to-unread {
from { background-color: @notification-background-unseen; }
to { background-color: @notification-background-unread; }
}
@keyframes unseen-fadeout {
@keyframes unseen-fadeout-to-unread {
from { background-color: @notification-background-unseen; }
to { background-color: @notification-background-unread; }
}