Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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

@ -2,8 +2,32 @@
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
overflow-y: auto; overflow-y: auto;
background-color: var(--color-surfacelighter);
.notification { .notification {
width: var(--item-size); 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);
}
}
} }