diff --git a/src/Components/RedirectModal.js b/src/Components/RedirectModal.js new file mode 100644 index 0000000000000000000000000000000000000000..b41d72ddefaf5a65f6c7b3dc02c7ab6d8b37094c --- /dev/null +++ b/src/Components/RedirectModal.js @@ -0,0 +1,172 @@ +/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre +Departamento de Informatica - Universidade Federal do Parana + +This file is part of Plataforma Integrada MEC. + +Plataforma Integrada MEC is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +Plataforma Integrada MEC is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ + +import React, {useEffect, useState} from 'react' +import styled from 'styled-components' +import { Button } from '@material-ui/core'; +import Modal from '@material-ui/core/Modal'; +import Backdrop from '@material-ui/core/Backdrop'; +import Fade from '@material-ui/core/Fade'; +import CloseIcon from '@material-ui/icons/Close'; + +function CloseModalButton (props) { + return ( + <StyledCloseModalButton onClick={props.handleClose}> + <CloseIcon/> + </StyledCloseModalButton> + ) +} + +const StyledCloseModalButton = styled(Button)` + display : inline-block; + position : absolute !important; + right : 8px; + top : 8px; + float : right !important; + margin-right : -8px !important; + background : transparent !important; + min-width: 0 !important; + + width : 40px; +` + + +export default function RedirectModal (props) { + + return ( + <StyledModal + aria-labelledby="transition-modal-title" + aria-describedby="transition-modal-description" + open={props.open} + animation={true} + centered={true} + onClose={props.handleClose} + closeAfterTransition + BackdropComponent={Backdrop} + BackdropProps={{ + timeout: 500, + }} + > + <Fade in={props.open}> + <Container> + <CloseModalButton handleClose={props.handleClose}/> + <Header> + <span style={{width:"32px"}}/> + <h2>Você será redirecionado para outro site</h2> + </Header> + <Content> + <span style={{fontWeight : "600"}}>Uma nova aba ou janela irá abrir, deseja continuar?</span> + <div style={{paddingTop : "20px", paddingBottom : "10px"}}> + Lembre-se de que você pode reportar caso considere o conteúdo abusivo/ofensivo ou caso a página não corresponda a descrição apresentada. + </div> + <section style={{display : "flex", flexDirection : "row", justifyContent : "center"}}> + <ButtonGrey onClick={props.handleClose}>CANCELAR</ButtonGrey> + <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}><ButtonOrange>CONTINUAR</ButtonOrange></a> + </section> + </Content> + </Container> + </Fade> + </StyledModal> + ) +} + +const ButtonOrange = styled(Button)` + box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important; + background-color : #ff7f00 !important; + color : #fff !important; + text-decoration : none !important; + text-transform : uppercase !important; + outline : none !important; + text-align : center !important; + max-height : 36px; + margin-top : 5px !important; + font-size : 14px !important; + font-weight : 600 !important; +` + + +const ButtonGrey = styled(Button)` + &:hover { + background-color : rgba(158,158,158,0.2) !important; + } + margin-top : 5px !important; + margin-right : 15px !important; + background-color : transparent !important; + color : #666 !important; + text-decoration : none !important; + outline : none !important; + text-align : center !important; + font-size : 14px !important; + font-weight : 600 !important; + +` + +const Content = styled.div` + color : #666; + padding : 20px 30px; + overflow : visible; + text-align : center; + font-size : 14px; +` +const Header = styled.div` + display : flex; + flex-direction : row; + align-items : center; + justify-content : space-between; + h2 { + font-size : 26px; + font-weight : lighter; + color : #666 + padding : 10px 20px 0 20px; + + } +` + +const StyledModal = styled(Modal)` + .djXaxP{ + margin : 0 !important; + } + display : flex; + align-items: center; + justify-content : center; + text-align : center; + padding : 10px !important; + max-width : none; + max-height : none; +` +const Container = styled.div` + box-sizing : border-box; + box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px gba(0,0,0,.12); + background-color : white; + align : center; + display : flex; + flex-direction : column; + min-width : 240px; + max-height : none; + position : relative; + padding : 10px; + border-radius : 4px; + @media screen and (min-width : 700px) { + max-width : 395px; + height : 326px; + } + @media screen and (max-width : 699px) { + width : 100%; + height : 100%; + } +`