This commit is contained in:
syuilo 2017-11-20 09:09:11 +09:00
parent 88804731d0
commit 842ec4f3d8
2 changed files with 69 additions and 6 deletions

View file

@ -27,4 +27,12 @@ export default (
// Publish notification event // Publish notification event
event(notifiee, 'notification', event(notifiee, 'notification',
await serialize(notification)); await serialize(notification));
// 3秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
setTimeout(async () => {
const fresh = await Notification.findOne({ _id: notification._id }, { is_read: true });
if (!fresh.is_read) {
event(notifiee, 'unread_notification', await serialize(notification));
}
}, 3000);
}); });

View file

@ -214,7 +214,9 @@
</mk-ui-header-post-button> </mk-ui-header-post-button>
<mk-ui-header-notifications> <mk-ui-header-notifications>
<button class="header" data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%"><i class="fa fa-bell-o"></i></button> <button data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
<i class="fa fa-bell-o icon"></i><i class="fa fa-circle badge" if={ hasUnreadNotifications }></i>
</button>
<div class="notifications" if={ isOpen }> <div class="notifications" if={ isOpen }>
<mk-notifications/> <mk-notifications/>
</div> </div>
@ -223,7 +225,7 @@
display block display block
float left float left
> .header > button
display block display block
margin 0 margin 0
padding 0 padding 0
@ -243,10 +245,16 @@
&:active &:active
color darken(#9eaba8, 30%) color darken(#9eaba8, 30%)
> i > .icon
font-size 1.2em font-size 1.2em
line-height 48px line-height 48px
> .badge
margin-left -5px
vertical-align super
font-size 10px
color $theme-color
> .notifications > .notifications
display block display block
position absolute position absolute
@ -290,8 +298,53 @@
<script> <script>
import contains from '../../common/scripts/contains'; import contains from '../../common/scripts/contains';
this.mixin('i');
this.mixin('api');
if (this.SIGNIN) {
this.mixin('stream');
this.connection = this.stream.getConnection();
this.connectionId = this.stream.use();
}
this.isOpen = false; this.isOpen = false;
this.on('mount', () => {
if (this.SIGNIN) {
this.connection.on('read_all_notifications', this.onReadAllNotifications);
this.connection.on('unread_notification', this.onUnreadNotification);
// Fetch count of unread notifications
this.api('notifications/get_unread_count').then(res => {
if (res.count > 0) {
this.update({
hasUnreadNotifications: true
});
}
});
}
});
this.on('unmount', () => {
if (this.SIGNIN) {
this.connection.off('read_all_notifications', this.onReadAllNotifications);
this.connection.off('unread_notification', this.onUnreadNotification);
this.stream.dispose(this.connectionId);
}
});
this.onReadAllNotifications = () => {
this.update({
hasUnreadNotifications: false
});
};
this.onUnreadNotification = () => {
this.update({
hasUnreadNotifications: true
});
};
this.toggle = () => { this.toggle = () => {
this.isOpen ? this.close() : this.open(); this.isOpen ? this.close() : this.open();
}; };
@ -424,9 +477,11 @@
this.mixin('i'); this.mixin('i');
this.mixin('api'); this.mixin('api');
if (this.SIGNIN) {
this.mixin('stream'); this.mixin('stream');
this.connection = this.stream.getConnection(); this.connection = this.stream.getConnection();
this.connectionId = this.stream.use(); this.connectionId = this.stream.use();
}
this.page = this.opts.page; this.page = this.opts.page;