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: "عنوان متن ارور",
text: "در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند",
confirmButtonText: "توضیح بیشتر",
showCloseButton: true,
showCloseButton: false,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
popup: "alert-popup4",
},
}).then((result) => {
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 (
<div className="mt-5">
<button className="btn btn-danger btn-lg" onClick={showAlert}>
@ -145,7 +227,18 @@ const Alert = () => {
<button className="btn btn-danger btn-lg" onClick={showAlert6}>
6 اررور
</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>
);
};

@ -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 {
background: #ffeaea;
color: #c70000;
background: var(--toast-bg-error) !important;
color: var(--error-color7) !important;
font-family: iransans;
}
/* error progress bar */
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
background: #c70000;
}
.Toastify__close-button > svg {
color: #000 !important;
background: var(--error-color7) !important;
}
/* TODO toast success */
/* success with icon */
.Toastify__toast-theme--colored.Toastify__toast--success {
color: #21ae0b !important;
background: #c3ffb9 !important;
color: var(--toast-success-color) !important;
background: var(--toast-bg-success) !important;
font-family: iransans;
}
/* success progress bar */
.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 notify = () =>
toast.success("اررور شماره 1", {
toast.error("اررور شماره 1", {
position: "top-right",
autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false,
draggable: true,
progress: undefined,
theme: "colored",
});
const notify2 = () =>
toast.error("اررور شماره 1", {
toast.success("اررور شماره 2", {
position: "top-right",
autoClose: false,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false,
draggable: true,
progress: undefined,
theme: "colored",
});
const notify3 = () =>
@ -31,8 +26,22 @@ const Toast = () => {
position: "top-right",
theme: "colored",
icon: false,
hideProgressBar: true,
});
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", {
position: "top-right",
theme: "colored",
@ -53,6 +62,12 @@ const Toast = () => {
<button onClick={notify4} className="btn btn-lg bg-warning">
toast notification 4
</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 />
</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