master
mahdi 3 years ago
parent 6e08743bf5
commit 39208b6568
  1. 101
      src/components/alert/Alert.js
  2. 27
      src/components/toast/Toast.css
  3. 29
      src/components/toast/Toast.js
  4. 38
      src/index.css

@ -68,14 +68,14 @@ const Alert = () => {
title: "عنوان متن ارور", title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند", text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر", confirmButtonText: "توضیح بیشتر",
showCloseButton: true, showCloseButton: false,
showCancelButton: true, showCancelButton: true,
cancelButtonText: "متوجه شدم", cancelButtonText: "متوجه شدم",
customClass: { customClass: {
title: "title-error-4", title: "title-error-4",
closeButton: "close-button-2",
confirmButton: "confirm-button-2", confirmButton: "confirm-button-2",
cancelButton: "cancle-button2", cancelButton: "cancle-button2",
popup: "alert-popup4",
}, },
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
@ -124,7 +124,89 @@ const Alert = () => {
} }
}); });
}; };
// error7
const showAlert7 = () => {
Swal.fire({
title: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-7",
closeButton: "close-button-7",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error8
const showAlert8 = () => {
Swal.fire({
icon: "error",
title: "این یک متن موفقیت امیز است!!!",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: false,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-8",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
popup: "alert-popup8",
},
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
};
// error9
const showAlert9 = () => {
Swal.fire({
title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
footer: '<a href="">یک لینک در این قسمت است</a>',
customClass: {
title: "title-error-9",
closeButton: "close-button-9",
confirmButton: "confirm-button-9",
cancelButton: "cancle-button9",
popup: "alert-popup9",
footer: "footer-error-9",
},
});
};
// error10
const showAlert10 = () => {
Swal.fire({
title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
footer: '<a href="">یک لینک در این قسمت است</a>',
customClass: {
title: "title-error-9",
closeButton: "close-button-10",
confirmButton: "confirm-button-10",
cancelButton: "cancle-button10",
popup: "alert-popup10",
footer: "footer-error-9",
},
});
};
return ( return (
<div className="mt-5"> <div className="mt-5">
<button className="btn btn-danger btn-lg" onClick={showAlert}> <button className="btn btn-danger btn-lg" onClick={showAlert}>
@ -145,7 +227,18 @@ const Alert = () => {
<button className="btn btn-danger btn-lg" onClick={showAlert6}> <button className="btn btn-danger btn-lg" onClick={showAlert6}>
6 اررور 6 اررور
</button> </button>
<button className="btn btn-danger btn-lg">7 اررور</button> <button className="btn btn-danger btn-lg" onClick={showAlert7}>
7 اررور
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert8}>
8 اررور
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert9}>
9 اررور
</button>
<button className="btn btn-danger btn-lg" onClick={showAlert10}>
10 اررور
</button>
</div> </div>
); );
}; };

@ -1,17 +1,26 @@
/* ? common styles */
.Toastify__close-button > svg {
color: var(--black) !important;
}
/* TODO toast error */
/* error1 with icon */
.Toastify__toast-theme--colored.Toastify__toast--error { .Toastify__toast-theme--colored.Toastify__toast--error {
background: #ffeaea; background: var(--toast-bg-error) !important;
color: #c70000; color: var(--error-color7) !important;
font-family: iransans;
} }
/* error progress bar */
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error { .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
background: #c70000; background: var(--error-color7) !important;
}
.Toastify__close-button > svg {
color: #000 !important;
} }
/* TODO toast success */
/* success with icon */
.Toastify__toast-theme--colored.Toastify__toast--success { .Toastify__toast-theme--colored.Toastify__toast--success {
color: #21ae0b !important; color: var(--toast-success-color) !important;
background: #c3ffb9 !important; background: var(--toast-bg-success) !important;
font-family: iransans;
} }
/* success progress bar */
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success { .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
background: #21ae0b !important; background: var(--toast-success-color) !important;
} }

@ -5,25 +5,20 @@ import "./Toast.css";
const Toast = () => { const Toast = () => {
const notify = () => const notify = () =>
toast.success("اررور شماره 1", { toast.error("اررور شماره 1", {
position: "top-right", position: "top-right",
autoClose: false, autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false, pauseOnHover: false,
draggable: true, draggable: true,
progress: undefined,
theme: "colored", theme: "colored",
}); });
const notify2 = () => const notify2 = () =>
toast.error("اررور شماره 1", { toast.success("اررور شماره 2", {
position: "top-right", position: "top-right",
autoClose: false, autoClose: false,
hideProgressBar: false,
closeOnClick: true, closeOnClick: true,
pauseOnHover: false, pauseOnHover: false,
draggable: true, draggable: true,
progress: undefined,
theme: "colored", theme: "colored",
}); });
const notify3 = () => const notify3 = () =>
@ -31,8 +26,22 @@ const Toast = () => {
position: "top-right", position: "top-right",
theme: "colored", theme: "colored",
icon: false, icon: false,
hideProgressBar: true,
}); });
const notify4 = () => const notify4 = () =>
toast.error("اررور شماره 1", {
position: "top-right",
theme: "colored",
icon: false,
});
const notify5 = () =>
toast.success("اررور شماره 1", {
position: "top-right",
theme: "colored",
icon: false,
hideProgressBar: true,
});
const notify6 = () =>
toast.success("اررور شماره 1", { toast.success("اررور شماره 1", {
position: "top-right", position: "top-right",
theme: "colored", theme: "colored",
@ -53,6 +62,12 @@ const Toast = () => {
<button onClick={notify4} className="btn btn-lg bg-warning"> <button onClick={notify4} className="btn btn-lg bg-warning">
toast notification 4 toast notification 4
</button> </button>
<button onClick={notify5} className="btn btn-lg bg-warning">
toast notification 5
</button>
<button onClick={notify6} className="btn btn-lg bg-warning">
toast notification 6
</button>
<ToastContainer position="top-right" rtl /> <ToastContainer position="top-right" rtl />
</div> </div>

@ -0,0 +1,38 @@
:root {
--error-color1: #06bace;
--error-color2: #3ee924;
--error-color7: #c70000;
--error-color7-button: #e92424;
--white: #fff;
--black: #000;
--content-color: #646464;
--toast-bg-error: #ffeaea;
--toast-bg-success: #c3ffb9;
--toast-success-color: #21ae0b;
}
body {
background-color: #f5f5f5 !important;
direction: rtl;
font-family: iransans;
}
@font-face {
font-family: "iransans";
src: local("iransans"),
url(./iransans/woff/IRANSansWeb_Medium.woff) format("woff"),
url(./iransans/woff2/IRANSansWeb_Medium.woff2) format("woff2"),
url(./iransans/eot/IRANSansWeb_Medium.eot) format("eot"),
url(./iransans/ttf/IRANSansWeb_Medium.ttf) format("ttf");
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button {
font-family: iransans;
}
Loading…
Cancel
Save