github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-24 23:29:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement third state for notification list dropdown

Browse Source 
Related to #500.
This commit is contained in:
Franz Liedke 2015-09-29 00:50:28 +02:00
parent 9529ce9ba2
commit 1f7afb3e4a
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/forum/src/components/NotificationsDropdown.js
View File

@ -27,11 +27,12 @@ export default class NotificationsDropdown extends Dropdown {
}
getButton() {
const unread = this.getUnreadCount();
const newNotifications = this.getNewCount();
const vdom = super.getButton();
vdom.attrs.title = this.props.label;
vdom.attrs.className += (unread ? ' unread' : '');
vdom.attrs.className += (newNotifications ? ' new' : '');
vdom.attrs.onclick = this.onclick.bind(this);
return vdom;
@ -69,6 +70,12 @@ export default class NotificationsDropdown extends Dropdown {
}
getUnreadCount() {
return app.cache.notifications ?
app.cache.notifications.filter(notification => !notification.isRead()).length :
0;
}
getNewCount() {
return app.session.user.unreadNotificationsCount();
}

9
less/forum/NotificationsDropdown.less
View File

@ -24,14 +24,15 @@
}
}
.NotificationsDropdown .Dropdown-toggle.unread .Button-icon {
.NotificationsDropdown .Dropdown-toggle.new .Button-icon {
color: @header-color;
}
.NotificationsDropdown-unread {
position: absolute;
top: 1px;
left: 17px;
background: @header-color;
background: @control-color;
color: @header-bg;
font-size: 11px;
font-weight: bold;
@ -41,4 +42,8 @@
border: 1px solid @header-bg;
min-width: 18px;
height: 18px;
.new & {
background: @header-color;
}
}