diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index b5d27708068df08fa2969420afde3342465873d2..2bd44115d117d3ba2c32a9c8901e200300c6003a 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -16,46 +16,65 @@ 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 FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
-function NewTitle (props) {
+function NewTitle(props) {
+ const classes = useStyles();
const [objTitle, setFormValue] = useState({
- error : false,
- value : props.initialValue ? props.initialValue : ""
+ error: false,
+ value: props.initialValue ? props.initialValue : ""
})
const handleChangeTitle = (e) => {
let userInput = e.target.value
let flag = (userInput.length > 100 || userInput.length === 0 ? true : false)
- setFormValue({...objTitle,
- error : flag,
- value : userInput
+ setFormValue({
+ ...objTitle,
+ error: flag,
+ value: userInput
})
}
return (
- <FormControl required={true} style={{width : "100%", height : "100px"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%", height: "100px" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Título do Recurso</b>
</StyledFormLabel>
<StyledTextField
- id = {"title-form"}
- placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
- type = {"text"}
- value = {objTitle.value}
- onChange = {e => {handleChangeTitle(e)}}
- helperText = {objTitle.value.length + "/100"}
- error = {objTitle.error}
+ contrast={props.contrast}
+ id={"title-form"}
+ placeholder="Ex: Jogo Virtual sobre os Biomas do Brasil"
+ type={"text"}
+ value={objTitle.value}
+ variant="outlined"
+ onChange={e => { handleChangeTitle(e) }}
+ helperText={objTitle.value.length + "/100"}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ error={objTitle.error}
fullWidth
multiline
- onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
- />
- {objTitle.value.length === 0 && objTitle.error &&
- <FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um título.</FormHelperText>}
+ onBlur={() => { props.onBlurCallback("name", objTitle.value, props.draftID) }}
+ />
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index 250428dbf319dd5488a5bcebb31743d787d6a73b..5806d5f2ffdecff199d1361005483b1af117e367 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -16,8 +16,8 @@ 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, useContext, useRef} from 'react'
-import {Store} from '../../Store.js'
+import React, { useState, useEffect, useContext, useRef } from 'react'
+import { Store } from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import ButtonsDiv from './ButtonsDiv.js'
import SobreORecurso from './Forms/SobreORecurso.js'
@@ -26,14 +26,14 @@ import Keywords from './Forms/Keywords.js'
import Autor from './Forms/Autor.js'
import TipoDeRecurso from './Forms/TipoDeRecurso.js'
import Idioma from './Forms/Idioma.js'
-import {SendInfo} from './SendInfo.js'
-import {getRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { SendInfo } from './SendInfo.js'
+import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export default function PartOne (props) {
+export default function PartOne(props) {
// {/*const [subjects, setSubjects] = useState([])*/}
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const didMountRef = useRef(false);
const didMountRefObj = useRef(false);
@@ -68,23 +68,23 @@ export default function PartOne (props) {
})
}
- function checkPartOne (data) {
+ function checkPartOne(data) {
return (
- data.name !== null &&
- data.tags.length !== 0 &&
- data.author !== null &&
- data.object_type !== null &&
+ data.name !== null &&
+ data.tags.length !== 0 &&
+ data.author !== null &&
+ data.object_type !== null &&
data.language.length !== 0 &&
(data.attachments.length !== 0 ||
- data.link !== null)
+ data.link !== null)
)
}
- function handleSuccessGetObjTypes (data) {
+ function handleSuccessGetObjTypes(data) {
setObjTypes(data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
}
- function handleSuccessGetFormData (data) {
+ function handleSuccessGetFormData(data) {
if (checkPartOne(data)) {
props.stepperControl(1)
} else {
@@ -98,40 +98,40 @@ export default function PartOne (props) {
}
}
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setLearningObject(data)
}
- useEffect( () => {
- getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => {console.log(error)})
- getRequest(`/languages/`, (data) => {setLanguages(data)}, (error) => {console.log(error)})
+ useEffect(() => {
+ getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => { console.log(error) })
+ getRequest(`/languages/`, (data) => { setLanguages(data) }, (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) {
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- useEffect( () => {
+ useEffect(() => {
if (didMountRefObj.current) {
- toggleLoadingObj(false)
+ toggleLoadingObj(false)
}
else {
- didMountRefObj.current = true;
+ didMountRefObj.current = true;
}
}, [objTypes])
const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -140,7 +140,7 @@ export default function PartOne (props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
@@ -157,64 +157,64 @@ export default function PartOne (props) {
!loading && !loadingObj ? (
<form onSubmit={handleSubmit}>
{/*------------------------------Titulo-----------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <NewTitle contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name} />
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description} />
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Keywords draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null} />
</Grid>
{/*------------------------------Autor------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Autor draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={
learningObject.author === state.currentUser.name ?
- 0 : 1
+ 0 : 1
}
initialOutroAutor={
learningObject.author !== state.currentUser.name ?
- learningObject.author : ''
+ learningObject.author : ''
}
/>
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
<TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null}
/>
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
- initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
- />
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
+ initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
+ />
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
+ <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} />
</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={{ marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" }}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner text={"CARREGANDO"}/>
- )
+ :
+ (
+ <LoadingSpinner text={"CARREGANDO"} />
+ )
}
</React.Fragment>
)
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index e197df897522f83790d7c64bcd2927054137c027..3034d10028f2d36c21dbdb8f1ddbf3ef5da39b57 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -18,134 +18,59 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import styled from 'styled-components'
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/Check';
-
-const useColorlibStepIconStyles = makeStyles({
- root: {
- backgroundColor: '#fff',
- color: '#00bcd4',
- width: 36,
- height: 36,
- display: 'flex',
- border: 'solid 3px #00bcd4',
- borderRadius: '50%',
- justifyContent: 'center',
- alignItems: 'center',
- },
- active: {
- backgroundColor: '#00bcd4',
- color: '#fff',
- },
- completed: {
- backgroundColor: '#00bcd4',
- color: '#fff',
- },
-});
-
-function ColorlibStepIcon(props) {
- const classes = useColorlibStepIconStyles();
- const { active, completed } = props;
-
- const icons = {
- 1: '1',
- 2: '2',
- 3: '3',
- };
-
- return (
- <div
- className={clsx(classes.root, {
- [classes.active]: active,
- [classes.completed]: completed,
- })}
- >
- {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
- </div>
- );
-}
-
-ColorlibStepIcon.propTypes = {
- /**
- * Whether this step is active.
- */
- active: PropTypes.bool,
- /**
- * Mark the step as completed. Is passed to child components.
- */
- completed: PropTypes.bool,
- /**
- * The label displayed in the step icon.
- */
- icon: PropTypes.node,
-};
-
-// const useStyles = makeStyles((theme) => ({
-// root: {
-// width: '100%',
-// },
-// button: {
-// marginRight: theme.spacing(1),
-// },
-// instructions: {
-// marginTop: theme.spacing(1),
-// marginBottom: theme.spacing(1),
-// },
-// }));
-
-function getSteps() {
- return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-}
-
-// function getStepContent(step) {
-// switch (step) {
-// case 0:
-// return 'Select campaign settings...';
-// case 1:
-// return 'What is an ad group anyways?';
-// case 2:
-// return 'This is the bit I really care about!';
-// default:
-// return 'Unknown step';
-// }
-// }
+import Grid from '@material-ui/core/Grid';
export default function CustomizedSteppers(props) {
- // const classes = useStyles();
- const steps = getSteps();
-
- // {/* const handleNext = () => {
- // setActiveStep((prevActiveStep) => prevActiveStep + 1);
- // };
-
- // const handleBack = () => {
- // setActiveStep((prevActiveStep) => prevActiveStep - 1);
- // };
-
- // const handleReset = () => {
- // setActiveStep(0);
- // };*/}
+ console.log(props);
return (
-
- <>
- <StyledStepper style={props.contrast === "" ? { backgroundColor: "#e5e5e5", borderRadius: "50px", justifyContent: "space-between" } : { backgroundColor: "black", border: "1px solid white", borderRadius: "50px", justifyContent: "space-between" }} activeStep={props.activeStep} connector={<></>}>
- {steps.map((label) => (
- <Step key={label}>
- <StepLabel StepIconComponent={ColorlibStepIcon} />
- </Step>
- ))}
- </StyledStepper>
- </>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ {
+ [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>
+ )
+ })
+ }
+ </MainGrid >
);
}
-const StyledStepper = styled(Stepper)`
- padding : 7px !important;
-
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ color: white;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ 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%;
+ }
`
+
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 2caa077ee007db22b38f891588d7ddca07dd3da6..dabf1fef65466ddc0357d1cded84ac60f08458ad 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -359,10 +359,10 @@ export const OutroAutorTextField = styled(TextField)`
export const StyledFormLabel = styled(FormLabel)`
b {
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
}
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
`
@@ -371,25 +371,30 @@ export const StyledTextField = styled(TextField)`
width : 100% !important;
.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
const useStyles = makeStyles({
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 8d683857f3315da898dd8349d2293db4251b643d..da22ab8ed44eb0d6fa57a6a2dac9ac3a50f40d81 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -139,13 +139,13 @@ export default function UploadPage(props) {
{
activeStep === 0 &&
<Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartOne draftID={draft.id} stepperControl={stepperControl} />
+ <PartOne draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
</Grid>
}
{
activeStep === 1 &&
<Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl} />
+ <PartTwo draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
</Grid>
}
</InfoBox>
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;