improve notificationbox readability

This commit is contained in:
Connor Turland 2017-09-29 14:05:39 -04:00
parent 5e6fb6290c
commit 15f512efef
3 changed files with 39 additions and 20 deletions

View file

@ -149,7 +149,7 @@ $unread_notifications_dot_size: 8px;
ul.notifications { ul.notifications {
list-style: none; list-style: none;
li:last-child { li:nth-last-child(2) {
.notification-body { .notification-body {
border-bottom: none !important; border-bottom: none !important;
} }

View file

@ -30,7 +30,7 @@ const Notifications = {
method: 'PUT', method: 'PUT',
success: function(r) { success: function(r) {
if (n) { if (n) {
Notifications.unreadNotificationsCount--
n.is_read = true n.is_read = true
render() render()
} }

View file

@ -26,29 +26,48 @@ class NotificationBox extends Component {
this.props.toggleNotificationsBox() this.props.toggleNotificationsBox()
} }
render = () => { hasSomeNotifications = () => {
const { notifications } = this.props
return notifications && notifications.length > 0
}
showLoading = () => {
return <li><Loading margin='30px auto' /></li>
}
showEmpty = () => {
return <li className='notificationsEmpty'>
You have no notifications. <br />
More time for dancing.
</li>
}
showNotifications = () => {
const { notifications, markAsRead, markAsUnread } = this.props const { notifications, markAsRead, markAsUnread } = this.props
const empty = notifications && notifications.length === 0 if (!this.hasSomeNotifications()) {
return this.showEmpty()
}
return notifications.slice(0, 10).map(
n => <Notification notification={n}
markAsRead={markAsRead}
markAsUnread={markAsUnread}
key={`notification-${n.id}`} />
).concat([
<li key='notification-see-all'>
<a href='/notifications' className='notificationsBoxSeeAll'>
See all
</a>
</li>
])
}
render = () => {
const { notifications } = this.props
return <div className='notificationsBox'> return <div className='notificationsBox'>
<div className='notificationsBoxTriangle' /> <div className='notificationsBoxTriangle' />
<ul className='notifications'> <ul className='notifications'>
{!notifications && <li><Loading margin='30px auto' /></li>} {notifications ? this.showNotifications() : this.showLoading()}
{empty ? (
<li className='notificationsEmpty'>
You have no notifications. <br />
More time for dancing.
</li>
) : (
notifications.slice(0, 10).map(n => <Notification notification={n}
markAsRead={markAsRead}
markAsUnread={markAsUnread}
key={`notification-${n.id}`} />)
)}
</ul> </ul>
{notifications && !empty && <a href='/notifications'
className='notificationsBoxSeeAll'>
See all
</a>}
</div> </div>
} }
} }