notification components formatting
parent
fe812a371c
commit
a6941afdf1
|
@ -13,7 +13,7 @@ import {
|
|||
Error as DefenceIcon,
|
||||
AccountBox as CustomerIcon,
|
||||
Done as ShippedIcon,
|
||||
Publish as UploadIcon,
|
||||
Publish as UploadIcon
|
||||
} from "@material-ui/icons";
|
||||
import { useTheme } from "@material-ui/styles";
|
||||
import classnames from "classnames";
|
||||
|
@ -38,7 +38,7 @@ const typesIcons = {
|
|||
defence: <DefenceIcon />,
|
||||
report: <ReportIcon />,
|
||||
upload: <UploadIcon />,
|
||||
disc: <DiscIcon />,
|
||||
disc: <DiscIcon />
|
||||
};
|
||||
|
||||
export default function Notification({ variant, ...props }) {
|
||||
|
@ -48,33 +48,33 @@ export default function Notification({ variant, ...props }) {
|
|||
const icon = getIconByType(props.type);
|
||||
const iconWithStyles = React.cloneElement(icon, {
|
||||
classes: {
|
||||
root: classes.notificationIcon,
|
||||
root: classes.notificationIcon
|
||||
},
|
||||
style: {
|
||||
color:
|
||||
variant !== "contained" &&
|
||||
theme.palette[props.color] &&
|
||||
theme.palette[props.color].main,
|
||||
},
|
||||
theme.palette[props.color].main
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(classes.notificationContainer, props.className, {
|
||||
[classes.notificationContained]: variant === "contained",
|
||||
[classes.notificationContainedShadowless]: props.shadowless,
|
||||
[classes.notificationContainedShadowless]: props.shadowless
|
||||
})}
|
||||
style={{
|
||||
backgroundColor:
|
||||
variant === "contained" &&
|
||||
theme.palette[props.color] &&
|
||||
theme.palette[props.color].main,
|
||||
theme.palette[props.color].main
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames(classes.notificationIconContainer, {
|
||||
[classes.notificationIconContainerContained]: variant === "contained",
|
||||
[classes.notificationIconContainerRounded]: variant === "rounded",
|
||||
[classes.notificationIconContainerRounded]: variant === "rounded"
|
||||
})}
|
||||
style={{
|
||||
backgroundColor:
|
||||
|
@ -82,7 +82,7 @@ export default function Notification({ variant, ...props }) {
|
|||
theme.palette[props.color] &&
|
||||
tinycolor(theme.palette[props.color].main)
|
||||
.setAlpha(0.15)
|
||||
.toRgbString(),
|
||||
.toRgbString()
|
||||
}}
|
||||
>
|
||||
{iconWithStyles}
|
||||
|
@ -90,7 +90,7 @@ export default function Notification({ variant, ...props }) {
|
|||
<div className={classes.messageContainer}>
|
||||
<Typography
|
||||
className={classnames({
|
||||
[classes.containedTypography]: variant === "contained",
|
||||
[classes.containedTypography]: variant === "contained"
|
||||
})}
|
||||
variant={props.typographyVariant}
|
||||
size={variant !== "contained" && !props.typographyVariant && "md"}
|
||||
|
@ -111,7 +111,6 @@ export default function Notification({ variant, ...props }) {
|
|||
);
|
||||
}
|
||||
|
||||
// ####################################################################
|
||||
function getIconByType(type = "offer") {
|
||||
return typesIcons[type];
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@ const positions = [
|
|||
toast.POSITION.TOP_RIGHT,
|
||||
toast.POSITION.BOTTOM_LEFT,
|
||||
toast.POSITION.BOTTOM_CENTER,
|
||||
toast.POSITION.BOTTOM_RIGHT,
|
||||
toast.POSITION.BOTTOM_RIGHT
|
||||
];
|
||||
|
||||
export default function NotificationsPage(props) {
|
||||
|
@ -48,29 +48,40 @@ export default function NotificationsPage(props) {
|
|||
<Widget disableWidgetMenu>
|
||||
<Grid container item xs={12}>
|
||||
<Grid item xs={4}>
|
||||
<Widget title="Layout Options" noWidgetShadow disableWidgetMenu noBodyPadding noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
|
||||
<Widget
|
||||
title="Layout Options"
|
||||
noWidgetShadow
|
||||
disableWidgetMenu
|
||||
noBodyPadding
|
||||
noHeaderPadding
|
||||
style={{ paddingRight: 15 }}
|
||||
headerClass={classes.widgetHeader}
|
||||
>
|
||||
<Typography>
|
||||
There are few position options available for notifications. You
|
||||
can click any of them to change notifications position:
|
||||
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.layoutButtonsRow}>
|
||||
<button
|
||||
onClick={() => changeNotificationPosition(0)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 0,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 0
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => changeNotificationPosition(1)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 1,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 1
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => changeNotificationPosition(2)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 2,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 2
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
@ -81,19 +92,22 @@ export default function NotificationsPage(props) {
|
|||
<button
|
||||
onClick={() => changeNotificationPosition(3)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 3,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 3
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => changeNotificationPosition(4)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 4,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 4
|
||||
})}
|
||||
/>
|
||||
<button
|
||||
onClick={() => changeNotificationPosition(5)}
|
||||
className={classnames(classes.layoutButton, {
|
||||
[classes.layoutButtonActive]: notificationsPosition === 5,
|
||||
[classes.layoutButtonActive]:
|
||||
notificationsPosition === 5
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
@ -101,10 +115,18 @@ export default function NotificationsPage(props) {
|
|||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Widget title="Notifications Types" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
|
||||
<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
|
||||
classes are also supported.
|
||||
Different types of notifications for lost of use cases.
|
||||
Custom classes are also supported.
|
||||
</Typography>
|
||||
<div className={classes.buttonsContainer}>
|
||||
<Button
|
||||
|
@ -135,7 +157,15 @@ export default function NotificationsPage(props) {
|
|||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Widget title="Usage" disableWidgetMenu noBodyPadding noWidgetShadow noHeaderPadding style={{paddingRight: 15}} headerClass={classes.widgetHeader}>
|
||||
<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">
|
||||
|
@ -162,7 +192,8 @@ export default function NotificationsPage(props) {
|
|||
};
|
||||
`}</SyntaxHighlighter>
|
||||
<Typography variant="caption">
|
||||
For more API information refer to the library documentation
|
||||
For more API information refer to the library
|
||||
documentation
|
||||
</Typography>
|
||||
</div>
|
||||
</Widget>
|
||||
|
@ -319,7 +350,7 @@ export default function NotificationsPage(props) {
|
|||
{...componentProps}
|
||||
className={classes.notificationComponent}
|
||||
/>,
|
||||
options,
|
||||
options
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -328,11 +359,11 @@ export default function NotificationsPage(props) {
|
|||
type: "message",
|
||||
message: "Message was sent successfully!",
|
||||
variant: "contained",
|
||||
color: "success",
|
||||
color: "success"
|
||||
};
|
||||
toast.update(errorToastId, {
|
||||
render: <Notification {...componentProps} />,
|
||||
type: "success",
|
||||
type: "success"
|
||||
});
|
||||
setErrorToastId(null);
|
||||
}
|
||||
|
@ -348,7 +379,7 @@ export default function NotificationsPage(props) {
|
|||
type: "feedback",
|
||||
message: "New user feedback received",
|
||||
variant: "contained",
|
||||
color: "primary",
|
||||
color: "primary"
|
||||
};
|
||||
break;
|
||||
case "error":
|
||||
|
@ -358,7 +389,7 @@ export default function NotificationsPage(props) {
|
|||
variant: "contained",
|
||||
color: "secondary",
|
||||
extraButton: "Resend",
|
||||
extraButtonClick: retryErrorNotification,
|
||||
extraButtonClick: retryErrorNotification
|
||||
};
|
||||
break;
|
||||
default:
|
||||
|
@ -366,7 +397,7 @@ export default function NotificationsPage(props) {
|
|||
type: "shipped",
|
||||
message: "The item was shipped",
|
||||
variant: "contained",
|
||||
color: "success",
|
||||
color: "success"
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -375,7 +406,7 @@ export default function NotificationsPage(props) {
|
|||
position: positions[notificationsPosition],
|
||||
progressClassName: classes.progress,
|
||||
onClose: notificationType === "error" && (() => setErrorToastId(null)),
|
||||
className: classes.notification,
|
||||
className: classes.notification
|
||||
});
|
||||
|
||||
if (notificationType === "error") setErrorToastId(toastId);
|
||||
|
@ -386,7 +417,6 @@ export default function NotificationsPage(props) {
|
|||
}
|
||||
}
|
||||
|
||||
// #############################################################
|
||||
function CloseButton({ closeToast, className }) {
|
||||
return <CloseIcon className={className} onClick={closeToast} />;
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@ const positions = [
|
|||
];
|
||||
|
||||
export default compose(
|
||||
withStyles(theme => ({
|
||||
withStyles((theme) => ({
|
||||
/*progress: {
|
||||
visibility: "hidden"
|
||||
},
|
||||
|
@ -34,7 +34,7 @@ export default compose(
|
|||
withState("notificationsPosition", "setNotificationPosition", 2),
|
||||
withState("errorToastId", "setErrorToastId", null),
|
||||
withHandlers({
|
||||
sendNotification: props => (componentProps, options) => {
|
||||
sendNotification: (props) => (componentProps, options) => {
|
||||
return toast(
|
||||
<Notification
|
||||
{...componentProps}
|
||||
|
@ -45,12 +45,12 @@ export default compose(
|
|||
}
|
||||
}),
|
||||
withHandlers({
|
||||
retryErrorNotification: props => () => {
|
||||
retryErrorNotification: (props) => () => {
|
||||
const componentProps = {
|
||||
type: "message",
|
||||
message: "Message was sent successfully!",
|
||||
variant: "contained",
|
||||
color: "success",
|
||||
color: "success"
|
||||
};
|
||||
|
||||
toast.update(props.errorToastId, {
|
||||
|
@ -61,7 +61,7 @@ export default compose(
|
|||
}
|
||||
}),
|
||||
withHandlers({
|
||||
handleNotificationCall: props => notificationType => {
|
||||
handleNotificationCall: (props) => (notificationType) => {
|
||||
let componentProps;
|
||||
|
||||
if (props.errorToastId && notificationType === "error") return;
|
||||
|
@ -105,7 +105,7 @@ export default compose(
|
|||
|
||||
if (notificationType === "error") props.setErrorToastId(toastId);
|
||||
},
|
||||
changeNotificationPosition: props => positionId => {
|
||||
changeNotificationPosition: (props) => (positionId) => {
|
||||
props.setNotificationPosition(positionId);
|
||||
}
|
||||
})
|
||||
|
|
|
@ -1,63 +1,141 @@
|
|||
import React from 'react';
|
||||
import { Grid, withStyles } from '@material-ui/core';
|
||||
import { Close as CloseIcon } from '@material-ui/icons';
|
||||
import classnames from 'classnames';
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import React from "react";
|
||||
import { Grid, withStyles } from "@material-ui/core";
|
||||
import { Close as CloseIcon } from "@material-ui/icons";
|
||||
import classnames from "classnames";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||||
import tinycolor from "tinycolor2";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
|
||||
import Widget from '../../components/Widget';
|
||||
import PageTitle from '../../components/PageTitle';
|
||||
import NotificationCustomComponent from '../../components/Notification';
|
||||
import { Typography, Button } from '../../components/Wrappers';
|
||||
import Widget from "../../components/Widget";
|
||||
import PageTitle from "../../components/PageTitle";
|
||||
import NotificationCustomComponent from "../../components/Notification";
|
||||
import { Typography, Button } from "../../components/Wrappers";
|
||||
|
||||
const CloseButton = ({ closeToast, className }) => (
|
||||
<CloseIcon
|
||||
className={className}
|
||||
onClick={closeToast}
|
||||
/>
|
||||
<CloseIcon className={className} onClick={closeToast} />
|
||||
);
|
||||
|
||||
const NotificationsPage = ({ classes, ...props }) => (
|
||||
<React.Fragment>
|
||||
<PageTitle title="Notifications" />
|
||||
<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}>
|
||||
<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.layoutButtonsRow}>
|
||||
<button onClick={() => props.changeNotificationPosition(0)} 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})} />
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(0)}
|
||||
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>
|
||||
<Typography className={classes.layoutText} size="md">Click any position</Typography>
|
||||
<Typography className={classes.layoutText} size="md">
|
||||
Click any position
|
||||
</Typography>
|
||||
<div className={classes.layoutButtonsRow}>
|
||||
<button onClick={() => props.changeNotificationPosition(3)} 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})} />
|
||||
<button
|
||||
onClick={() => props.changeNotificationPosition(3)}
|
||||
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>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<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}>
|
||||
<Button variant="contained" 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>
|
||||
<Button
|
||||
variant="contained"
|
||||
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>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<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}>
|
||||
<SyntaxHighlighter className={classes.codeComponent} language='javascript' style={docco}>{`
|
||||
<SyntaxHighlighter
|
||||
className={classes.codeComponent}
|
||||
language="javascript"
|
||||
style={docco}
|
||||
>{`
|
||||
// import needed components, functions and styles
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
@ -71,38 +149,148 @@ const NotificationsPage = ({ classes, ...props}) => (
|
|||
</div>
|
||||
};
|
||||
`}</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>
|
||||
</Widget>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent className={classes.notificationItem} shadowless type="message" message="Thanks for Checking out Messenger" 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" />
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
shadowless
|
||||
type="message"
|
||||
message="Thanks for Checking out Messenger"
|
||||
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>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" color="secondary" />
|
||||
<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" />
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="report"
|
||||
message="New report has been received"
|
||||
color="secondary"
|
||||
/>
|
||||
<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>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Widget title="Notification Types Examples" disableWidgetMenu>
|
||||
<NotificationCustomComponent className={classes.notificationItem} type="report" message="New report has been received" variant="rounded" 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" />
|
||||
<NotificationCustomComponent
|
||||
className={classes.notificationItem}
|
||||
type="report"
|
||||
message="New report has been received"
|
||||
variant="rounded"
|
||||
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>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
@ -112,63 +300,65 @@ const NotificationsPage = ({ classes, ...props}) => (
|
|||
const styles = (theme) => ({
|
||||
layoutContainer: {
|
||||
height: 200,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
border: '1px dashed',
|
||||
border: "1px dashed",
|
||||
borderColor: theme.palette.primary.main,
|
||||
position: 'relative',
|
||||
position: "relative"
|
||||
},
|
||||
layoutText: {
|
||||
color: tinycolor(theme.palette.background.light).darken().toHexString(),
|
||||
color: tinycolor(theme.palette.background.light).darken().toHexString()
|
||||
},
|
||||
layoutButtonsRow: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
},
|
||||
layoutButton: {
|
||||
backgroundColor: theme.palette.background.light,
|
||||
width: 125,
|
||||
height: 50,
|
||||
outline: 'none',
|
||||
border: 'none',
|
||||
outline: "none",
|
||||
border: "none"
|
||||
},
|
||||
layoutButtonActive: {
|
||||
backgroundColor: tinycolor(theme.palette.background.light).darken().toHexString(),
|
||||
backgroundColor: tinycolor(theme.palette.background.light)
|
||||
.darken()
|
||||
.toHexString()
|
||||
},
|
||||
buttonsContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
notificationCallButton: {
|
||||
color: 'white',
|
||||
color: "white",
|
||||
marginBottom: theme.spacing.unit,
|
||||
textTransform: 'none',
|
||||
textTransform: "none"
|
||||
},
|
||||
codeContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
codeComponent: {
|
||||
flexGrow: 1,
|
||||
flexGrow: 1
|
||||
},
|
||||
notificationItem: {
|
||||
marginTop: theme.spacing.unit * 2,
|
||||
marginTop: theme.spacing.unit * 2
|
||||
},
|
||||
notificationCloseButton: {
|
||||
position: 'absolute',
|
||||
right: theme.spacing.unit * 2,
|
||||
position: "absolute",
|
||||
right: theme.spacing.unit * 2
|
||||
},
|
||||
toastsContainer: {
|
||||
width: 400,
|
||||
marginTop: theme.spacing.unit * 6,
|
||||
right: 0,
|
||||
right: 0
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { makeStyles } from "@material-ui/styles";
|
||||
import tinycolor from "tinycolor2";
|
||||
|
||||
export default makeStyles(theme => ({
|
||||
export default makeStyles((theme) => ({
|
||||
layoutContainer: {
|
||||
height: 200,
|
||||
display: "flex",
|
||||
|
@ -11,73 +11,71 @@ export default makeStyles(theme => ({
|
|||
marginTop: theme.spacing(2),
|
||||
border: "1px dashed",
|
||||
borderColor: theme.palette.primary.main,
|
||||
position: "relative",
|
||||
position: "relative"
|
||||
},
|
||||
layoutText: {
|
||||
color: tinycolor(theme.palette.background.light)
|
||||
.darken()
|
||||
.toHexString(),
|
||||
color: tinycolor(theme.palette.background.light).darken().toHexString()
|
||||
},
|
||||
layoutButtonsRow: {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "space-between"
|
||||
},
|
||||
layoutButton: {
|
||||
backgroundColor: theme.palette.background.light,
|
||||
width: 125,
|
||||
height: 50,
|
||||
outline: "none",
|
||||
border: "none",
|
||||
border: "none"
|
||||
},
|
||||
layoutButtonActive: {
|
||||
backgroundColor: tinycolor(theme.palette.background.light)
|
||||
.darken()
|
||||
.toHexString(),
|
||||
.toHexString()
|
||||
},
|
||||
buttonsContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
marginTop: theme.spacing(2),
|
||||
marginTop: theme.spacing(2)
|
||||
},
|
||||
notificationCallButton: {
|
||||
color: "white",
|
||||
marginBottom: theme.spacing(1),
|
||||
textTransform: "none",
|
||||
textTransform: "none"
|
||||
},
|
||||
codeContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: theme.spacing(2),
|
||||
marginTop: theme.spacing(2)
|
||||
},
|
||||
codeComponent: {
|
||||
flexGrow: 1,
|
||||
flexGrow: 1
|
||||
},
|
||||
notificationItem: {
|
||||
marginTop: theme.spacing(2),
|
||||
marginTop: theme.spacing(2)
|
||||
},
|
||||
notificationCloseButton: {
|
||||
position: "absolute",
|
||||
right: theme.spacing(2),
|
||||
right: theme.spacing(2)
|
||||
},
|
||||
toastsContainer: {
|
||||
width: 400,
|
||||
marginTop: theme.spacing(6),
|
||||
right: 0,
|
||||
right: 0
|
||||
},
|
||||
progress: {
|
||||
visibility: "hidden",
|
||||
visibility: "hidden"
|
||||
},
|
||||
notification: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
background: "transparent",
|
||||
boxShadow: "none",
|
||||
overflow: "visible",
|
||||
overflow: "visible"
|
||||
},
|
||||
notificationComponent: {
|
||||
paddingRight: theme.spacing(4),
|
||||
paddingRight: theme.spacing(4)
|
||||
},
|
||||
widgetHeader: {
|
||||
paddingBottom: 8
|
||||
|
|
Loading…
Reference in New Issue