add hover states and empty case

This commit is contained in:
Connor Turland 2017-09-28 12:28:33 -04:00
parent 277644f59d
commit 216a19476b
3 changed files with 126 additions and 14 deletions

View file

@ -1,4 +1,5 @@
$notifications-border-color: #DDDDDD; $notifications-border-color: #DDDDDD;
$notifications-hover-color: #F6F6F6;
$unread_notifications_dot_size: 8px; $unread_notifications_dot_size: 8px;
.unread-notifications-dot { .unread-notifications-dot {
@ -48,6 +49,20 @@ $unread_notifications_dot_size: 8px;
ul.notifications { ul.notifications {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
.notification {
font-size: 13px;
.notification-body {
border-bottom: 1px solid $notifications-border-color;
}
}
.notificationsEmpty {
font-family: din-regular, helvetica, sans-serif;
margin: 50px 10px;
text-align: center;
}
} }
.notificationsBoxSeeAll { .notificationsBoxSeeAll {
@ -56,15 +71,11 @@ $unread_notifications_dot_size: 8px;
text-align: center; text-align: center;
padding: 6px 0; padding: 6px 0;
font-family: din-regular, helvetica, sans-serif; font-family: din-regular, helvetica, sans-serif;
color: #4fb5c0;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.notification { &:hover {
font-size: 13px; color: #333;
background: $notifications-hover-color;
.notification-body {
border-bottom: 1px solid $notifications-border-color;
} }
} }
} }
@ -150,8 +161,12 @@ ul.notifications {
position: relative; position: relative;
font-family: 'din-regular', Sans-Serif; font-family: 'din-regular', Sans-Serif;
&.unread {
background: #EEE;
}
&:hover { &:hover {
background: #F6F6F6; background: $notifications-hover-color;
.notification-read-unread { .notification-read-unread {
display:block; display:block;
@ -219,8 +234,4 @@ ul.notifications {
cursor: pointer; cursor: pointer;
} }
} }
&.unread {
background: #EEE;
}
} }

View file

@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
import onClickOutsideAddon from 'react-onclickoutside' import onClickOutsideAddon from 'react-onclickoutside'
import Notification from '../Notification' import Notification from '../Notification'
import Loading from '../Loading'
class NotificationBox extends Component { class NotificationBox extends Component {
@ -27,10 +28,15 @@ class NotificationBox extends Component {
render = () => { render = () => {
const { notifications, markAsRead, markAsUnread } = this.props const { notifications, markAsRead, markAsUnread } = this.props
const empty = notifications && notifications.length === 0
return <div className='notificationsBox'> return <div className='notificationsBox'>
<div className='notificationsBoxTriangle' /> <div className='notificationsBoxTriangle' />
<ul className='notifications'> <ul className='notifications'>
{!notifications && <li>loading...</li>} {!notifications && <li><Loading margin='30px auto' /></li>}
{empty && <li className='notificationsEmpty'>
You have no notifications. <br />
More time for dancing.
</li>}
{notifications && notifications.slice(0, 10).map(n => { {notifications && notifications.slice(0, 10).map(n => {
return <Notification notification={n} return <Notification notification={n}
markAsRead={markAsRead} markAsRead={markAsRead}
@ -38,7 +44,10 @@ class NotificationBox extends Component {
key={`notification-${n.id}`} /> key={`notification-${n.id}`} />
})} })}
</ul> </ul>
<a href='/notifications' className='notificationsBoxSeeAll'>See all</a> {notifications && !empty && <a href='/notifications'
className='notificationsBoxSeeAll'>
See all
</a>}
</div> </div>
} }
} }

View file

@ -0,0 +1,92 @@
import React from 'react'
import PropTypes from 'prop-types'
// based on https://www.npmjs.com/package/react-loading-animation
const loading_style = {
position: 'relative',
margin: '0 auto',
width: '30px',
height: '30px',
}
const svg_style = {
animation: 'rotate 2s linear infinite',
height: '100%',
transformOrigin: 'center center',
width: '100%',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto'
}
const circle_style = {
strokeDasharray: '1,200',
strokeDashoffset: '0',
animation: 'dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite',
strokeLinecap: 'round'
}
const animation = `@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124px;
}
}
@keyframes color {
100%, 0% {
stroke: #a354cd;
}
50% {
stroke: #4fb5c0;
}
}`
class Loading extends React.Component {
static propTypes = {
style: PropTypes.object,
width: PropTypes.string,
height: PropTypes.string,
margin: PropTypes.string
}
static defaultProps = {
style: {},
width: '30px',
height: '30px',
margin: '0 auto'
}
render () {
let { width, height, margin, style } = this.props
loading_style.width = width
loading_style.height = height
loading_style.margin = margin
return <div style={Object.assign({}, loading_style, style)}>
<style>{animation}</style>
<svg style={svg_style} viewBox="25 25 50 50">
<circle style={circle_style} cx="50" cy="50" r="20" fill="none" strokeWidth="4" strokeMiterlimit="10"/>
</svg>
</div>
}
}
export default Loading