diff options
author | Abdullah Ahmed <abdullah_ahmed@brown.edu> | 2019-10-05 19:17:11 -0400 |
---|---|---|
committer | Abdullah Ahmed <abdullah_ahmed@brown.edu> | 2019-10-05 19:17:11 -0400 |
commit | 57b57b2d82b385ec9aa9d59c0899dc8f48a31223 (patch) | |
tree | ea9fef42849fc1341c6da1300bc4e5f25048cb14 /src/client/views/MainViewModal.tsx | |
parent | a44e12f4625caca5d75a456f0ba1ab977149ae6e (diff) | |
parent | 961cb1566e16edb353975ec436a4445c1cf3db0f (diff) |
meged
Diffstat (limited to 'src/client/views/MainViewModal.tsx')
-rw-r--r-- | src/client/views/MainViewModal.tsx | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx new file mode 100644 index 000000000..b7fdd6168 --- /dev/null +++ b/src/client/views/MainViewModal.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import "./MainViewModal.scss"; + +export interface MainViewOverlayProps { + isDisplayed: boolean; + interactive: boolean; + contents: string | JSX.Element; + dialogueBoxStyle?: React.CSSProperties; + overlayStyle?: React.CSSProperties; + dialogueBoxDisplayedOpacity?: number; + overlayDisplayedOpacity?: number; +} + +export default class MainViewModal extends React.Component<MainViewOverlayProps> { + + render() { + let p = this.props; + let dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1; + let overlayOpacity = p.overlayDisplayedOpacity || 0.4; + return ( + <div style={{ pointerEvents: p.isDisplayed ? p.interactive ? "all" : "none" : "none" }}> + <div + className={"dialogue-box"} + style={{ + backgroundColor: "gainsboro", + borderColor: "black", + ...(p.dialogueBoxStyle || {}), + opacity: p.isDisplayed ? dialogueOpacity : 0 + }} + >{p.contents}</div> + <div + className={"overlay"} + style={{ + backgroundColor: "gainsboro", + ...(p.overlayStyle || {}), + opacity: p.isDisplayed ? overlayOpacity : 0 + }} + /> + </div> + ); + } + + +}
\ No newline at end of file |