Commit 24d9901b authored by Lionel Morin's avatar Lionel Morin

Notifs in modal

parent 6ba0437a
Pipeline #2186 failed with stages
in 2 minutes and 37 seconds
......@@ -199,14 +199,12 @@
"cancel": "Cancel"
},
"Notifications": {
"check": "Check as read",
"remove": "Remove"
},
"NotificationsDrawer": {
"checkAll": "Check all the notifications as read",
"NotificationsDisplay": {
"empty": "You have no notifications",
"removeAll": "Remove all the notifications",
"confirmRemoveAll": "Are you sure you want to delete all the notifications ?",
"removeAllRead": "Remove all the notifications read"
"confirmRemoveAll": "Are you sure you want to delete all the notifications ?"
},
"Footer": {
"personalData": "Personal Data",
......
......@@ -199,14 +199,12 @@
"cancel": "Annuler"
},
"Notifications": {
"check": "Marquer comme lu",
"remove": "Supprimer"
},
"NotificationsDrawer": {
"checkAll": "Marquer toutes les notifications comme lues",
"NotificationsDisplay": {
"empty": "Vous n'avez aucune notification.",
"removeAll": "Supprimer toutes les notifications",
"confirmRemoveAll": "Êtes vous sûr de vouloir supprimer toutes les notifications ?",
"removeAllRead": "Supprimer toutes les notifications lues"
"confirmRemoveAll": "Êtes vous sûr de vouloir supprimer toutes les notifications ?"
},
"Footer": {
"personalData": "Données Personnelles",
......
......@@ -5,10 +5,9 @@ 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, Paper } from '@material-ui/core';
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 i18n from 'meteor/universe:i18n';
......@@ -35,15 +34,28 @@ const useStyles = makeStyles((theme) => ({
boxShadow: theme.shadows[5],
padding: theme.spacing(1),
},
space: {
margin: 'auto',
notifsList: {
maxHeight: 400,
overflowY: 'scroll',
},
divflex: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
title: {
marginLeft: theme.spacing(7),
},
footer: {
textAlign: 'center',
marginTop: 10,
},
button: {
padding: 5,
},
}));
const NotificationModal = ({ notifications, ready }) => {
const NotificationsDisplay = ({ notifications, ready }) => {
const classes = useStyles();
const [{ notificationPage }, dispatch] = useAppContext();
const [open, setOpen] = useState(false);
......@@ -105,21 +117,14 @@ const NotificationModal = ({ notifications, ready }) => {
>
<Fade in={notificationPage.notifsOpen}>
<Paper className={classes.paper}>
<IconButton onClick={handleNotifsClose}>
<ChevronRightIcon />
</IconButton>
<Typography variant="button">Notifications</Typography>
<div className={classes.space} />
<Tooltip
title={i18n.__('components.NotificationsDrawer.removeAll')}
aria-label={i18n.__('components.NotificationsDrawer.removeAll')}
>
<IconButton onClick={handleOpenDialog} className={classes.button}>
<DeleteOutlineIcon />
<div className={classes.divflex}>
<Typography variant="h6" className={classes.title}>
Notifications
</Typography>
<IconButton onClick={handleNotifsClose}>
<CancelIcon />
</IconButton>
</Tooltip>
</div>
<Dialog
open={open}
......@@ -129,7 +134,7 @@ const NotificationModal = ({ notifications, ready }) => {
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{i18n.__('components.NotificationsDrawer.confirmRemoveAll')}
{i18n.__('components.NotificationsDisplay.confirmRemoveAll')}
</DialogContentText>
</DialogContent>
<DialogActions>
......@@ -142,12 +147,25 @@ const NotificationModal = ({ notifications, ready }) => {
</DialogActions>
</Dialog>
<Divider />
{notifications.map((notif, index) => [
<Notification key={notif._id} notification={notif} />,
notifications.length !== index + 1 ? (
<Divider className={classes.divider} key={`div-${notif._id}`} />
) : null,
])}
<div className={classes.notifsList}>
{notifications.map((notif, index) => [
<Notification key={notif._id} notification={notif} />,
notifications.length !== index + 1 ? (
<Divider className={classes.divider} key={`div-${notif._id}`} />
) : null,
])}
</div>
{notifications.length === 0 ? (
<Typography className={classes.footer} variant="body2">
{i18n.__('components.NotificationsDisplay.empty')}
</Typography>
) : (
<div className={classes.footer}>
<Link component="button" variant="body2" onClick={handleOpenDialog}>
{i18n.__('components.NotificationsDisplay.removeAll')}
</Link>
</div>
)}
</Paper>
</Fade>
</Modal>
......@@ -156,7 +174,7 @@ const NotificationModal = ({ notifications, ready }) => {
);
};
NotificationModal.propTypes = {
NotificationsDisplay.propTypes = {
notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
ready: PropTypes.bool.isRequired,
};
......@@ -168,4 +186,4 @@ export default withTracker(() => {
notifications,
ready: subscription.ready(),
};
})(NotificationModal);
})(NotificationsDisplay);
......@@ -25,7 +25,7 @@ import ArticlesPage from '../pages/articles/ArticlesPage';
import EditArticlePage from '../pages/articles/EditArticlePage';
import MediaStoragePage from '../pages/MediaStoragePage';
import AdminSettingsPage from '../pages/admin/AdminSettingsPage';
import NotificationModal from '../components/notifications/NotificationModal';
import NotificationsDisplay from '../components/notifications/NotificationsDisplay';
// dynamic imports
const AdminSingleServicePage = lazy(() => import('../pages/admin/AdminSingleServicePage'));
......@@ -137,7 +137,7 @@ function MainLayout() {
{isMobile && <MobileMenu />}
</main>
)}
<NotificationModal />
<NotificationsDisplay />
<CustomToast />
</div>
);
......
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