diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 9e7f27128a157471cae3adfc4900af388a993cfb..a129bb15d536cf7b78a6d67b6403d4a3adffbe84 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -56,7 +56,7 @@ export default function PartThree(props) {
setDraft(data)
/*extract subjects*/
- setSubjects(data.subjects.map((subject)=>(subject.name)).join(', '))
+ setSubjects(data.subjects.map((subject) => (subject.name)).join(', '))
// setTags(data.tags.map(tag => tag.name))
setDescription(data.description)
setAuthor(data.author)
@@ -86,7 +86,7 @@ export default function PartThree(props) {
return (state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
}
- function captchaVerified (response) {
+ function captchaVerified(response) {
if (response) {
setButtonAvailability(false)
}
@@ -104,19 +104,19 @@ export default function PartThree(props) {
handleClose={() => { toggleModalCancelar(false) }}
draftID={draft.id}
/>
- <Grid container style={{ backgroundColor: "#f4f4f4" }}>
+ <Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
<Grid item xs={12}>
- <StyledSessao1 className="page-content-preview">
+ <StyledSessao1 contrast={props.contrast} className="page-content-preview">
<div className="cabecalho">
<div className="feedback-upload">
- <Stepper activeStep={props.activeStep} />
+ <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>
</div>
</StyledSessao1>
- <CaixaContainer>
+ <CaixaContainer contrast={props.contrast}>
<div>
<div className="cabecalho-objeto">
<img alt="" className="img-objeto"
@@ -156,7 +156,7 @@ export default function PartThree(props) {
<Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
<div className="titulo">
Sobre o Recurso
- </div>
+ </div>
<div className="sobre-conteudo">
<p className="descricao">{description}</p>
{
@@ -189,7 +189,7 @@ export default function PartThree(props) {
{moment(draft.updated_at).format("DD/MM/YYYY")}
</span>
- { draft.language &&
+ {draft.language &&
draft.language.map((language =>
<span className="meta-objeto" key={language.id}>
<TranslateIcon /><b>Idioma: </b>{language.name}
@@ -211,16 +211,16 @@ export default function PartThree(props) {
<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>
+ </span>
</Grid>
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px"}}>
- <div style={{margin:"0 auto", width: "304px"}}>
- {
- //<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
- }
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px" }}>
+ <div style={{ margin: "0 auto", width: "304px" }}>
+ {
+ //<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' }}>
@@ -232,20 +232,20 @@ export default function PartThree(props) {
unavailableButton ? (
<GrayButton disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
)
- :
- (
- <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
- )
+ :
+ (
+ <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+ )
)
:
(
unavailableButton ? (
<GrayButton disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
)
- :
- (
- <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
- )
+ :
+ (
+ <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
)
}
@@ -288,11 +288,13 @@ const Sessao3 = styled.div`
`
const CaixaContainer = styled.div`
- background-color : rgba(238,238,238,.5);
+ 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;
+
margin-right : auto;
margin-left : auto;
@@ -308,7 +310,8 @@ const CaixaContainer = styled.div`
.cabecalho-objeto {
- background-color:#fff;
+ 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;
@@ -317,10 +320,10 @@ const CaixaContainer = styled.div`
min-height: 100px;
margin-top: 0;
margin-bottom: 10px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
.img-objeto {
- background-color:#e5e5e5;
+ background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
height: 270px;
width: 400px;
float: left;
@@ -382,11 +385,11 @@ const CaixaContainer = styled.div`
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 3px;
- background-color: #e5e5e5;
+ background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
padding: 3px 7px;
border-radius: 15px;
line-height: 18px;
- color: #666;
margin-bottom: 3px;
}
}
@@ -398,7 +401,7 @@ const CaixaContainer = styled.div`
margin-bottom : 0;
min-height : 275px;
display : flex;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 0;
position: relative;
@@ -422,13 +425,11 @@ const CaixaContainer = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
font-size: 1.857em;
}
.sobre-conteudo {
flex : 1;
- color : #666;
font-size : 14px !important;
.descricao {
@@ -461,7 +462,6 @@ const CaixaContainer = styled.div`
position: relative;
width: 100%;
font-size: 14px;
- color: #666;
margin-bottom: 20px;
display : inline-block;
}
@@ -477,7 +477,7 @@ const CaixaContainer = styled.div`
const StyledSessao1 = styled.div`
color : #fff;
- background-color : #00bcd4;
+ background: ${props => props.contrast === "" ? "#00bcd4" : "black"};
float : none;
height : 300px;
text-align : center;
@@ -495,13 +495,13 @@ const StyledSessao1 = styled.div`
display : flex;
flex-direction : column;
justify-content : center;
- text-align : center
+ text-align : center;
margin-top : 20px;
width : 55%;
}
h2 {
- margint-top : 0;
+ margin-top : 0;
font-size : 26px;
font-weight : lighter;
margin-bottom : 10px;
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index cf65a4de9952a0450b5bfedf71bd671511bcecbe..39f6c697ffe577bcdb6fc9a94f3f89587bd58414 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -16,7 +16,7 @@ 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, {useState, useEffect, useRef} from 'react'
+import React, { useState, useEffect, useRef } from 'react'
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import DragAndDropThumbnail from './PartTwoComponents/DragAndDropThumbnail'
@@ -25,26 +25,49 @@ import Licenca from './PartTwoComponents/Licenca'
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from './StyledComponents.js'
+import { StyledFormLabel } from './StyledComponents.js'
import ButtonsDiv from './ButtonsDiv.js'
import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
-import {SendInfo} from './SendInfo.js'
+import { SendInfo } from './SendInfo.js'
import EditThumbnail from './PartTwoComponents/EditThumbnail.js'
import DisplayThumbnail from './PartTwoComponents/DisplayThumbnail.js'
import CustomCircularProgress from './PartTwoComponents/CustomCircularProgress';
-import {getRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { getRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export function LoadingDiv () {
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
+
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export function LoadingDiv(props) {
return (
- <div style={{width : "100%", display : "flex", alignItems : "center", justifyContent : "center", color : "#666"}}>
- <CustomCircularProgress/> CARREGANDO IMAGEM
+ <div style={props.contrast === "" ? { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#666" } : { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}>
+ <CustomCircularProgress contrast={props.contrast} /> CARREGANDO IMAGEM
</div>
)
}
-export default function PartTwo (props) {
+export default function PartTwo(props) {
const didMountRef = useRef(false);
const [eduStages, setEduStages] = useState([])
@@ -78,12 +101,12 @@ export default function PartTwo (props) {
})
}
- function handleSuccess (data) {
- setSubjects(data.filter(subject => subject.theme === false).sort((a,b) => a.name > b.name ? 1 : -1))
- setThemes(data.filter(subject => subject.theme === true).sort((a,b) => a.name > b.name ? 1 : -1))
+ function handleSuccess(data) {
+ setSubjects(data.filter(subject => subject.theme === false).sort((a, b) => a.name > b.name ? 1 : -1))
+ setThemes(data.filter(subject => subject.theme === true).sort((a, b) => a.name > b.name ? 1 : -1))
}
- function checkPartTwo (data) {
+ function checkPartTwo(data) {
return (
data.educational_stages.length !== 0 &&
data.subjects.length !== 0 &&
@@ -92,7 +115,7 @@ export default function PartTwo (props) {
)
}
- function handleSuccessGetFormData (data) {
+ function handleSuccessGetFormData(data) {
if (checkPartTwo(data)) {
props.stepperControl(1)
} else {
@@ -106,82 +129,89 @@ export default function PartTwo (props) {
}
}
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setLearningObject(data)
}
useEffect(() => {
- getRequest(`/educational_stages/`, (data) => {setEduStages(data)}, (error) => {console.log(error)})
+ getRequest(`/educational_stages/`, (data) => { setEduStages(data) }, (error) => { console.log(error) })
- getRequest(`/subjects/`, handleSuccess, (error) => {console.log(error)})
+ getRequest(`/subjects/`, handleSuccess, (error) => { console.log(error) })
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
}, [])
- useEffect( () => {
+ useEffect(() => {
if (didMountRef.current) {
console.log(learningObject);
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- /*------------------------Licenca------------------------*/
+ /*------------------------Licenca------------------------*/
+
+ const [termsCheckbox, setChecked] = useState(false)
+ const toggleCheckbox = () => {
+ setChecked(!termsCheckbox)
+ }
- const [termsCheckbox, setChecked] = useState(false)
- const toggleCheckbox = () => {
- setChecked(!termsCheckbox)
- }
+ const [thumbnail, setThumbnail] = useState('')
+ const [tempUrl, setTempUrl] = useState('')
- const [thumbnail, setThumbnail] = useState('')
- const [tempUrl, setTempUrl] = useState('')
+ const acceptFile = (file) => {
+ const objectURL = URL.createObjectURL(file)
+ console.log(file)
+ setTempUrl(objectURL)
+ setThumbnailStage('editing')
+ }
- const acceptFile = (file) => {
- const objectURL = URL.createObjectURL(file)
- console.log(file)
- setTempUrl(objectURL)
- setThumbnailStage('editing')
- }
- const updateThumb = (newThumbnail) => {
- setThumbnail(newThumbnail)
- console.log(thumbnail)
- }
+ const updateThumb = (newThumbnail) => {
+ setThumbnail(newThumbnail)
+ console.log(thumbnail)
+ }
- const finalizeThumb = () => {
- setThumbnailStage('uploading')
+ const handleDeleteThumb = () => {
+ setThumbnail('');
+ setTempUrl('');
+ setThumbnailStage('default');
+ }
- const url = `/learning_objects/${props.draftID}`
+ const finalizeThumb = () => {
+ setThumbnailStage('uploading')
- let fdThumb = new FormData()
- fdThumb.set('learning_object[thumbnail]', thumbnail)
+ const url = `/learning_objects/${props.draftID}`
- putRequest(url, fdThumb, (data) => {setThumbnailStage('done')}, (error) => {console.log(error)})
- }
+ let fdThumb = new FormData()
+ fdThumb.set('learning_object[thumbnail]', thumbnail)
- const [thumbnailStage, setThumbnailStage] = useState('default')
+ putRequest(url, fdThumb, (data) => { setThumbnailStage('done') }, (error) => { console.log(error) })
+ }
- const chooseRenderStageThumbnail = () => {
- switch(thumbnailStage) {
- case 'uploading':
- return (<LoadingDiv/>)
- case 'done':
- return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={thumbnail}/>)
- case 'editing':
- return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
- default :
- return (<DragAndDropThumbnail acceptFile={acceptFile}/>)
+ const [thumbnailStage, setThumbnailStage] = useState('default')
- }
- }
+ const chooseRenderStageThumbnail = (contrast) => {
+ switch (thumbnailStage) {
+ case 'uploading':
+ return (<LoadingDiv contrast={contrast} />)
+ case 'done':
+ return (<DisplayThumbnail handleDelete={handleDeleteThumb} acceptFile={acceptFile} contrast={contrast} thumbnail={thumbnail} />)
+ case 'editing':
+ return (<EditThumbnail contrast={contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb} />)
+ default:
+ return (<DragAndDropThumbnail contrast={contrast} acceptFile={acceptFile} />)
- const handleSubmit = (e) => {
+ }
+ }
+
+ const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -190,11 +220,11 @@ export default function PartTwo (props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
- return (
+ return (
<React.Fragment>
<SnackBar
snackbarOpen={snackInfo.open}
@@ -205,50 +235,50 @@ export default function PartTwo (props) {
/>
{
!loading ? (
- <form style={{width : "100%"}} onSubmit={handleSubmit}>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- {chooseRenderStageThumbnail()}
+ <form style={{ width: "100%" }} onSubmit={handleSubmit}>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ {chooseRenderStageThumbnail(props.contrast)}
</Grid>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <EducationalStage contrast={props.contrast} draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null}
/>
</Grid>
- <SubjectsAndThemes draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
+ <SubjectsAndThemes contrast={props.contrast} draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null}
/>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null}/>
- </Grid>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Licenca contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null} />
+ </Grid>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <StyledFormControl required >
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}} onClick={() => window.open("/termos/", "_blank")}>
- <b>Confirme se você concorda com os <strong style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</strong></b>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <StyledFormControl required contrast={props.contrast}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }} >
+ <b>Confirme se você concorda com os <strong onClick={() => window.open("/termos/", "_blank")} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}>termos de uso e de propriedade intelectual</strong></b>
</StyledFormLabel>
- <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
- />
+ <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={props.contrast === "" ? <BlueCheckBox checked={termsCheckbox} onChange={toggleCheckbox} /> : <ContrastCheckBox checked={termsCheckbox} onChange={toggleCheckbox} />}
+ />
</StyledFormControl>
</Grid>
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true}/>
+ <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true} />
</Grid>
- <Grid item xs={12} style={{marginTop : "20px"}}>
- <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ <Grid item xs={12} style={{ marginTop: "20px" }}>
+ <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner text={"CARREGANDO"}/>
- )
+ :
+ (
+ <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
+ )
}
</React.Fragment>
)
@@ -261,7 +291,8 @@ const StyledFormControl = styled(FormControl)`
.label {
font-size : 14px !important;
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
font-weight : 200 !important;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
index 2164091858560e3cb63f0c43099de40e2606b741..9de5008e66062efb18d8422783298c5c93a4af1a 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
@@ -22,14 +22,17 @@ import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles((theme) => ({
root: {
- color : "#666",
+ color: "#666",
},
+ contrastRoot: {
+ color: "white",
+ }
}));
-export default function CustomCircularProgress () {
+export default function CustomCircularProgress(props) {
const classes = useStyles();
return (
- <CircularProgress className={classes.root}/>
+ <CircularProgress className={props.contrast === "" ? classes.root : classes.contrastRoot} />
);
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
index 0c07e151670e4a256ed971abb978dad7b3107c5b..3cd8465dfb1331aabd77ef3f7b1f83801166658e 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -17,12 +17,12 @@ 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 from 'react'
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
-export default function DisplayThumbnail (props) {
+export default function DisplayThumbnail(props) {
let windowWidth = window.innerWidth
const handleUpload = (e, selectorFiles) => {
@@ -32,42 +32,42 @@ export default function DisplayThumbnail (props) {
return (
<React.Fragment>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
{
props.onEditPage ?
- (
- <b style={{fontWeight : "ligther"}}>Imagem ilustrativa do recurso</b>
- )
- :
- (
- <>
- <b>Editando Imagem</b>
- <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={{ fontWeight: "ligther" }}>Imagem ilustrativa do recurso</b>
+ )
+ :
+ (
+ <>
+ <b>Editando Imagem</b>
+ <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
- <ImagemCarregada container>
+ <ImagemCarregada container contrast={props.contrast}>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="img-preview">
- <img alt="" src={props.thumbnail}/>
+ <img alt="" src={props.thumbnail} />
<div className="alterar-imagem">
- <input type="file" onChange = {(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{display : "none"}}
+ <input type="file" onChange={(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{ display: "none" }}
/>
- <label htmlFor="upload-file-thumbnail" style={{height : "100%", width : "inherit", cursor : "pointer"}}>
+ <label htmlFor="upload-file-thumbnail" style={{ height: "100%", width: "inherit", cursor: "pointer" }}>
<div className="interacoes">
- SUBSTITUIR <AddAPhotoIcon/>
+ SUBSTITUIR <AddAPhotoIcon />
</div>
</label>
- <div className="interacoes" onClick={() => {props.handleDelete()}}>
- DELETAR <AddAPhotoIcon/>
+ <div className="interacoes" onClick={() => { props.handleDelete() }}>
+ DELETAR <AddAPhotoIcon />
</div>
</div>
</div>
</Grid>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="aviso-imagem-carregada">
- Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
+ Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
</div>
</Grid>
</ImagemCarregada>
@@ -77,7 +77,7 @@ export default function DisplayThumbnail (props) {
const ImagemCarregada = styled(Grid)`
.aviso-imagem-carregada {
- color :#a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
font-size : 12px;
font-weight : 500;
text-align : justify;
@@ -113,10 +113,12 @@ const ImagemCarregada = styled(Grid)`
align-items : flex-end;
height : 100%;
padding : 10px;
- color : #fff;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
font-size : 14px;
.MuiSvgIcon-root {
vertical-align : middle !important;
+ color: #fff;
}
}
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
index 59423e607f7d2395c498a12f7e2a2f6efc5e7e5a..56d532f8da83a78a4bae734ef294b12f20fd5ff9 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -16,13 +16,13 @@ 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, {useState} from 'react'
-import {DottedBox, BlueButton} from '../StyledComponents.js';
+import React, { useState } from 'react'
+import { DottedBox, BlueButton } from '../StyledComponents.js';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
-export default function DragAndDropThumbnail (props) {
+export default function DragAndDropThumbnail(props) {
const [dropDepth, setDropDepth] = useState(0)
// eslint-disable-next-line
const [inDropZone, toggleInDropZone] = useState(false)
@@ -64,41 +64,42 @@ export default function DragAndDropThumbnail (props) {
props.acceptFile(selectorFiles[0])
}
return (
- <FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
{
props.onEditPage ?
- (
- <b style={{textAlign : "center", fontSize : "26px", fontWeight : "ligther"}}>Inserir Imagem Ilustrativa</b>
- )
- :
- (
- <>
- <b>Imagem Ilustrativa do Recurso</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={props.contrast === "" ? { textAlign: "center", fontSize: "26px", fontWeight: "ligther" } : { textAlign: "center", fontSize: "26px", fontWeight: "ligther", color: "white" }}>Inserir Imagem Ilustrativa</b>
+ )
+ :
+ (
+ <>
+ <b>Imagem Ilustrativa do Recurso</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
<DottedBox
+ contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
thumbnail
- >
- <AddAPhotoIcon className="icon"/>
+ >
+ <AddAPhotoIcon className="icon" />
<input
type="file"
- onChange = {(e) => handleUpload(e, e.target.files)}
+ onChange={(e) => handleUpload(e, e.target.files)}
id="upload-file-thumbnail"
- style={{display : "none"}}
- />
- <BlueButton>
- <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+ style={{ display: "none" }}
+ />
+ <BlueButton contrast={props.contrast}>
+ <label htmlFor="upload-file-thumbnail" style={{ width: "inherit", cursor: "pointer" }}>
ESCOLHER IMAGEM
</label>
</BlueButton>
- <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={props.contrast === "" ? { marginTop: "6px" } : { color: "white" }}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</FormControl>
)
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
index 7cce6bf2058f9c6512430053e27d6ed04f479800..629e1fded68669f20522594b7faa332a97f8fa2c 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -16,28 +16,28 @@ 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, {useState} from 'react'
-import {StyledFormLabel} from '../StyledComponents.js'
+import React, { useState } from 'react'
+import { StyledFormLabel } from '../StyledComponents.js'
import Cropper from '../../Cropper'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
-export default function EditThumbnail (props) {
+export default function EditThumbnail(props) {
const [crop] = useState({
- unit: "%" ,
- width : 100,
- aspect: 9/3
+ unit: "%",
+ width: 100,
+ aspect: 9 / 3
});
return (
<>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Editando Imagem</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
</StyledFormLabel>
- <div style={{display : "flex", alignItems : "center", flexDirection : "column"}}>
- <div style={{maxWidth : "500px", maxHeight : "300px", padding : "20px"}}>
- <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb}/>
+ <div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
+ <div style={{ maxWidth: "500px", maxHeight: "300px", padding: "20px" }}>
+ <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb} />
</div>
- <StyledButton onClick={() => {props.finalizeThumb()}}>SELECIONAR IMAGEM</StyledButton>
+ <StyledButton contrast={props.contrast} onClick={() => { props.finalizeThumb() }}>SELECIONAR IMAGEM</StyledButton>
</div>
</>
@@ -46,10 +46,11 @@ export default function EditThumbnail (props) {
const StyledButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- background-color : #fff !important;
- border : solid 1px #00bcd4 !important;
+ background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px #00bcd4 !important" : "solid 1px white !important"};
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-weight : 600 !important;
- color : #00bcd4 !important;
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
index 96da308ae7eaf9c2eb942033bf707f567649e3ff..f028b62b95636e60e4a048cb37394d27132b435a 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -16,21 +16,43 @@ 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, {useState} from 'react'
+import React, { useState } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import styled from 'styled-components'
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
-export default function EducationalStage (props) {
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function EducationalStage(props) {
const [selected, setSelect] = useState(props.initialValue ? props.initialValue : [])
const handleSet = (event) => {
let newValue = event.target.value
- if(selected.indexOf(newValue) > - 1) {
+ if (selected.indexOf(newValue) > - 1) {
setSelect(selected.filter(item => item !== newValue))
}
else {
@@ -39,15 +61,15 @@ export default function EducationalStage (props) {
}
return (
- <FormControl required style={{minWidth : "30%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>NÃvel de ensino</b> <span style={{color : "#a5a5a5"}}>(Selecione uma ou mais opções)</span>
+ <FormControl required style={{ minWidth: "30%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>NÃvel de ensino</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Selecione uma ou mais opções)</span>
</StyledFormLabel>
- <StyledFormGroup onBlur={() => {props.onBlurCallback("educational_stages", selected, props.draftID)}}>
+ <StyledFormGroup onBlur={() => { props.onBlurCallback("educational_stages", selected, props.draftID) }}>
{
props.eduStages.map(stage =>
<FormControlLabel key={stage.id} label={stage.name}
- control={<Checkbox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet}/>}/>
+ control={props.contrast === "" ? <BlueCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} /> : <ContrastCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} />} />
)
}
</StyledFormGroup>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
index 9e8e059aed392a5791d6e11ee8e1b492803585eb..30c2d581e91f344621195359b45dc493015ff36a 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -16,45 +16,67 @@ 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, {useState, memo} from 'react'
+import React, { useState, memo } from 'react'
import styled from 'styled-components'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function Licenca (props) {
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
+
+const BlueRadio = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+function Licenca(props) {
const options = [
- {name : "CC BY", description : "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id : 1},
+ { name: "CC BY", description: "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id: 1 },
- {name : "CC BY-SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 2},
+ { name: "CC BY-SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 2 },
- {name : "CC BY-NC", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id : 4},
+ { name: "CC BY-NC", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id: 4 },
- {name : "CC BY-NC SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 5},
+ { name: "CC BY-NC SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 5 },
- {name : "CC BY-NC-ND 3.0 BR", description : "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id : 12}
+ { name: "CC BY-NC-ND 3.0 BR", description: "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id: 12 }
]
const [value, setValue] = useState(props.initialValue ? props.initialValue : -1)
- const handleChange = (event) => {setValue(Number(event.target.value))}
+ const handleChange = (event) => { setValue(Number(event.target.value)) }
return (
- <FormControl required="true" style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={{color : "#ff7f00", textDecoration : "underline"}}>Saiba mais</a>
+ <FormControl required="true" style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={props.contrast === "" ? { color: "#ff7f00", textDecoration: "underline" } : { color: "yellow", textDecoration: "underline" }}>Saiba mais</a>
</StyledFormLabel>
- <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("license_id", value, props.draftID)}}>
+ <StyledRadioGroup contrast={props.contrast} aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("license_id", value, props.draftID) }}>
{
- options.map( (option) =>
- <FormControlLabel key={option.id} value={option.id}
- control={<Radio />}
- label={
- <span className="title">{option.name}
- <span className="parentese"> {option.description}</span>
- </span>
+ options.map((option) =>
+ <FormControlLabel key={option.id} value={option.id}
+ control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
+ label={
+ <span className="title">{option.name}
+ <span className="parentese"> {option.description}</span>
+ </span>
}
/>
)
@@ -76,12 +98,12 @@ const StyledRadioGroup = styled(RadioGroup)`
.title {
font-size: 14px;
font-weight: 600;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding-left: 2px;
}
.parentese {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
font-weight: 200;
- color:#a5a5a5;
padding-left: 10px;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
index 326dec2320b864be6820e9ec1182db9aa2066688..986081d86a4a2f642accb42616cd5174f88901c0 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -16,39 +16,40 @@ 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, {useState, memo} from 'react'
+import React, { useState, memo } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
-import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import { ObjTypeBox, StyledFormLabel } from '../StyledComponents.js'
import FormGroup from '@material-ui/core/FormGroup';
-import {GetSubjectIconByName} from '../GetIconByName.js'
+import { GetSubjectIconByName } from '../GetIconByName.js'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
-}})
-
-function StyledCheckbox (props) {
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
+})
+
+function StyledCheckbox(props) {
const classes = useStyles();
return (
<Checkbox
className={classes.root}
disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
+ checkedIcon={
+ <ObjTypeBox checked contrast={props.contrast}>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
</span>
</ObjTypeBox>
}
- icon = {
- <ObjTypeBox>
+ icon={
+ <ObjTypeBox contrast={props.contrast}>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
@@ -61,75 +62,77 @@ function StyledCheckbox (props) {
}
-function SubjectsAndThemes (props) {
+function SubjectsAndThemes(props) {
const [value, setValue] = useState(props.initialValue ? props.initialValue : [])
const handleChange = (event) => {
const newValue = event.target.value
- if((value.indexOf(newValue) > -1)) {
+ if ((value.indexOf(newValue) > -1)) {
setValue(value.filter(item => item !== newValue))
}
else {
setValue(value => [...value, newValue])
}
- }
+ }
return (
<React.Fragment>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <FormControl required style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
- </StyledFormLabel>
- <FormGroup row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
- {
- props.subjects.map( (subject) =>
- <>
- <FormControlLabel key={subject.id} value={subject.id}
- control={
- <StyledCheckbox
- label={subject.name}
- checked={value.indexOf(String(subject.id)) > -1}
- onChange={handleChange}
- />}
- />
- </>
- )
-
- }
- </FormGroup>
- </FormControl>
- </Grid>
-
- {
-
- props.onUploadPage &&
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Outras Temáticas</b>
- </StyledFormLabel>
- <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
- {
- props.themes.map( (theme) =>
- <FormControlLabel key={theme.id} value={theme.id}
- control={
- <StyledCheckbox
- label={theme.name}
- checked={value.indexOf(String(theme.id)) > -1}
- onChange={handleChange}
-
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <FormControl required style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
+ </StyledFormLabel>
+ <FormGroup row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
+ {
+ props.subjects.map((subject) =>
+ <>
+ <FormControlLabel key={subject.id} value={subject.id}
+ control={
+ <StyledCheckbox
+ contrast={props.contrast}
+ label={subject.name}
+ checked={value.indexOf(String(subject.id)) > -1}
+ onChange={handleChange}
+ />}
/>
- }
- />
- )
+ </>
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+
+ {
+
+ props.onUploadPage &&
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <FormControl style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Outras Temáticas</b>
+ </StyledFormLabel>
+ <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
+ {
+ props.themes.map((theme) =>
+ <FormControlLabel key={theme.id} value={theme.id}
+ control={
+ <StyledCheckbox
+ contrast={props.contrast}
+ label={theme.name}
+ checked={value.indexOf(String(theme.id)) > -1}
+ onChange={handleChange}
+
+ />
+ }
+ />
+ )
- }
- </FormGroup>
- </FormControl>
- </Grid>
- }
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ }
</React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 5eeb04041e1139027164049f2aec4b15fc8ceffe..a4a9dba87c903249c3ab8fa3b87f7f6578515e3a 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -444,18 +444,21 @@ export const StyledDiv = styled.div`
export const OrangeButton = styled(Button)`
max-height : 36px !important;
- color : rgba(255,255,255,0.87) !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
- background-color : #ff7f00 !important;
+ background: ${props => props.contrast === "" ? " #ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87) !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
margin-left : 8px !important;
margin-right : 8px !important;
+ &:hover {
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
export const GreyButton = styled(Button)`
- &:hover {
- background: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
- }
+
background: ${props => props.contrast === "" ? "transparent !important" : "black !important"};
color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index da22ab8ed44eb0d6fa57a6a2dac9ac3a50f40d81..c0774026c08eb81ae56c8c6e7b03d12009126768 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -118,7 +118,7 @@ export default function UploadPage(props) {
{
activeStep === 2 ?
(
- <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
+ <PartThree contrast={state.contrast} draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
)
:
(
diff --git a/src/env.js b/src/env.js
index 7284c42754e5c679138196c2bae2a2f128779c2b..95815e96e0a4b6d934c32704a85f04284e77d16e 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ 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/>.*/
-var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;