diff options
| author | andrewdkim <adkim414@gmail.com> | 2019-10-01 18:55:50 -0400 | 
|---|---|---|
| committer | andrewdkim <adkim414@gmail.com> | 2019-10-01 18:55:50 -0400 | 
| commit | 23619154f8688ffcb25a988158d75934c0cacbf7 (patch) | |
| tree | d7462da0f0e8b9de091263af166959872e8af0f6 /src/client/views/MainViewModal.tsx | |
| parent | 45b9f489033cd323614463ca9c36f41900bf1965 (diff) | |
| parent | 69e4a936c4eb0cc2e35e4e7f3258aed1f72b8da7 (diff) | |
still unfinished
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  | 
