Commit 6d5906c0 authored by Lionel Morin's avatar Lionel Morin

Notifs in Popper (with no arrow yet)

parent 24d9901b
Pipeline #2195 passed with stages
in 5 minutes and 32 seconds
......@@ -56,7 +56,10 @@ function TopBar({ publicMenu, root }) {
},
});
const handleNotifsOpen = () => updateGlobalState('notifsOpen', true);
const handleNotifsOpen = () => {
const notifState = notificationPage.notifsOpen || false;
updateGlobalState('notifsOpen', !notifState);
};
return (
<AppBar position="fixed" className={classes.root}>
......
......@@ -10,7 +10,6 @@ import {
ListItem,
ListItemIcon,
ListItemText,
Checkbox,
Typography,
makeStyles,
IconButton,
......@@ -24,7 +23,7 @@ const useStyles = makeStyles(() => ({
display: 'inline',
},
isRead: {
backgroundColor: 'lightGrey',
backgroundColor: '#F9F9FD',
},
button: {
display: 'block',
......@@ -49,13 +48,6 @@ const useStyles = makeStyles(() => ({
const Notification = ({ notification, toast }) => {
const { _id, type, title, content, createdAt, read } = notification;
const classes = useStyles();
const handleToggle = () => {
Meteor.call('notifications.markNotificationAsRead', { notificationId: _id }, (err) => {
if (err) {
msg.error(err.reason);
}
});
};
const handleRemove = () => {
Meteor.call('notifications.removeNotification', { notificationId: _id }, (err) => {
......@@ -83,21 +75,19 @@ const Notification = ({ notification, toast }) => {
return (
<ListItem alignItems="flex-start" className={read ? classes.isRead : null}>
<ListItemIcon className={classes.leftIcon}>
{
<Badge
invisible={read}
variant="dot"
badgeContent=" "
overlap="circle"
color="primary"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
{notifIcon()}
</Badge>
}
<Badge
invisible={read}
variant="dot"
badgeContent=" "
overlap="circle"
color="primary"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
{notifIcon()}
</Badge>
</ListItemIcon>
<ListItemText
primary={
......@@ -121,18 +111,6 @@ const Notification = ({ notification, toast }) => {
<CloseIcon />
</IconButton>
</Tooltip>
{/* <Tooltip
title={i18n.__('components.Notifications.check')}
aria-label={i18n.__('components.Notifications.check')}
>
<Checkbox
edge="end"
onChange={handleToggle}
checked={read}
disabled={read}
className={classes.buttonMargin}
/>
</Tooltip> */}
</div>
)}
</ListItem>
......
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { withTracker } from 'meteor/react-meteor-data';
import { makeStyles } from '@material-ui/core/styles';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import DoneAllIcon from '@material-ui/icons/DoneAll';
import HighlightOff from '@material-ui/icons/HighlightOff';
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import { Fade, Typography, Tooltip } from '@material-ui/core';
import Drawer from '@material-ui/core/Drawer';
import i18n from 'meteor/universe:i18n';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import Button from '@material-ui/core/Button';
import Spinner from '../system/Spinner';
import Notifications from '../../../api/notifications/notifications';
import { useAppContext } from '../../contexts/context';
import Notification from './Notification';
const drawerWidth = 300;
const useStyles = makeStyles((theme) => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
justifyContent: 'flex-start',
},
space: {
margin: 'auto',
},
button: {
padding: 5,
},
}));
const NotificationDrawer = ({ notifications, ready }) => {
const classes = useStyles();
const [{ notificationPage }, dispatch] = useAppContext();
const [open, setOpen] = useState(false);
const updateGlobalState = (key, value) =>
dispatch({
type: 'notificationPage',
data: {
...notificationPage,
[key]: value,
},
});
const handleDrawerClose = () => updateGlobalState('drawerOpen', false);
const handleReadAll = () => {
Meteor.call('notifications.markAllNotificationAsRead', {}, (err) => {
if (err) {
msg.error(err.reason);
}
});
};
const handleRemoveAll = () => {
Meteor.call('notifications.removeAllNotification', {}, (err) => {
if (err) {
msg.error(err.reason);
}
});
setOpen(false);
};
const handleRemoveAllRead = () => {
Meteor.call('notifications.removeAllNotificationRead', {}, (err) => {
if (err) {
msg.error(err.reason);
}
});
};
const handleOpenDialog = () => {
if (notifications.length !== 0) {
setOpen(true);
}
};
const handleCloseDialog = () => {
setOpen(false);
};
return (
<>
{!ready ? (
<Spinner />
) : (
<Fade in>
<div key="right">
<Drawer
anchor="right"
open={notificationPage.drawerOpen}
classes={{
paper: classes.drawerPaper,
}}
onClose={handleDrawerClose}
>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
<ChevronRightIcon />
</IconButton>
<Typography variant="button">Notifications</Typography>
<div className={classes.space} />
{/* <Tooltip
title={i18n.__('components.NotificationsDrawer.checkAll')}
aria-label={i18n.__('components.NotificationsDrawer.checkAll')}
>
<IconButton onClick={handleReadAll} className={classes.button}>
<DoneAllIcon />
</IconButton>
</Tooltip> */}
{/* <Tooltip
title={i18n.__('components.NotificationsDrawer.removeAllRead')}
aria-label={i18n.__('components.NotificationsDrawer.removeAllRead')}
>
<IconButton onClick={handleRemoveAllRead} className={classes.button}>
<HighlightOff />
</IconButton>
</Tooltip> */}
<Tooltip
title={i18n.__('components.NotificationsDrawer.removeAll')}
aria-label={i18n.__('components.NotificationsDrawer.removeAll')}
>
<IconButton onClick={handleOpenDialog} className={classes.button}>
<DeleteOutlineIcon />
</IconButton>
</Tooltip>
<Dialog
open={open}
onClose={handleCloseDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{i18n.__('components.NotificationsDrawer.confirmRemoveAll')}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog} color="primary">
Non
</Button>
<Button onClick={handleRemoveAll} color="primary" autoFocus>
Oui
</Button>
</DialogActions>
</Dialog>
</div>
<Divider />
{notifications.map((notif, index) => [
<Notification key={notif._id} notification={notif} />,
notifications.length !== index + 1 ? (
<Divider className={classes.divider} key={`div-${notif._id}`} />
) : null,
])}
</Drawer>
</div>
</Fade>
)}
</>
);
};
NotificationDrawer.propTypes = {
notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
ready: PropTypes.bool.isRequired,
};
export default withTracker(() => {
const subscription = Meteor.subscribe('notifications.self');
const notifications = Notifications.find({}, { sort: { createdAt: -1 } }).fetch() || [];
return {
notifications,
ready: subscription.ready(),
};
})(NotificationDrawer);
......@@ -40,7 +40,7 @@ const NotificationsBell = ({ nonReadNotifsCount }) => {
const classes = useStyles();
return (
<>
<div id="NotificationsBell">
{nonReadNotifsCount > 0 ? (
<Badge className={classes.badge} badgeContent={nonReadNotifsCount} color="primary">
<NotificationsIcon />
......@@ -48,7 +48,7 @@ const NotificationsBell = ({ nonReadNotifsCount }) => {
) : (
<NotificationsNoneIcon />
)}
</>
</div>
);
};
......
......@@ -4,12 +4,8 @@ import { withTracker } from 'meteor/react-meteor-data';
import { makeStyles } from '@material-ui/core/styles';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import CancelIcon from '@material-ui/icons/Cancel';
import { Fade, Typography, Tooltip, Paper, Link } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import { Fade, Typography, Paper, Popper } from '@material-ui/core';
import i18n from 'meteor/universe:i18n';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
......@@ -22,10 +18,9 @@ import { useAppContext } from '../../contexts/context';
import Notification from './Notification';
const useStyles = makeStyles((theme) => ({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
popper: {
zIndex: 1300,
marginTop: 20,
},
paper: {
width: 400,
......@@ -51,7 +46,13 @@ const useStyles = makeStyles((theme) => ({
marginTop: 10,
},
button: {
padding: 5,
textTransform: 'none',
color: theme.palette.primary.main,
backgroundColor: theme.palette.tertiary.main,
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.tertiary.main,
},
},
}));
......@@ -103,17 +104,12 @@ const NotificationsDisplay = ({ notifications, ready }) => {
{!ready ? (
<Spinner />
) : (
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
<Popper
className={classes.popper}
open={notificationPage.notifsOpen || false}
onClose={handleNotifsClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
anchorEl={document.getElementById('NotificationsBell')}
placement="bottom-end"
>
<Fade in={notificationPage.notifsOpen}>
<Paper className={classes.paper}>
......@@ -161,14 +157,14 @@ const NotificationsDisplay = ({ notifications, ready }) => {
</Typography>
) : (
<div className={classes.footer}>
<Link component="button" variant="body2" onClick={handleOpenDialog}>
<Button className={classes.button} variant="body2" onClick={handleOpenDialog}>
{i18n.__('components.NotificationsDisplay.removeAll')}
</Link>
</Button>
</div>
)}
</Paper>
</Fade>
</Modal>
</Popper>
)}
</>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment