diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js index 076569fe9c5ebe7d20f97a07f05eef028a89bf1d..0f89f397c39105fc897c61a0ecaf2b38f22d2f42 100644 --- a/src/Components/UploadPageComponents/PartThree.js +++ b/src/Components/UploadPageComponents/PartThree.js @@ -34,6 +34,7 @@ import ModalCancelar from './ModalCancelar.js' import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail' import { getRequest } from '../HelperFunctions/getAxiosConfig.js' import ReCaptcha from 'react-recaptcha' +import Chip from '@material-ui/core/Chip' export default function PartThree(props) { var moment = require('moment') @@ -50,7 +51,7 @@ export default function PartThree(props) { console.log(data.tags) console.log(data.language) console.log(data.subjects) - // console.log(data.tags) + console.log(data) setDraft(data) /*extract subjects*/ @@ -71,7 +72,6 @@ export default function PartThree(props) { } }, [state.currentUser.id]) - let windowWidth = window.innerWidth const [modalCancelar, toggleModalCancelar] = useState(false) const checkAccessLevel = (levelToCheck) => { @@ -105,403 +105,281 @@ export default function PartThree(props) { <Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}> <Grid item xs={12}> <StyledSessao1 contrast={props.contrast} className="page-content-preview"> - <div className="cabecalho"> - <div className="feedback-upload"> - <Stepper contrast={props.contrast} activeStep={props.activeStep} /> - <h2>Quase lá, agora só falta publicar!</h2> - <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span> - </div> + <div className='header'> + <Stepper activeStep={props.activeStep} contrast={props.contrast} /> + <h2>Quase lá, agora só falta publicar!</h2> + <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span> </div> </StyledSessao1> - <CaixaContainer contrast={props.contrast}> - <div> - <div className="cabecalho-objeto"> - <img alt="" className="img-objeto" + <MainContent contrast={props.contrast} > + <CaixaContainer contrast={props.contrast} container spacing={2} className='draft-info'> + <Grid item xs={12} md={4}> + <img alt="" style={{ width: "100%", height: '100%' }} src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} /> - <div className="texto-objeto"> - <h3>{draft.name}</h3> - <div className="relacionado"> - Relacionado com: {subjects} - </div> - - { - draft.tags && - <div className="tags-objeto"> - Palavras chave: <br/> - {draft.tags.map((tag) => { - return ( - <div className="tag" key={tag.name}>{tag.name}</div> - ) - })} - </div> - } - - </div> - </div> - - <div className="sobre-objeto"> + </Grid> + <Grid item xs={12} md={8}> + <Grid container justify='space-between'> + <Grid item xs={12}> + <h3>{draft.name}</h3> + </Grid> + <Grid item xs={12}> + <Grid container spacing={1}> + <Grid item xs={12}> + <Rating + readOnly + name="customized-empty" + value={draft.score} + precision={0.5} + style={props.contrast === "" ? { color: "#666" } : { color: "white" }} + emptyIcon={<StarBorderIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} fontSize="inherit" />} + /> + </Grid> + <Grid item xs={12}> + Relacionado com: {subjects} + </Grid> + <Grid item xs={12}> + { + draft.tags && + draft.tags.map((tag) => { + return ( + <Chip className='tag' key={tag.name} label={tag.name} /> + ) + }) + } + </Grid> + </Grid> + </Grid> + </Grid> + </Grid> + </CaixaContainer> + </MainContent> + <MainContent contrast={props.contrast}> + <CaixaContainer contrast={props.contrast} container spacing={2}> + <Grid item xs={12}> + <h1 className='title'> + Sobre o recurso + </h1> + </Grid> + <Grid item xs={12}> + <hr /> + </Grid> + <Grid item xs={12} sm={6}> <Grid container> - <Grid item xs={windowWidth > 990 ? 7 : 12} className="left"> - <div className="titulo"> - Sobre o Recurso - </div> - <div className="sobre-conteudo"> - <p className="descricao">{description}</p> - { - author !== '' && - <p className="autor"> - <b>Autoria:</b> - <br /> - {author} - </p> - } - </div> + <Grid item xs={12}> + { + description !== '' && + <p> + <b>Descrição:</b> + <br /> + {description} + </p> + } + </Grid> + <Grid item xs={12}> + { + author !== '' && + <p> + <b>Autoria:</b> + <br /> + {author} + </p> + } + </Grid> + </Grid> + </Grid> + <Grid item xs={12} sm={6}> + <Grid container spacing={1}> + <Grid item xs={12}> + <Grid container direction='row' spacing={1} alignItems='center'> + <Grid item> + <MoreIcon /> + </Grid> + <Grid item> + <b>Tipo de mÃdia: </b>{draft.object_type} + </Grid> + </Grid> </Grid> - <Grid item xs={windowWidth > 990 ? 4 : 12} className="right"> - <span className="meta-objeto"> - <MoreIcon /> <b>Tipo de mÃdia: </b>{draft.object_type} - </span> - - <span className="meta-objeto"> - <SdCardIcon /> <b>Tamanho: </b> - </span> + <Grid item xs={12}> + <Grid container direction='row' spacing={1} alignItems='center'> + <Grid item> + <SdCardIcon /> + </Grid> + <Grid item> + <b>Tamanho: </b>{draft.attachments ? (draft.attachments[0].size / 1000000).toFixed(2) + ' Mb' : "Informação não disponÃvel"} + </Grid> + </Grid> + </Grid> - <span className="meta-objeto"> - <DateRangeIcon /> <b>Enviado: </b> - {moment(draft.created_at).format("DD/MM/YYYY")} - </span> + <Grid item xs={12}> + <Grid container direction='row' spacing={1} alignItems='center'> + <Grid item> + <DateRangeIcon /> + </Grid> + <Grid item> + <b>Enviado: </b> + {moment(draft.created_at).format("DD/MM/YYYY")} + </Grid> + </Grid> + </Grid> - <span className="meta-objeto"> - <UpdateIcon /><b>Atualização: </b> - {moment(draft.updated_at).format("DD/MM/YYYY")} - </span> + <Grid item xs={12}> + <Grid container direction='row' spacing={1} alignItems='center'> + <Grid item> + <UpdateIcon /> + </Grid> + <Grid item> + <b>Atualização: </b> + {moment(draft.updated_at).format("DD/MM/YYYY")} + </Grid> + </Grid> + </Grid> + <Grid item xs={12}> {draft.language && draft.language.map((language => - <span className="meta-objeto" key={language.id}> - <TranslateIcon /><b>Idioma: </b>{language.name} - </span> + <Grid key={language.id} container direction='row' spacing={1} alignItems='center'> + <Grid item> + <TranslateIcon /> + </Grid> + <Grid item> + <b>Idioma: </b>{language.name} + </Grid> + </Grid> )) } + </Grid> + + <Grid item xs={12}> + <Grid container direction='row' spacing={1} alignItems='center'> + <Grid item> + <AssignmentIcon /> + </Grid> + <Grid item> + <b>Licença: </b>{draft.license ? draft.license.name : "Informação não disponÃvel"} - <span className="meta-objeto"> - <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""} - </span> + </Grid> + </Grid> </Grid> </Grid> - </div> - </div> - </CaixaContainer> - <Sessao3 contrast={props.contrast}> - <form> - <Grid container> - <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'right' : 'center' }}> - <span style={{ fontSize: "14px" }}> - Para segurança da plataforma <br /> marque que você não é um robô - </span> + </Grid> + </CaixaContainer> + </MainContent> + <MainContent contrast={props.contrast}> + <CaixaContainer contrast={props.contrast} container spacing={2} justify='center' alignItems='center'> + <Grid item xs={12} className='center'> + <Grid container direction='row' alignItems='center' justify='space-between' > + <Grid item> + <h4> + Para segurança da plataforma marque que você não é um robô + </h4> + </Grid> + <Grid item> + <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> + </Grid> </Grid> - <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px" }}> - <div style={{ margin: "0 auto", width: "304px" }}> + </Grid> + <Grid item xs={12} className='center'> + <Grid container direction='row' spacing={1} alignItems='center' justify='center'> + <Grid item> + <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton> + </Grid> + <Grid item> + <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton> + </Grid> + <Grid item> { - //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env - //<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production - <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production - } - </div> - </Grid> - <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}> - <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton> - <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton> - { - checkAccessLevel("partner") ? - ( - unavailableButton ? ( - <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton> - ) - : + checkAccessLevel("partner") ? ( - <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton> - ) - ) - : - ( - unavailableButton ? ( - <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton> + unavailableButton ? ( + <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton> + ) + : + ( + <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton> + ) ) : ( - <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton> - ) - ) + unavailableButton ? ( + <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton> + ) + : + ( + <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton> + ) + ) - } + } + </Grid> </Grid> </Grid> - </form> - </Sessao3> + </CaixaContainer> + </MainContent> </Grid> </Grid> </React.Fragment> ) : ( - <LoadingSpinner contrast={props.contrast} text="CARREGANDO" /> + <LoadingSpinner text="CARREGANDO" contrast={props.contrast} /> ) } - </React.Fragment> + </React.Fragment > ) } -const Sessao3 = styled.div` - position : relative; - top : -120px; - padding-right :15px; - padding-left :15px; - margin-right : auto; - margin-left : auto; - @media screen and (min-width: 768px) { - width : 750px; - } - @media screen and (min-width: 992px) { - width : 970px; - } - @media screen and (min-width: 1200px) { - width : 970px; - } +const MainContent = styled.div` color: ${props => props.contrast === "" ? "#666" : "white"}; - background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"}; - + border-radius : 5px; + padding : 20px 10px; + width: 80%; + margin: 1.5em auto; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); ` -const CaixaContainer = styled.div` - background: ${props => props.contrast === "" ? "rgba(238,238,238,.5)" : "black"}; - color: ${props => props.contrast === "" ? "#666" : "white"}; - border-radius : 5px; - position : relative; - top : -145px; - padding : 10px; +const CaixaContainer = styled(Grid)` + width: 100%; - - margin-right : auto; - margin-left : auto; - @media screen and (min-width: 768px) { - width : 750px; + .draft-info{ + padding : 10px 5px; } - @media screen and (min-width: 992px) { - width : 970px; - } - @media screen and (min-width: 1200px) { - width : 970px; - } - - - .cabecalho-objeto { - background: ${props => props.contrast === "" ? "#fff" : "black"}; - border: ${props => props.contrast === "" ? "0" : "1px solid white"}; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - padding: 0; - margin-top: 30px; - margin-bottom: 30px; - position: relative; - min-height: 100px; - margin-top: 0; - margin-bottom: 10px; - color: ${props => props.contrast === "" ? "#666" : "white"}; - overflow: auto; - - .img-objeto { - background: ${props => props.contrast === "" ? "#e5e5e5" : "black"}; - height: 270px; - width: 400px; - float: left; - padding: 0; - } - .texto-objeto { - padding: 20px 20px 0 20px; - height: content; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - - h3 { - font-size: 26px; - font-weight: 400; - margin: 0; - padding-bottom: 15px; - } - - .rating-objeto { - margin : 0; - display : inline-flex; - padding-bottom : 10px; - } - - .relacionado { - font-weight : 500; - font-size : 13px; - } - - .tags-objeto { - max-height: 54px; - font-size: .8em; - overflow: hidden; - clear: both; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - - .tag { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - margin-right: 3px; - background: ${props => props.contrast === "" ? "#e5e5e5" : "black"}; - border: ${props => props.contrast === "" ? "0" : "1px solid white"}; - padding: 3px 7px; - border-radius: 15px; - line-height: 18px; - margin-bottom: 3px; - } - } - } + .tag{ + color: ${props => props.contrast === "" ? "black" : "white"}; + background: ${props => props.contrast === "" ? "#d4d4d4" : "black"}; + border: ${props => props.contrast === "" ? "none" : "1px solid white"}; + margin: 0.2em; } - .sobre-objeto { - margin-top : 0; - margin-bottom : 0; - min-height : 275px; - display : flex; - background: ${props => props.contrast === "" ? "#fff" : "black"}; - border: ${props => props.contrast === "" ? "0" : "1px solid white"}; - box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - padding: 0; - position: relative; - min-height: 500px; - - .left { - @media screen and (min-width : 990px) { - margin-left : 4% !important; - margin-top : 4% !important; - } - - @media screen and (max-width : 989px) { - margin : 0; - padding : 20px; - padding-bottom : 0; - } - - .titulo { - margin-top: 2% !important; - margin-bottom: 10px; - font-family: 'Roboto Light','Roboto Regular',Roboto; - font-weight: 300; - font-style: normal; - font-size: 1.857em; - } - - .sobre-conteudo { - flex : 1; - font-size : 14px !important; - - .descricao { - text-align: justify; - margin-bottom: 20px; - margin-top: 20px; - } - - .autor { - margin : 0 0 10px !important; - } - } - } - - .right { - margin-top : 4% !important; - border-left: 1px solid #e5e5e5; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - padding: 20px; - position : relative; - margin-bottom : 20px; - - .meta-objeto { - position: relative; - width: 100%; - font-size: 14px; - margin-bottom: 20px; - display : inline-block; - } + .title{ + text-align: center; + font-weight: lighter; + } - .MuiSvgIcon-root { - vertical-align : middle !important; - margin-right : 15px !important; - } - } + .center{ + text-align: center; } -} ` const StyledSessao1 = styled.div` color : #fff; background: ${props => props.contrast === "" ? "#00bcd4" : "black"}; - float : none; height : 300px; - text-align : center; padding-top : 48px; padding-bottom : 48px; - margin-bottom : 30px; - - .cabecalho { - display : flex; - flex-direction : column; - align-items : center; - margin-bottom : 30px; - - .feedback-upload { - display : flex; - flex-direction : column; - justify-content : center; - text-align : center; - margin-top : 20px; - width : 55%; - } - - h2 { - margin-top : 0; - font-size : 26px; - font-weight : lighter; - margin-bottom : 10px; - } - - .subtitle { - font-size : 16px; - - } + flex-direction : column; + justify-content: center; + align-items: center; + display: flex; + + .header{ + width: 50%; + margin: 0 auto; + text-align: center; } ` diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js index 4175e17f10d43636e90f912f49f8866e6ee1501b..95c1ff20bf76ee1a7aa5965175c3ab07dee9529f 100644 --- a/src/Components/UploadPageComponents/Stepper.js +++ b/src/Components/UploadPageComponents/Stepper.js @@ -22,26 +22,44 @@ import Check from '@material-ui/icons/Check'; import Grid from '@material-ui/core/Grid'; export default function CustomizedSteppers(props) { - console.log(props); - return ( - <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'> - { - [0, 1, 2].map((index) => { + function isInFinalSTep(step) { + return step === 2; + } + + return ( + <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'> + { + !isInFinalSTep(props.activeStep) ? + + [0, 1, 2].map((index) => { + return ( + <Grid item key={new Date().toISOString() + index}> + <div className={props.activeStep === index ? "currStep" : "step"}> + { + index < props.activeStep ? + <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index + } + </div> + </Grid> + ) + }) + : + [0, 1, 2].map((index) => { return ( - <Grid item key={new Date().toISOString() + index}> - <div className={props.activeStep === index ? "currStep" : "step"}> - { - index < props.activeStep ? - <Check style={props.contrast === "" ? { color: "#666" } : { color: "white" }} /> : `${index + 1}` - } - </div> - </Grid> + <Grid item key={new Date().toISOString() + index}> + <div className={props.activeStep === index ? "currStep" : "finalStep"}> + { + index < props.activeStep ? + <Check style={{ color: 'white' }} /> : index + } + </div> + </Grid> ) - }) - } - </MainGrid > - ); + }) + } + </MainGrid > + ); } const MainGrid = styled(Grid)` @@ -62,14 +80,24 @@ const MainGrid = styled(Grid)` border-radius: 50%; } - .step{ - height: 30px; - width: 30px; - display: flex; - justify-content: center; - align-items: center; - border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"}; - border-radius: 50%; - } + .step{ + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"}; + border-radius: 50%; + } + + .finalStep{ + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid white; + border-radius: 50%; + } `