github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-06-22 18:41:30 +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
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() { getButton() {
const unread = this.getUnreadCount(); const newNotifications = this.getNewCount();
const vdom = super.getButton(); const vdom = super.getButton();
vdom.attrs.title = this.props.label; vdom.attrs.title = this.props.label;
vdom.attrs.className += (unread ? ' unread' : '');
vdom.attrs.className += (newNotifications ? ' new' : '');
vdom.attrs.onclick = this.onclick.bind(this); vdom.attrs.onclick = this.onclick.bind(this);
return vdom; return vdom;
@ -69,6 +70,12 @@ export default class NotificationsDropdown extends Dropdown {
} }
getUnreadCount() { getUnreadCount() {
return app.cache.notifications ?
app.cache.notifications.filter(notification => !notification.isRead()).length :
0;
}
getNewCount() {
return app.session.user.unreadNotificationsCount(); 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; color: @header-color;
} }
.NotificationsDropdown-unread { .NotificationsDropdown-unread {
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 17px; left: 17px;
background: @header-color; background: @control-color;
color: @header-bg; color: @header-bg;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
@ -41,4 +42,8 @@
border: 1px solid @header-bg; border: 1px solid @header-bg;
min-width: 18px; min-width: 18px;
height: 18px; height: 18px;
.new & {
background: @header-color;
}
} }