tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

notification components formatting

master
Tudor Stanciu 2021-07-06 19:30:28 +03:00
parent fe812a371c
commit a6941afdf1
5 changed files with 450 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Notification/Notification.js
View File

@ -13,7 +13,7 @@ import {
Error as DefenceIcon, Error as DefenceIcon,
AccountBox as CustomerIcon, AccountBox as CustomerIcon,
Done as ShippedIcon, Done as ShippedIcon,
Publish as UploadIcon, Publish as UploadIcon
} from "@material-ui/icons"; } from "@material-ui/icons";
import { useTheme } from "@material-ui/styles"; import { useTheme } from "@material-ui/styles";
import classnames from "classnames"; import classnames from "classnames";
@ -38,7 +38,7 @@ const typesIcons = {
defence: <DefenceIcon />, defence: <DefenceIcon />,
report: <ReportIcon />, report: <ReportIcon />,
upload: <UploadIcon />, upload: <UploadIcon />,
disc: <DiscIcon />, disc: <DiscIcon />
}; };
export default function Notification({ variant, ...props }) { export default function Notification({ variant, ...props }) {
@ -48,33 +48,33 @@ export default function Notification({ variant, ...props }) {
const icon = getIconByType(props.type); const icon = getIconByType(props.type);
const iconWithStyles = React.cloneElement(icon, { const iconWithStyles = React.cloneElement(icon, {
classes: { classes: {
root: classes.notificationIcon, root: classes.notificationIcon
}, },
style: { style: {
color: color:
variant !== "contained" && variant !== "contained" &&
theme.palette[props.color] && theme.palette[props.color] &&
theme.palette[props.color].main, theme.palette[props.color].main
}, }
}); });
return ( return (
<div <div
className={classnames(classes.notificationContainer, props.className, { className={classnames(classes.notificationContainer, props.className, {
[classes.notificationContained]: variant === "contained", [classes.notificationContained]: variant === "contained",
[classes.notificationContainedShadowless]: props.shadowless, [classes.notificationContainedShadowless]: props.shadowless
})} })}
style={{ style={{
backgroundColor: backgroundColor:
variant === "contained" && variant === "contained" &&
theme.palette[props.color] && theme.palette[props.color] &&
theme.palette[props.color].main, theme.palette[props.color].main
}} }}
> >
<div <div
className={classnames(classes.notificationIconContainer, { className={classnames(classes.notificationIconContainer, {
[classes.notificationIconContainerContained]: variant === "contained", [classes.notificationIconContainerContained]: variant === "contained",
[classes.notificationIconContainerRounded]: variant === "rounded", [classes.notificationIconContainerRounded]: variant === "rounded"
})} })}
style={{ style={{
backgroundColor: backgroundColor:
@ -82,7 +82,7 @@ export default function Notification({ variant, ...props }) {
theme.palette[props.color] && theme.palette[props.color] &&
tinycolor(theme.palette[props.color].main) tinycolor(theme.palette[props.color].main)
.setAlpha(0.15) .setAlpha(0.15)
.toRgbString(), .toRgbString()
}} }}
> >
{iconWithStyles} {iconWithStyles}
@ -90,7 +90,7 @@ export default function Notification({ variant, ...props }) {
<div className={classes.messageContainer}> <div className={classes.messageContainer}>
<Typography <Typography
className={classnames({ className={classnames({
[classes.containedTypography]: variant === "contained", [classes.containedTypography]: variant === "contained"
})} })}
variant={props.typographyVariant} variant={props.typographyVariant}
size={variant !== "contained" && !props.typographyVariant && "md"} size={variant !== "contained" && !props.typographyVariant && "md"}
@ -111,7 +111,6 @@ export default function Notification({ variant, ...props }) {
); );
} }
// ####################################################################
function getIconByType(type = "offer") { function getIconByType(type = "offer") {
return typesIcons[type]; return typesIcons[type];
} }

266
src/pages/notifications/Notifications.js
View File

@ -22,7 +22,7 @@ const positions = [
toast.POSITION.TOP_RIGHT, toast.POSITION.TOP_RIGHT,
toast.POSITION.BOTTOM_LEFT, toast.POSITION.BOTTOM_LEFT,
toast.POSITION.BOTTOM_CENTER, toast.POSITION.BOTTOM_CENTER,
toast.POSITION.BOTTOM_RIGHT, toast.POSITION.BOTTOM_RIGHT
]; ];
export default function NotificationsPage(props) { export default function NotificationsPage(props) {
@ -45,109 +45,139 @@ export default function NotificationsPage(props) {
progressClassName={classes.notificationProgress} progressClassName={classes.notificationProgress}
/> />
<Grid item xs={12}> <Grid item xs={12}>
<Widget disableWidgetMenu> <Widget disableWidgetMenu>
<Grid container item xs={12}> <Grid container item xs={12}>
<Grid item xs={4}> <Grid item xs={4}>
<Widget title="Layout Options" noWidgetShadow disableWidgetMenu noBodyPadding noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}> <Widget
<Typography> title="Layout Options"
There are few position options available for notifications. You noWidgetShadow
can click any of them to change notifications position: disableWidgetMenu
</Typography> noBodyPadding
<div className={classes.layoutContainer}> noHeaderPadding
<div className={classes.layoutButtonsRow}> style={{ paddingRight: 15 }}
<button headerClass={classes.widgetHeader}
onClick={() => changeNotificationPosition(0)} >
className={classnames(classes.layoutButton, { <Typography>
[classes.layoutButtonActive]: notificationsPosition === 0, There are few position options available for notifications.
})} You can click any of them to change notifications position:
/> </Typography>
<button <div className={classes.layoutContainer}>
onClick={() => changeNotificationPosition(1)} <div className={classes.layoutButtonsRow}>
className={classnames(classes.layoutButton, { <button
[classes.layoutButtonActive]: notificationsPosition === 1, onClick={() => changeNotificationPosition(0)}
})} className={classnames(classes.layoutButton, {
/> [classes.layoutButtonActive]:
<button notificationsPosition === 0
onClick={() => changeNotificationPosition(2)} })}
className={classnames(classes.layoutButton, { />
[classes.layoutButtonActive]: notificationsPosition === 2, <button
})} onClick={() => changeNotificationPosition(1)}
/> className={classnames(classes.layoutButton, {
</div> [classes.layoutButtonActive]:
<Typography className={classes.layoutText} size="md"> notificationsPosition === 1
Click any position })}
</Typography> />
<div className={classes.layoutButtonsRow}> <button
<button onClick={() => changeNotificationPosition(2)}
onClick={() => changeNotificationPosition(3)} className={classnames(classes.layoutButton, {
className={classnames(classes.layoutButton, { [classes.layoutButtonActive]:
[classes.layoutButtonActive]: notificationsPosition === 3, notificationsPosition === 2
})} })}
/> />
<button </div>
onClick={() => changeNotificationPosition(4)} <Typography className={classes.layoutText} size="md">
className={classnames(classes.layoutButton, { Click any position
[classes.layoutButtonActive]: notificationsPosition === 4, </Typography>
})} <div className={classes.layoutButtonsRow}>
/> <button
<button onClick={() => changeNotificationPosition(3)}
onClick={() => changeNotificationPosition(5)} className={classnames(classes.layoutButton, {
className={classnames(classes.layoutButton, { [classes.layoutButtonActive]:
[classes.layoutButtonActive]: notificationsPosition === 5, notificationsPosition === 3
})} })}
/> />
</div> <button
</div> onClick={() => changeNotificationPosition(4)}
</Widget> className={classnames(classes.layoutButton, {
</Grid> [classes.layoutButtonActive]:
<Grid item xs={4}> notificationsPosition === 4
<Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}> })}
<Typography> />
Different types of notifications for lost of use cases. Custom <button
classes are also supported. onClick={() => changeNotificationPosition(5)}
</Typography> className={classnames(classes.layoutButton, {
<div className={classes.buttonsContainer}> [classes.layoutButtonActive]:
<Button notificationsPosition === 5
variant="contained" })}
color="primary" />
onClick={() => handleNotificationCall("info")} </div>
className={classnames(classes.notificationCallButton)} </div>
> </Widget>
Info Message </Grid>
</Button> <Grid item xs={4}>
<Button <Widget
variant="contained" title="Notifications Types"
color="secondary" disableWidgetMenu
onClick={() => handleNotificationCall("error")} noBodyPadding
className={classnames(classes.notificationCallButton)} noWidgetShadow
> noHeaderPadding
Error + Retry Message style={{ paddingRight: 15 }}
</Button> headerClass={classes.widgetHeader}
<Button >
variant="contained" <Typography>
color="success" Different types of notifications for lost of use cases.
onClick={() => handleNotificationCall("success")} Custom classes are also supported.
className={classnames(classes.notificationCallButton)} </Typography>
> <div className={classes.buttonsContainer}>
Success Message <Button
</Button> variant="contained"
</div> color="primary"
</Widget> onClick={() => handleNotificationCall("info")}
</Grid> className={classnames(classes.notificationCallButton)}
<Grid item xs={4}> >
<Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}> Info Message
<Typography> </Button>
Notifications are created with the help of{" "} <Button
<a href="https://github.com/fkhadra/react-toastify"> variant="contained"
react-toastify color="secondary"
</a> onClick={() => handleNotificationCall("error")}
</Typography> className={classnames(classes.notificationCallButton)}
<div className={classes.codeContainer}> >
<SyntaxHighlighter Error + Retry Message
className={classes.codeComponent} </Button>
language="javascript" <Button
style={docco} variant="contained"
>{` color="success"
onClick={() => handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div>
</Widget>
</Grid>
<Grid item xs={4}>
<Widget
title="Usage"
disableWidgetMenu
noBodyPadding
noWidgetShadow
noHeaderPadding
style={{ paddingRight: 15 }}
headerClass={classes.widgetHeader}
>
<Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}>
<SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
// import needed components, functions and styles // import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify'; import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
@ -161,13 +191,14 @@ export default function NotificationsPage(props) {
</div> </div>
}; };
`}</SyntaxHighlighter> `}</SyntaxHighlighter>
<Typography variant="caption"> <Typography variant="caption">
For more API information refer to the library documentation For more API information refer to the library
</Typography> documentation
</div> </Typography>
</Widget> </div>
</Widget>
</Grid>
</Grid> </Grid>
</Grid>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
@ -319,7 +350,7 @@ export default function NotificationsPage(props) {
{...componentProps} {...componentProps}
className={classes.notificationComponent} className={classes.notificationComponent}
/>, />,
options, options
); );
} }
@ -328,11 +359,11 @@ export default function NotificationsPage(props) {
type: "message", type: "message",
message: "Message was sent successfully!", message: "Message was sent successfully!",
variant: "contained", variant: "contained",
color: "success", color: "success"
}; };
toast.update(errorToastId, { toast.update(errorToastId, {
render: <Notification {...componentProps} />, render: <Notification {...componentProps} />,
type: "success", type: "success"
}); });
setErrorToastId(null); setErrorToastId(null);
} }
@ -348,7 +379,7 @@ export default function NotificationsPage(props) {
type: "feedback", type: "feedback",
message: "New user feedback received", message: "New user feedback received",
variant: "contained", variant: "contained",
color: "primary", color: "primary"
}; };
break; break;
case "error": case "error":
@ -358,7 +389,7 @@ export default function NotificationsPage(props) {
variant: "contained", variant: "contained",
color: "secondary", color: "secondary",
extraButton: "Resend", extraButton: "Resend",
extraButtonClick: retryErrorNotification, extraButtonClick: retryErrorNotification
}; };
break; break;
default: default:
@ -366,7 +397,7 @@ export default function NotificationsPage(props) {
type: "shipped", type: "shipped",
message: "The item was shipped", message: "The item was shipped",
variant: "contained", variant: "contained",
color: "success", color: "success"
}; };
} }
@ -375,7 +406,7 @@ export default function NotificationsPage(props) {
position: positions[notificationsPosition], position: positions[notificationsPosition],
progressClassName: classes.progress, progressClassName: classes.progress,
onClose: notificationType === "error" && (() => setErrorToastId(null)), onClose: notificationType === "error" && (() => setErrorToastId(null)),
className: classes.notification, className: classes.notification
}); });
if (notificationType === "error") setErrorToastId(toastId); if (notificationType === "error") setErrorToastId(toastId);
@ -386,7 +417,6 @@ export default function NotificationsPage(props) {
} }
} }
// #############################################################
function CloseButton({ closeToast, className }) { function CloseButton({ closeToast, className }) {
return <CloseIcon className={className} onClick={closeToast} />; return <CloseIcon className={className} onClick={closeToast} />;
} }

12
src/pages/notifications/NotificationsContainer.js
View File

@ -16,7 +16,7 @@ const positions = [
]; ];
export default compose( export default compose(
withStyles(theme => ({ withStyles((theme) => ({
/*progress: { /*progress: {
visibility: "hidden" visibility: "hidden"
}, },
@ -34,7 +34,7 @@ export default compose(
withState("notificationsPosition", "setNotificationPosition", 2), withState("notificationsPosition", "setNotificationPosition", 2),
withState("errorToastId", "setErrorToastId", null), withState("errorToastId", "setErrorToastId", null),
withHandlers({ withHandlers({
sendNotification: props => (componentProps, options) => { sendNotification: (props) => (componentProps, options) => {
return toast( return toast(
<Notification <Notification
{...componentProps} {...componentProps}
@ -45,12 +45,12 @@ export default compose(
} }
}), }),
withHandlers({ withHandlers({
retryErrorNotification: props => () => { retryErrorNotification: (props) => () => {
const componentProps = { const componentProps = {
type: "message", type: "message",
message: "Message was sent successfully!", message: "Message was sent successfully!",
variant: "contained", variant: "contained",
color: "success", color: "success"
}; };
toast.update(props.errorToastId, { toast.update(props.errorToastId, {
@ -61,7 +61,7 @@ export default compose(
} }
}), }),
withHandlers({ withHandlers({
handleNotificationCall: props => notificationType => { handleNotificationCall: (props) => (notificationType) => {
let componentProps; let componentProps;
if (props.errorToastId && notificationType === "error") return; if (props.errorToastId && notificationType === "error") return;
@ -105,7 +105,7 @@ export default compose(
if (notificationType === "error") props.setErrorToastId(toastId); if (notificationType === "error") props.setErrorToastId(toastId);
}, },
changeNotificationPosition: props => positionId => { changeNotificationPosition: (props) => (positionId) => {
props.setNotificationPosition(positionId); props.setNotificationPosition(positionId);
} }
}) })

350
src/pages/notifications/NotificationsView.js
View File

@ -1,63 +1,141 @@
import React from 'react'; import React from "react";
import { Grid, withStyles } from '@material-ui/core'; import { Grid, withStyles } from "@material-ui/core";
import { Close as CloseIcon } from '@material-ui/icons'; import { Close as CloseIcon } from "@material-ui/icons";
import classnames from 'classnames'; import classnames from "classnames";
import { ToastContainer } from 'react-toastify'; import { ToastContainer } from "react-toastify";
import SyntaxHighlighter from 'react-syntax-highlighter'; import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
import tinycolor from 'tinycolor2'; import tinycolor from "tinycolor2";
import 'react-toastify/dist/ReactToastify.css'; import "react-toastify/dist/ReactToastify.css";
import Widget from '../../components/Widget'; import Widget from "../../components/Widget";
import PageTitle from '../../components/PageTitle'; import PageTitle from "../../components/PageTitle";
import NotificationCustomComponent from '../../components/Notification'; import NotificationCustomComponent from "../../components/Notification";
import { Typography, Button } from '../../components/Wrappers'; import { Typography, Button } from "../../components/Wrappers";
const CloseButton = ({ closeToast, className }) => ( const CloseButton = ({ closeToast, className }) => (
<CloseIcon <CloseIcon className={className} onClick={closeToast} />
className={className}
onClick={closeToast}
/>
); );
const NotificationsPage = ({ classes, ...props}) => ( const NotificationsPage = ({ classes, ...props }) => (
<React.Fragment> <React.Fragment>
<PageTitle title="Notifications" /> <PageTitle title="Notifications" />
<Grid container spacing={32}> <Grid container spacing={32}>
<ToastContainer className={classes.toastsContainer} closeButton={<CloseButton className={classes.notificationCloseButton} />} closeOnClick={false} progressClassName={classes.notificationProgress} /> <ToastContainer
className={classes.toastsContainer}
closeButton={
<CloseButton className={classes.notificationCloseButton} />
}
closeOnClick={false}
progressClassName={classes.notificationProgress}
/>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Layout Options" disableWidgetMenu> <Widget title="Layout Options" disableWidgetMenu>
<Typography>There are few position options available for notifications. You can click any of them to change notifications position:</Typography> <Typography>
There are few position options available for notifications. You can
click any of them to change notifications position:
</Typography>
<div className={classes.layoutContainer}> <div className={classes.layoutContainer}>
<div className={classes.layoutButtonsRow}> <div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(0)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 0})} /> <button
<button onClick={() => props.changeNotificationPosition(1)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 1})} /> onClick={() => props.changeNotificationPosition(0)}
<button onClick={() => props.changeNotificationPosition(2)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 2})} /> className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 0
})}
/>
<button
onClick={() => props.changeNotificationPosition(1)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 1
})}
/>
<button
onClick={() => props.changeNotificationPosition(2)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 2
})}
/>
</div> </div>
<Typography className={classes.layoutText} size="md">Click any position</Typography> <Typography className={classes.layoutText} size="md">
Click any position
</Typography>
<div className={classes.layoutButtonsRow}> <div className={classes.layoutButtonsRow}>
<button onClick={() => props.changeNotificationPosition(3)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 3})} /> <button
<button onClick={() => props.changeNotificationPosition(4)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 4})} /> onClick={() => props.changeNotificationPosition(3)}
<button onClick={() => props.changeNotificationPosition(5)} className={classnames(classes.layoutButton, { [classes.layoutButtonActive]: props.notificationsPosition === 5})} /> className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 3
})}
/>
<button
onClick={() => props.changeNotificationPosition(4)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 4
})}
/>
<button
onClick={() => props.changeNotificationPosition(5)}
className={classnames(classes.layoutButton, {
[classes.layoutButtonActive]:
props.notificationsPosition === 5
})}
/>
</div> </div>
</div> </div>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Notifications Types" disableWidgetMenu> <Widget title="Notifications Types" disableWidgetMenu>
<Typography>Different types of notifications for lost of use cases. Custom classes are also supported.</Typography> <Typography>
Different types of notifications for lost of use cases. Custom
classes are also supported.
</Typography>
<div className={classes.buttonsContainer}> <div className={classes.buttonsContainer}>
<Button variant="contained" colortheme="primary" onClick={() => props.handleNotificationCall('info')} className={classnames(classes.notificationCallButton)}>Info Message</Button> <Button
<Button variant="contained" colortheme="warning" onClick={() => props.handleNotificationCall('error')} className={classnames(classes.notificationCallButton)}>Error + Retry Message</Button> variant="contained"
<Button variant="contained" colortheme="success" onClick={() => props.handleNotificationCall('success')} className={classnames(classes.notificationCallButton)}>Success Message</Button> colortheme="primary"
onClick={() => props.handleNotificationCall("info")}
className={classnames(classes.notificationCallButton)}
>
Info Message
</Button>
<Button
variant="contained"
colortheme="warning"
onClick={() => props.handleNotificationCall("error")}
className={classnames(classes.notificationCallButton)}
>
Error + Retry Message
</Button>
<Button
variant="contained"
colortheme="success"
onClick={() => props.handleNotificationCall("success")}
className={classnames(classes.notificationCallButton)}
>
Success Message
</Button>
</div> </div>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Usage" disableWidgetMenu> <Widget title="Usage" disableWidgetMenu>
<Typography>Notifications are created with the help of <a href="https://github.com/fkhadra/react-toastify">react-toastify</a></Typography> <Typography>
Notifications are created with the help of{" "}
<a href="https://github.com/fkhadra/react-toastify">
react-toastify
</a>
</Typography>
<div className={classes.codeContainer}> <div className={classes.codeContainer}>
<SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{` <SyntaxHighlighter
className={classes.codeComponent}
language="javascript"
style={docco}
>{`
// import needed components, functions and styles // import needed components, functions and styles
import { ToastContainer, toast } from 'react-toastify'; import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css';
@ -71,38 +149,148 @@ const NotificationsPage = ({ classes, ...props}) => (
</div> </div>
}; };
`}</SyntaxHighlighter> `}</SyntaxHighlighter>
<Typography variant="caption">For more API information refer to the library documentation</Typography> <Typography variant="caption">
For more API information refer to the library documentation
</Typography>
</div> </div>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu> <Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" variant="contained" color="secondary"/> <NotificationCustomComponent
<NotificationCustomComponent className={classes.notificationItem} shadowless type="feedback" message="New user feedback received" variant="contained" color="primary"/> className={classes.notificationItem}
<NotificationCustomComponent className={classes.notificationItem} shadowless type="customer" message="New customer is registered" variant="contained" color="success" /> shadowless
<NotificationCustomComponent className={classes.notificationItem} shadowless type="shipped" message="The order was shipped" variant="contained" color="warning" /> type="message"
<NotificationCustomComponent className={classes.notificationItem} shadowless type="delivered" message="The order was delivered" variant="contained" color="primary" /> message="Thanks for Checking out Messenger"
<NotificationCustomComponent className={classes.notificationItem} shadowless type="defence" message="5 Defence alerts" variant="contained" color="info" /> variant="contained"
color="secondary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="feedback"
message="New user feedback received"
variant="contained"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="customer"
message="New customer is registered"
variant="contained"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="shipped"
message="The order was shipped"
variant="contained"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="delivered"
message="The order was delivered"
variant="contained"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
shadowless
type="defence"
message="5 Defence alerts"
variant="contained"
color="info"
/>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu> <Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" /> <NotificationCustomComponent
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" color="primary" /> className={classes.notificationItem}
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" color="success" /> type="report"
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" color="warning" /> message="New report has been received"
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" color="primary" /> color="secondary"
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" color="info" /> />
<NotificationCustomComponent
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="disc"
message="The disc is full"
color="info"
/>
</Widget> </Widget>
</Grid> </Grid>
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<Widget title="Notification Types Examples" disableWidgetMenu> <Widget title="Notification Types Examples" disableWidgetMenu>
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" color="secondary" /> <NotificationCustomComponent
<NotificationCustomComponent className={classes.notificationItem} type="feedback" message="New user feedback received" variant="rounded" color="primary" /> className={classes.notificationItem}
<NotificationCustomComponent className={classes.notificationItem} type="shipped" message="The item was shipped" variant="rounded" color="success" /> type="report"
<NotificationCustomComponent className={classes.notificationItem} type="message" message="The new message from user @nahawaii" variant="rounded" color="warning" /> message="New report has been received"
<NotificationCustomComponent className={classes.notificationItem} type="upload" message="Your file is ready to upload" variant="rounded" color="primary" /> variant="rounded"
<NotificationCustomComponent className={classes.notificationItem} type="disc" message="The disc is full" variant="rounded" color="info" /> color="secondary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="feedback"
message="New user feedback received"
variant="rounded"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="shipped"
message="The item was shipped"
variant="rounded"
color="success"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="message"
message="The new message from user @nahawaii"
variant="rounded"
color="warning"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="upload"
message="Your file is ready to upload"
variant="rounded"
color="primary"
/>
<NotificationCustomComponent
className={classes.notificationItem}
type="disc"
message="The disc is full"
variant="rounded"
color="info"
/>
</Widget> </Widget>
</Grid> </Grid>
</Grid> </Grid>
@ -112,64 +300,66 @@ const NotificationsPage = ({ classes, ...props}) => (
const styles = (theme) => ({ const styles = (theme) => ({
layoutContainer: { layoutContainer: {
height: 200, height: 200,
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
justifyContent: 'space-between', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2,
border: '1px dashed', border: "1px dashed",
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
position: 'relative', position: "relative"
}, },
layoutText: { layoutText: {
color: tinycolor(theme.palette.background.light).darken().toHexString(), color: tinycolor(theme.palette.background.light).darken().toHexString()
}, },
layoutButtonsRow: { layoutButtonsRow: {
width: '100%', width: "100%",
display: 'flex', display: "flex",
justifyContent: 'space-between', justifyContent: "space-between"
}, },
layoutButton: { layoutButton: {
backgroundColor: theme.palette.background.light, backgroundColor: theme.palette.background.light,
width: 125, width: 125,
height: 50, height: 50,
outline: 'none', outline: "none",
border: 'none', border: "none"
}, },
layoutButtonActive: { layoutButtonActive: {
backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(), backgroundColor: tinycolor(theme.palette.background.light)
.darken()
.toHexString()
}, },
buttonsContainer: { buttonsContainer: {
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
alignItems: 'flex-start', alignItems: "flex-start",
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2
}, },
notificationCallButton: { notificationCallButton: {
color: 'white', color: "white",
marginBottom: theme.spacing.unit, marginBottom: theme.spacing.unit,
textTransform: 'none', textTransform: "none"
}, },
codeContainer: { codeContainer: {
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2
}, },
codeComponent: { codeComponent: {
flexGrow: 1, flexGrow: 1
}, },
notificationItem: { notificationItem: {
marginTop: theme.spacing.unit * 2, marginTop: theme.spacing.unit * 2
}, },
notificationCloseButton: { notificationCloseButton: {
position: 'absolute', position: "absolute",
right: theme.spacing.unit * 2, right: theme.spacing.unit * 2
}, },
toastsContainer: { toastsContainer: {
width: 400, width: 400,
marginTop: theme.spacing.unit * 6, marginTop: theme.spacing.unit * 6,
right: 0, right: 0
} }
}); });
export default withStyles(styles, { withTheme: true})(NotificationsPage); export default withStyles(styles, { withTheme: true })(NotificationsPage);

34
src/pages/notifications/styles.js
View File

@ -1,7 +1,7 @@
import { makeStyles } from "@material-ui/styles"; import { makeStyles } from "@material-ui/styles";
import tinycolor from "tinycolor2"; import tinycolor from "tinycolor2";
export default makeStyles(theme => ({ export default makeStyles((theme) => ({
layoutContainer: { layoutContainer: {
height: 200, height: 200,
display: "flex", display: "flex",
@ -11,73 +11,71 @@ export default makeStyles(theme => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
border: "1px dashed", border: "1px dashed",
borderColor: theme.palette.primary.main, borderColor: theme.palette.primary.main,
position: "relative", position: "relative"
}, },
layoutText: { layoutText: {
color: tinycolor(theme.palette.background.light) color: tinycolor(theme.palette.background.light).darken().toHexString()
.darken()
.toHexString(),
}, },
layoutButtonsRow: { layoutButtonsRow: {
width: "100%", width: "100%",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between"
}, },
layoutButton: { layoutButton: {
backgroundColor: theme.palette.background.light, backgroundColor: theme.palette.background.light,
width: 125, width: 125,
height: 50, height: 50,
outline: "none", outline: "none",
border: "none", border: "none"
}, },
layoutButtonActive: { layoutButtonActive: {
backgroundColor: tinycolor(theme.palette.background.light) backgroundColor: tinycolor(theme.palette.background.light)
.darken() .darken()
.toHexString(), .toHexString()
}, },
buttonsContainer: { buttonsContainer: {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "flex-start", alignItems: "flex-start",
marginTop: theme.spacing(2), marginTop: theme.spacing(2)
}, },
notificationCallButton: { notificationCallButton: {
color: "white", color: "white",
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
textTransform: "none", textTransform: "none"
}, },
codeContainer: { codeContainer: {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
marginTop: theme.spacing(2), marginTop: theme.spacing(2)
}, },
codeComponent: { codeComponent: {
flexGrow: 1, flexGrow: 1
}, },
notificationItem: { notificationItem: {
marginTop: theme.spacing(2), marginTop: theme.spacing(2)
}, },
notificationCloseButton: { notificationCloseButton: {
position: "absolute", position: "absolute",
right: theme.spacing(2), right: theme.spacing(2)
}, },
toastsContainer: { toastsContainer: {
width: 400, width: 400,
marginTop: theme.spacing(6), marginTop: theme.spacing(6),
right: 0, right: 0
}, },
progress: { progress: {
visibility: "hidden", visibility: "hidden"
}, },
notification: { notification: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
background: "transparent", background: "transparent",
boxShadow: "none", boxShadow: "none",
overflow: "visible", overflow: "visible"
}, },
notificationComponent: { notificationComponent: {
paddingRight: theme.spacing(4), paddingRight: theme.spacing(4)
}, },
widgetHeader: { widgetHeader: {
paddingBottom: 8 paddingBottom: 8