From 32d55809b88f52d1e0743dd30babcf5f2315df9c Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:44:49 +0530 Subject: [PATCH 1/6] update --- src/Components/Main/Main.js | 16 ++++- src/Components/Modal/Modal.js | 34 +++++++++ src/Components/Modal/modal.css | 122 +++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/Components/Modal/Modal.js create mode 100644 src/Components/Modal/modal.css diff --git a/src/Components/Main/Main.js b/src/Components/Main/Main.js index 89cd0ca..2fe19a2 100644 --- a/src/Components/Main/Main.js +++ b/src/Components/Main/Main.js @@ -26,6 +26,7 @@ import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import io from 'socket.io-client'; import Notification from '../Notification/Notification'; +import Modal from '../Modal/Modal'; class Main extends React.Component { @@ -79,6 +80,8 @@ class Main extends React.Component { this.checkForSocketWatcher = this.checkForSocketWatcher.bind(this); this.socket = null; + this.showModal = this.showModal.bind(this); + this.hideModal = this.hideModal.bind(this); } getLocalStorageData() { @@ -149,9 +152,18 @@ class Main extends React.Component { })) } + showModal() { + this.setState({ show: true }); + }; + + hideModal() { + this.setState({show:false}); + }; + clearBoard() { // this.sketchField.current.zoom(Number.MAX_SAFE_INTEGER) this.sketchField.current.clear(); + this.setState({show:false}); // const canvas = this.sketchField.current._canvas // const ctx = canvas.getContext('2d'); // const currColor = this.props.theme === 'light' ? '#fff' : '#000'; @@ -384,7 +396,9 @@ class Main extends React.Component { { this.state.showColorPicker && } - + + + } diff --git a/src/Components/Modal/Modal.js b/src/Components/Modal/Modal.js new file mode 100644 index 0000000..6f87234 --- /dev/null +++ b/src/Components/Modal/Modal.js @@ -0,0 +1,34 @@ +import React from 'react'; +import './modal.css'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +function Modal({ handleClose, handleConfirm , show, children }) { + const showHideClassName = show ? "modal display-block" : "modal display-none"; + + return ( + <>
+
+ {children} +
+
+ +

Are you sure?

+
+

this action cannot be undo

+ +
+
+ + +
+
+
+ ); +} + +export default Modal \ No newline at end of file diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css new file mode 100644 index 0000000..f28c479 --- /dev/null +++ b/src/Components/Modal/modal.css @@ -0,0 +1,122 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width:100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modal-main { + position:fixed; + background: white; + height: 200px; + width: 500px; + top:50%; + left:50%; + transform: translate(-50%,-50%); + border-radius: 0.3rem; + +} +.warning-container{ + display: flex; + align-items: center; + justify-content: center; + padding-right: 10px; +} + +.war-icon{ + color: rgb(230, 57, 57); +} +.display-block { + display: block; +} + +.display-none { + display: none; +} + +/* button { + +} */ + +.btn-container{ + display: flex; + align-items: center; + justify-content: center; +} + +.btn-1:hover { + background-color: #044ab3; +} + +.btn-2:hover { + background-color: #37393c; +} + + +.heading-popup{ + text-align: center; + margin-left: 10px; +} + +.subheading-popup{ + text-align: center; + font-size: large; + font-weight: 200; +} + +.btn-2{ + color: #fff; + background-color: #5c636a; + border-color: #565e64; +} + +.btn-1{ + color: #fff; + background-color: #0b5ed7; + border-color: #0a58ca; +} + +button{ + margin: .25rem; + display: inline-block; + font-weight: 400; + line-height: 1.5; + text-align: center; + text-decoration: none; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + user-select: none; + -webkit-appearance: button; + text-transform: none; + margin: 20px 50px 10px 50px; + width: 70px; + cursor: pointer; +} + + +@media (max-width:414px){ + .modal-main { + padding: 8px; + height: 140px; + width: 200px; + top: 40%; + } + .btn-container{ + height: 35px; + } + button{ + line-height: 1; + margin: 3px; + } + .warning-container{ + height: 39px; + } + .subheading-popup{ + font-weight:lighter; + } +} \ No newline at end of file From ec388c6758038f0906937801fd2673b51a1377b8 Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:48:37 +0530 Subject: [PATCH 2/6] update --- src/Components/Main/Main.js | 16 ++++- src/Components/Modal/Modal.js | 34 +++++++++ src/Components/Modal/modal.css | 122 +++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/Components/Modal/Modal.js create mode 100644 src/Components/Modal/modal.css diff --git a/src/Components/Main/Main.js b/src/Components/Main/Main.js index 89cd0ca..2fe19a2 100644 --- a/src/Components/Main/Main.js +++ b/src/Components/Main/Main.js @@ -26,6 +26,7 @@ import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import io from 'socket.io-client'; import Notification from '../Notification/Notification'; +import Modal from '../Modal/Modal'; class Main extends React.Component { @@ -79,6 +80,8 @@ class Main extends React.Component { this.checkForSocketWatcher = this.checkForSocketWatcher.bind(this); this.socket = null; + this.showModal = this.showModal.bind(this); + this.hideModal = this.hideModal.bind(this); } getLocalStorageData() { @@ -149,9 +152,18 @@ class Main extends React.Component { })) } + showModal() { + this.setState({ show: true }); + }; + + hideModal() { + this.setState({show:false}); + }; + clearBoard() { // this.sketchField.current.zoom(Number.MAX_SAFE_INTEGER) this.sketchField.current.clear(); + this.setState({show:false}); // const canvas = this.sketchField.current._canvas // const ctx = canvas.getContext('2d'); // const currColor = this.props.theme === 'light' ? '#fff' : '#000'; @@ -384,7 +396,9 @@ class Main extends React.Component { { this.state.showColorPicker && } - + + + } diff --git a/src/Components/Modal/Modal.js b/src/Components/Modal/Modal.js new file mode 100644 index 0000000..6f87234 --- /dev/null +++ b/src/Components/Modal/Modal.js @@ -0,0 +1,34 @@ +import React from 'react'; +import './modal.css'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +function Modal({ handleClose, handleConfirm , show, children }) { + const showHideClassName = show ? "modal display-block" : "modal display-none"; + + return ( + <>
+
+ {children} +
+
+ +

Are you sure?

+
+

this action cannot be undo

+ +
+
+ + +
+
+
+ ); +} + +export default Modal \ No newline at end of file diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css new file mode 100644 index 0000000..f28c479 --- /dev/null +++ b/src/Components/Modal/modal.css @@ -0,0 +1,122 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width:100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modal-main { + position:fixed; + background: white; + height: 200px; + width: 500px; + top:50%; + left:50%; + transform: translate(-50%,-50%); + border-radius: 0.3rem; + +} +.warning-container{ + display: flex; + align-items: center; + justify-content: center; + padding-right: 10px; +} + +.war-icon{ + color: rgb(230, 57, 57); +} +.display-block { + display: block; +} + +.display-none { + display: none; +} + +/* button { + +} */ + +.btn-container{ + display: flex; + align-items: center; + justify-content: center; +} + +.btn-1:hover { + background-color: #044ab3; +} + +.btn-2:hover { + background-color: #37393c; +} + + +.heading-popup{ + text-align: center; + margin-left: 10px; +} + +.subheading-popup{ + text-align: center; + font-size: large; + font-weight: 200; +} + +.btn-2{ + color: #fff; + background-color: #5c636a; + border-color: #565e64; +} + +.btn-1{ + color: #fff; + background-color: #0b5ed7; + border-color: #0a58ca; +} + +button{ + margin: .25rem; + display: inline-block; + font-weight: 400; + line-height: 1.5; + text-align: center; + text-decoration: none; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + user-select: none; + -webkit-appearance: button; + text-transform: none; + margin: 20px 50px 10px 50px; + width: 70px; + cursor: pointer; +} + + +@media (max-width:414px){ + .modal-main { + padding: 8px; + height: 140px; + width: 200px; + top: 40%; + } + .btn-container{ + height: 35px; + } + button{ + line-height: 1; + margin: 3px; + } + .warning-container{ + height: 39px; + } + .subheading-popup{ + font-weight:lighter; + } +} \ No newline at end of file From cba65fa5886c6d77610a67b58fd35ba2559bf4d1 Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:51:01 +0530 Subject: [PATCH 3/6] added warning modal --- src/Components/Main/Main.js | 16 ++++- src/Components/Modal/Modal.js | 34 +++++++++ src/Components/Modal/modal.css | 122 +++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/Components/Modal/Modal.js create mode 100644 src/Components/Modal/modal.css diff --git a/src/Components/Main/Main.js b/src/Components/Main/Main.js index 89cd0ca..2fe19a2 100644 --- a/src/Components/Main/Main.js +++ b/src/Components/Main/Main.js @@ -26,6 +26,7 @@ import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import io from 'socket.io-client'; import Notification from '../Notification/Notification'; +import Modal from '../Modal/Modal'; class Main extends React.Component { @@ -79,6 +80,8 @@ class Main extends React.Component { this.checkForSocketWatcher = this.checkForSocketWatcher.bind(this); this.socket = null; + this.showModal = this.showModal.bind(this); + this.hideModal = this.hideModal.bind(this); } getLocalStorageData() { @@ -149,9 +152,18 @@ class Main extends React.Component { })) } + showModal() { + this.setState({ show: true }); + }; + + hideModal() { + this.setState({show:false}); + }; + clearBoard() { // this.sketchField.current.zoom(Number.MAX_SAFE_INTEGER) this.sketchField.current.clear(); + this.setState({show:false}); // const canvas = this.sketchField.current._canvas // const ctx = canvas.getContext('2d'); // const currColor = this.props.theme === 'light' ? '#fff' : '#000'; @@ -384,7 +396,9 @@ class Main extends React.Component { { this.state.showColorPicker && } - + + + } diff --git a/src/Components/Modal/Modal.js b/src/Components/Modal/Modal.js new file mode 100644 index 0000000..6f87234 --- /dev/null +++ b/src/Components/Modal/Modal.js @@ -0,0 +1,34 @@ +import React from 'react'; +import './modal.css'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +function Modal({ handleClose, handleConfirm , show, children }) { + const showHideClassName = show ? "modal display-block" : "modal display-none"; + + return ( + <>
+
+ {children} +
+
+ +

Are you sure?

+
+

this action cannot be undo

+ +
+
+ + +
+
+
+ ); +} + +export default Modal \ No newline at end of file diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css new file mode 100644 index 0000000..f28c479 --- /dev/null +++ b/src/Components/Modal/modal.css @@ -0,0 +1,122 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width:100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modal-main { + position:fixed; + background: white; + height: 200px; + width: 500px; + top:50%; + left:50%; + transform: translate(-50%,-50%); + border-radius: 0.3rem; + +} +.warning-container{ + display: flex; + align-items: center; + justify-content: center; + padding-right: 10px; +} + +.war-icon{ + color: rgb(230, 57, 57); +} +.display-block { + display: block; +} + +.display-none { + display: none; +} + +/* button { + +} */ + +.btn-container{ + display: flex; + align-items: center; + justify-content: center; +} + +.btn-1:hover { + background-color: #044ab3; +} + +.btn-2:hover { + background-color: #37393c; +} + + +.heading-popup{ + text-align: center; + margin-left: 10px; +} + +.subheading-popup{ + text-align: center; + font-size: large; + font-weight: 200; +} + +.btn-2{ + color: #fff; + background-color: #5c636a; + border-color: #565e64; +} + +.btn-1{ + color: #fff; + background-color: #0b5ed7; + border-color: #0a58ca; +} + +button{ + margin: .25rem; + display: inline-block; + font-weight: 400; + line-height: 1.5; + text-align: center; + text-decoration: none; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + user-select: none; + -webkit-appearance: button; + text-transform: none; + margin: 20px 50px 10px 50px; + width: 70px; + cursor: pointer; +} + + +@media (max-width:414px){ + .modal-main { + padding: 8px; + height: 140px; + width: 200px; + top: 40%; + } + .btn-container{ + height: 35px; + } + button{ + line-height: 1; + margin: 3px; + } + .warning-container{ + height: 39px; + } + .subheading-popup{ + font-weight:lighter; + } +} \ No newline at end of file From 1a95b917609d8d4b72c5890f80e0641a90b43b0f Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:53:29 +0530 Subject: [PATCH 4/6] update --- src/Components/Modal/modal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css index f28c479..96295e2 100644 --- a/src/Components/Modal/modal.css +++ b/src/Components/Modal/modal.css @@ -15,7 +15,7 @@ top:50%; left:50%; transform: translate(-50%,-50%); - border-radius: 0.3rem; + border-radius: 0.31rem; } .warning-container{ From 87c18f8b5eb7b8fa205f60444dc904a2519cee11 Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:55:21 +0530 Subject: [PATCH 5/6] added warning modal --- src/Components/Modal/modal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css index 96295e2..f28c479 100644 --- a/src/Components/Modal/modal.css +++ b/src/Components/Modal/modal.css @@ -15,7 +15,7 @@ top:50%; left:50%; transform: translate(-50%,-50%); - border-radius: 0.31rem; + border-radius: 0.3rem; } .warning-container{ From 856ecaf5a9435a44bb42a9fdfe4e9a342d00c4da Mon Sep 17 00:00:00 2001 From: KamalSinghKhanna Date: Thu, 16 Jun 2022 11:57:48 +0530 Subject: [PATCH 6/6] updated --- src/Components/Modal/modal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Modal/modal.css b/src/Components/Modal/modal.css index f28c479..96295e2 100644 --- a/src/Components/Modal/modal.css +++ b/src/Components/Modal/modal.css @@ -15,7 +15,7 @@ top:50%; left:50%; transform: translate(-50%,-50%); - border-radius: 0.3rem; + border-radius: 0.31rem; } .warning-container{