Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-15 05:51:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

handle no notifications case

Browse source
This commit is contained in:
svetlagasheva 2019-10-14 10:38:05 +03:00
parent 3973271d95
commit a081c6da5e
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js
View file

@ -1,6 +1,7 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Notification = require('./Notification');
const useMetaItems = require('./useMetaItems');
const styles = require('./styles');
@ -10,7 +11,7 @@ const NotificationsList = ({ className, metaItems }) => {
return (
<div className={classnames(className, styles['notifications-list-scroll-container'])}>
{
notifications.length > 0 ?
notifications.length === 0 ?
notifications.map((notification) => (
notification.videos.length === 1 ?
<Notification
@ -35,8 +36,11 @@ const NotificationsList = ({ className, metaItems }) => {
))
:
<React.Fragment>
<div className={styles['no-notifications-label']}>
No new notifications.
<div className={styles['no-notifications-container']}>
<Icon className={styles['icon']} icon={'ic_bell'} />
<div className={styles['label']}>
No new notifications
</div>
</div>
</React.Fragment>
}

24
src/common/NavBar/NotificationsMenu/NotificationsList/styles.less
View file

@ -2,8 +2,32 @@
flex: 1;
align-self: stretch;
overflow-y: auto;
background-color: var(--color-surfacelighter);
.notification {
width: var(--item-size);
}
.no-notifications-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--item-size);
height: 100%;
padding: 1rem;
.icon {
width: 6rem;
height: 6rem;
margin-bottom: 2rem;
fill: var(--color-surfacedark);
}
.label {
font-size: 1.2rem;
text-align: center;
color: var(--color-surfacedark);
}
}
}