From dd6d163ea3235c98f7b05f96ce3e8591da2ccd00 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Mon, 16 Aug 2021 11:43:14 -0300
Subject: [PATCH] implementing acessibility
---
.../PublicationPermissionsContent.js | 2 +-
.../UploadPageComponents/ChooseLinkSection.js | 161 ++++++++-----
.../UploadPageComponents/Stepper.js | 62 ++---
.../UploadPageComponents/StyledComponents.js | 189 ++++++++-------
.../UploadPageComponents/UploadFileWrapper.js | 126 +++++-----
src/Pages/PublicationPermissionsPage.js | 22 +-
src/Pages/UploadPage.js | 228 +++++++++---------
7 files changed, 402 insertions(+), 388 deletions(-)
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 2ad4bd8b..d235cc3a 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -64,7 +64,7 @@ export default function PublicationPermissionsContent(props) {
<p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas
- (<a href="/termos" style={{ color: "initial" }}><strong>Políticas de Conteúdo</strong></a>)
+ (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>Políticas de Conteúdo</strong></a>)
</p>
<Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js
index 52a14ae2..44f89db0 100644
--- a/src/Components/UploadPageComponents/ChooseLinkSection.js
+++ b/src/Components/UploadPageComponents/ChooseLinkSection.js
@@ -16,81 +16,108 @@ 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 UndoIcon from '@material-ui/icons/Undo';
-import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js'
+import { WrapperBox, StyledTextField, BlueButton, GrayButton } from './StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
-export default function ChooseLink (props) {
- const [linkSent, setLinkSent] = useState(false)
- const [link, setLink] = useState({flag : false, value : ""})
- const handleLink = (e) => {
- let userInput = e.target.value
- const urlRegex = new RegExp(
- // eslint-disable-next-line
- "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
- )
- let flag = !(urlRegex.test(userInput))
- setLink({...link,
- flag : flag,
- value : userInput}
- )
+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%"
+ }
+}));
+
+export default function ChooseLink(props) {
+ const classes = useStyles();
+ const [linkSent, setLinkSent] = useState(false)
+ const [link, setLink] = useState({ flag: false, value: "" })
+ const handleLink = (e) => {
+ let userInput = e.target.value
+ const urlRegex = new RegExp(
+ // eslint-disable-next-line
+ "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
+ )
+ let flag = !(urlRegex.test(userInput))
+ setLink({
+ ...link,
+ flag: flag,
+ value: userInput
}
+ )
+ }
- const handleSubmit = (e) => {
- e.preventDefault()
- console.log(link.flag)
- if (!link.flag) {
- props.submit(link.value)
- setLinkSent(true)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ console.log(link.flag)
+ if (!link.flag) {
+ props.submit(link.value)
+ setLinkSent(true)
}
+ }
- return (
- <WrapperBox>
- <div className="inner">
- <div className="upload-title"> Enviar Link</div>
+ return (
+ <WrapperBox contrast={props.contrast}>
+ <div className="inner">
+ <div className="upload-title"> Enviar Link</div>
- <div className="flex-column">
- <p>Insira o link da página do recurso abaixo:</p>
- <form onSubmit={(e) => {handleSubmit(e)}}>
- <StyledTextField
- id = {"choose-link-form"}
- label={"Exemplo: http://google.com"}
- type = {"text"}
- value = {link.value}
- onChange = {e => {handleLink(e)}}
- helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""}
- multiline={true}
- rowsMax = {"10"}
- rows={1}
- error = {link.flag}
- required = {true}
- disabled={linkSent}
- />
+ <div className="flex-column">
+ <p>Insira o link da página do recurso abaixo:</p>
+ {
+ !linkSent ?
+ <form onSubmit={(e) => { handleSubmit(e) }}>
+ <StyledTextField
+ contrast={props.contrast}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ id={"choose-link-form"}
+ label={"Exemplo: http://google.com"}
+ type={"text"}
+ variant="outlined"
+ value={link.value}
+ onChange={e => { handleLink(e) }}
+ helperText={link.flag ? "Faltou inserir um endereço eletrônico" : ""}
+ multiline={true}
+ rowsMax={"10"}
+ rows={1}
+ error={link.flag}
+ required={true}
+ />
- <div className="buttons-div">
- {
- linkSent ?
- (
- <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton>
- )
- :
- (
- <>
- <GrayButton onClick={() => {props.handleNextStage("default")}}>
- <span className="button-text">
- <UndoIcon className="icon"/>Voltar
- </span>
- </GrayButton>
- <BlueButton type="submit">SALVAR</BlueButton>
- </>
- )
- }
- </div>
- </form>
+ <div className="buttons-div">
+ <>
+ <GrayButton contrast={props.contrast} onClick={() => { props.handleNextStage("default") }}>
+ <span className="button-text">
+ <UndoIcon className="icon" />Voltar
+ </span>
+ </GrayButton>
+ <BlueButton contrast={props.contrast} type="submit">SALVAR</BlueButton>
+ </>
</div>
- </div>
- </WrapperBox>
- )
+ </form>
+ :
+ <>
+ <p>
+ O link salvado foi: <a style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }} href={link.value}>{link.value}</a>
+ </p>
+ <div className="buttons-div">
+ <BlueButton contrast={props.contrast} onClick={() => { setLinkSent(false) }}>Editar</BlueButton>
+ </div>
+ </>
+
+ }
+ </div>
+ </div>
+ </WrapperBox >
+ )
}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index c1f9d40f..e197df89 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -33,18 +33,18 @@ const useColorlibStepIconStyles = makeStyles({
width: 36,
height: 36,
display: 'flex',
- border : 'solid 3px #00bcd4',
+ border: 'solid 3px #00bcd4',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
},
active: {
- backgroundColor : '#00bcd4',
- color : '#fff',
+ backgroundColor: '#00bcd4',
+ color: '#fff',
},
completed: {
- backgroundColor : '#00bcd4',
- color : '#fff',
+ backgroundColor: '#00bcd4',
+ color: '#fff',
},
});
@@ -119,56 +119,30 @@ export default function CustomizedSteppers(props) {
// const classes = useStyles();
const steps = getSteps();
-// {/* const handleNext = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep + 1);
-// };
+ // {/* const handleNext = () => {
+ // setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ // };
-// const handleBack = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep - 1);
-// };
+ // const handleBack = () => {
+ // setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ // };
-// const handleReset = () => {
-// setActiveStep(0);
-// };*/}
+ // const handleReset = () => {
+ // setActiveStep(0);
+ // };*/}
return (
- <>
- <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}>
+ <>
+ <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}/>
+ <StepLabel StepIconComponent={ColorlibStepIcon} />
</Step>
))}
</StyledStepper>
- {/*<div>
- {activeStep === steps.length ? (
- <div>
- <Button onClick={handleReset} className={classes.button}>
- Reset
- </Button>
- </div>
- ) : (
- <div>
- <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
- <div>
- <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
- Back
- </Button>
- <Button
- variant="contained"
- color="primary"
- onClick={handleNext}
- className={classes.button}
- >
- {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
- </Button>
- </div>
- </div>
- )}
- </div>*/}
</>
- );
+ );
}
const StyledStepper = styled(Stepper)`
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 3c157e6f..2caa077e 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -35,18 +35,18 @@ export const StyledFormHelperText = styled(FormHelperText)`
export const DottedBox = styled.div`
align-self : center;
/* width : ${props => props.thumbnail ? "100%" : "320px"}; */
- background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
- border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
+ background-color : ${props => props.contrast === "" ? props.thumbnail ? "transparent" : "#f4f4f4" : "black"};
+ border : ${props => props.contrast === "" ? props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4" : "2px dashed white"};
align-items : center;
border-radius : 10px;
display : flex;
flex-direction : column;
padding : 20px 0;
- color : ${props => props.thumbnail ? "#a5a5a5" : "$666"};
+ color : ${props => props.contrast === "" ? props.thumbnail ? "#a5a5a5" : "$666" : "white"};
.icon {
font-size : 40px !important;
- color : #00bcd4 !important;
+ color : ${props => props.contrast === "" ? "#00bcd4 !important" : "white !important"};
margin-bottom : 10px !important;
vertical-align : middle !important;
font-weight : normal !important;
@@ -64,32 +64,29 @@ export const DottedBox = styled.div`
export const BlueButton = styled(Button)`
&:hover {
- background-color : #00acc1 !important;
+ background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
}
- color : #fff !important;
- background-color : #00bcd4 !important;
- height : 36px !important;
+ color : ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
- min-width : 88px !important;
- align-self : center !important;
- padding : 16px !important;
`
export const GrayButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- height : 36px !important;
+ color : ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-weight : 600 !important;
- color : #666 !important;
- background-color: transparent;
- min-width : 88px !important;
- height : 36px !important;
- margin-left : 8px !important;
- margin-right : 8px !important;
+
.icon {
vertical-align : middle !important;
+ color : ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
@@ -124,12 +121,14 @@ export const WrapperBox = styled.div`
display : block;
border-radius : 3px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- background-color : #fff;
font-size : 14px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
.inner {
display : block;
padding : 20px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
}
.upload-title {
@@ -137,6 +136,7 @@ export const WrapperBox = styled.div`
font-size : 26px;
margin-bottom : 10px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.flex-column {
@@ -150,6 +150,7 @@ export const WrapperBox = styled.div`
p {
margin : 0 0 10px;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.buttons-div {
@@ -182,7 +183,7 @@ export const WrapperBox = styled.div`
overflow : hidden;
text-align : center;
font-size : 14px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding : 0 5px;
}
}
@@ -231,7 +232,7 @@ export const WrapperBox = styled.div`
.file-status {
.icon-margin {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
margin-right : 5px;
}
.MuiLinearProgress-root {
@@ -251,17 +252,20 @@ export const WrapperBox = styled.div`
margin-top: 40px;
border-top: solid 1px #f4f4f4;
text-align: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
span {
font-size : 16px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
}
}
`
export const InfoBox = styled.div`
- background-color : #fff;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
padding : 30px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -365,76 +369,71 @@ export const StyledFormLabel = styled(FormLabel)`
export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- full-width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !important;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
-
- .MuiFormHelperText-root {
- text-align : left;
- font-size : 14px !important ;
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
- }
- .MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
- }
`
- const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }})
-
- export function StyledRadio (props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon = {
- <ObjTypeBox>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
- }
-
- export const StyledDiv = styled.div`
+const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
+})
+
+export function StyledRadio(props) {
+ const classes = useStyles();
+ return (
+ <Radio
+ className={classes.root}
+ disableRipple
+ checkedIcon={
+ <ObjTypeBox checked>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon={
+ <ObjTypeBox>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
+}
+
+export const StyledDiv = styled.div`
display : flex;
margin-top : 30px;
justify-content : space-evenly;
`
- export const OrangeButton = styled(Button)`
+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;
@@ -444,7 +443,7 @@ export const StyledTextField = styled(TextField)`
margin-right : 8px !important;
`
- export const GreyButton = styled(Button)`
+export const GreyButton = styled(Button)`
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
@@ -471,24 +470,28 @@ export const StyledTextField = styled(TextField)`
}
`
- export const Background = styled.div `
+export const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
- color : #666;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
.container {
- padding : 0;
- 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 : 1170px;
- }
- }
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index b8919a54..d922219f 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -16,21 +16,21 @@ 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 LinkIcon from '../../img/link_icon.svg'
import ChooseLink from './ChooseLinkSection.js'
-import {WrapperBox, BlueButton, GrayButton} from './StyledComponents.js';
-import {DottedBox} from './StyledComponents.js';
-import {getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { WrapperBox, BlueButton, GrayButton } from './StyledComponents.js';
+import { DottedBox } from './StyledComponents.js';
+import { getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
import AttachFileIcon from '@material-ui/icons/AttachFile';
import axios from 'axios'
-import {apiUrl} from '../../env';
+import { apiUrl } from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
import Alert from '../Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
-export default function UploadFileWrapper (props) {
+export default function UploadFileWrapper(props) {
/*-----------------------------------------------------------------
- Wrapper for file upload box
- has three different stages:
@@ -41,10 +41,11 @@ export default function UploadFileWrapper (props) {
- Props used:
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
- */
+ - contrast : used to display contrast colors or not
+ */
const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
- const handleNextStage = (newStage) => {setStage(newStage)}
+ const handleNextStage = (newStage) => { setStage(newStage) }
// eslint-disable-next-line
const [fileToUpload, setFileToUpload] = useState(null);
@@ -55,15 +56,15 @@ export default function UploadFileWrapper (props) {
const [uploadProgress, setProgress] = useState(0)
const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
- async function onFileChange (file) {
- if(!file) return;
+ async function onFileChange(file) {
+ if (!file) return;
let newFile = file
console.log(newFile)
setFileToUpload(newFile);
setFileName(newFile.name)
- let total = Math.ceil(newFile.size/chunkSize)
+ let total = Math.ceil(newFile.size / chunkSize)
let currentChunkStartByte = 0;
let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
let chunkIdentifier = props.draftID + '-' + newFile.name;
@@ -88,7 +89,7 @@ export default function UploadFileWrapper (props) {
if (response.headers['access-token']) {
updateHeaders(response.headers)
}
- setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
+ setProgress(Math.round((currentChunkFinalByte / newFile.size) * 100))
remainingBytes = newFile.size - currentChunkFinalByte;
if (currentChunkFinalByte === newFile.size) {
setFileDoneUploading(true)
@@ -114,7 +115,7 @@ export default function UploadFileWrapper (props) {
if (attachmentID != null) {
const url = `/learning_objects/${props.draftID}/attachment/${attachmentID}`
- deleteRequest(url, (data) => {handleNextStage("default")}, (error) => {console.log(error)})
+ deleteRequest(url, (data) => { handleNextStage("default") }, (error) => { console.log(error) })
}
}
@@ -145,25 +146,25 @@ export default function UploadFileWrapper (props) {
const url = `/learning_objects/${props.draftID}`
let payload = {
- "learning_object" : {
- "id" : props.draftID,
- "link" : link
+ "learning_object": {
+ "id": props.draftID,
+ "link": link
}
}
- putRequest(url, payload, (data) => {toggleSnackbar(true)}, (error) => {console.log(error)})
+ putRequest(url, payload, (data) => { toggleSnackbar(true) }, (error) => { console.log(error) })
}
switch (stage) {
case "error":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">Erro</div>
- <span>Clique no botão para tentar novamente.</span>
+ <span>Clique no botão para tentar novamente.</span>
<div className="flex-column">
<div className="buttons-div">
- <GrayButton onClick={() => {handleNextStage("default")}}>
+ <GrayButton contrast={props.contrast} onClick={() => { handleNextStage("default") }}>
<span className="button-text">
Voltar
</span>
@@ -174,8 +175,8 @@ export default function UploadFileWrapper (props) {
</WrapperBox>
)
case "fileSelected":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">
{fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
@@ -186,33 +187,33 @@ export default function UploadFileWrapper (props) {
<div className="item-info">
{
fileDoneUploading ?
- (
- <React.Fragment>
- <div className="file-status">
- <DoneIcon className="icon icon-margin"/> {fileName}
+ (
+ <React.Fragment>
+ <div className="file-status">
+ <DoneIcon contrast={props.contrast} className="icon icon-margin" /> {fileName}
</div>
- <GrayButton onClick={() => {handleDelete()}}>
- Excluir <DeleteIcon className="icon icon-remove"/>
+ <GrayButton contrast={props.contrast} onClick={() => { handleDelete() }}>
+ Excluir <DeleteIcon className="icon icon-remove" />
</GrayButton>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <div className="file-status">
- {uploadProgress}% {fileName}
- </div>
- <GrayButton onClick={() => {handleCancel()}}>
- Cancelar <DeleteIcon className="icon icon-remove"/>
- </GrayButton>
- </React.Fragment>
- )
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <div className="file-status">
+ {uploadProgress}% {fileName}
+ </div>
+ <GrayButton contrast={props.contrast} onClick={() => { handleCancel() }}>
+ Cancelar <DeleteIcon className="icon icon-remove" />
+ </GrayButton>
+ </React.Fragment>
+ )
}
</div>
</div>
<div className="warning">
<span>Não se esqueça de preencher as</span>
- <br/>
+ <br />
<span>informações sobre o recurso ao lado.</span>
</div>
</div>
@@ -222,19 +223,19 @@ export default function UploadFileWrapper (props) {
case "choosingLink":
return (
<React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+ <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => { toggleSnackbar(false) }}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert severity="info" style={{ backgroundColor: "#00acc1" }}>
Link salvo com sucesso!
</Alert>
</Snackbar>
- <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+ <ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
</React.Fragment>
)
default:
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
@@ -243,38 +244,39 @@ export default function UploadFileWrapper (props) {
<div className="upload-form">
<form id="file_upload">
<DottedBox
+ contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
- >
- <AttachFileIcon className="icon"/>
+ >
+ <AttachFileIcon className="icon" />
<input
type="file"
- onChange = {(e) => {onFileChange(e.target.files[0])}}
+ onChange={(e) => { onFileChange(e.target.files[0]) }}
id="upload-file"
- style={{display : "none"}}
- />
- <BlueButton>
- <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+ style={{ display: "none" }}
+ />
+ <BlueButton contrast={props.contrast}>
+ <label htmlFor="upload-file" style={{ width: "inherit", cursor: "pointer" }}>
ESCOLHER ARQUIVO
</label>
</BlueButton>
- <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={{ marginTop: "6px" }}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</form>
</div>
</div>
<div className="strike-box">
- <div className="strike"/><h3>ou</h3><div className="strike"/>
+ <div className="strike" /><h3>ou</h3><div className="strike" />
</div>
<div className="enviar-link-texto">
- <img alt="" src={LinkIcon}/>
- <br/>
+ <img alt="" src={LinkIcon} />
+ <br />
<span>Enviar link de um recurso de outro site</span>
</div>
- <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton>
+ <BlueButton contrast={props.contrast} onClick={() => { handleNextStage("choosingLink") }}>ENVIAR LINK</BlueButton>
</div>
</div>
</WrapperBox>
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 26be5c95..67828e7a 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -162,28 +162,33 @@ export default function PermissionsContainer(props) {
disabled={unavailableButton || unavailableCheckbox}
style={
unavailableButton || unavailableCheckbox
- ? { backgroundColor: "#e9e9e9" }
- : { backgroundColor: "#00bcd4" }
+ ? { backgroundColor: "#e9e9e9" } :
+ state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }
}
onClick={handleAgreement}
>
<Styledspan
style={
unavailableButton || unavailableCheckbox
- ? { color: "#666666", fontWeight: "600" }
- : { color: "#ffffff", fontWeight: "600" }
+ ? { color: "#666666", fontWeight: "600" } :
+ state.contrast === "" ? { color: "#ffffff", fontWeight: "600" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }
}
>
Continuar{" "}
</Styledspan>
</Button>
<Button
- style={{
+ style={state.contrast === "" ? {
marginLeft: "45px",
backgroundColor: "#e9e9e9",
- }}
+ } : {
+ marginLeft: "45px",
+ backgroundColor: "black",
+ border: "1px solid white"
+ }
+ }
>
- <Styledspan style={{ color: "rgb(102, 102, 102)", fontWeight: "600 !important" }} onClick={() => { redirectToHome() }}>
+ <Styledspan style={state.contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "600 !important" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }} onClick={() => { redirectToHome() }}>
Cancelar
</Styledspan>
</Button>
@@ -198,7 +203,8 @@ export default function PermissionsContainer(props) {
]
) : (
<>{redirect()}</>
- )}
+ )
+ }
</>
);
}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 848b3b5b..8d683857 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -16,146 +16,148 @@ 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} from 'react'
+import React, { useState, useEffect, useContext } from 'react'
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import {Store} from '../Store.js'
-import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import { Store } from '../Store.js'
+import { InfoBox } from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig.js'
import PartOne from '../Components/UploadPageComponents/PartOne.js'
import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
import PartThree from '../Components/UploadPageComponents/PartThree.js'
import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
-import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import { Background } from '../Components/UploadPageComponents/StyledComponents'
import LoadingSpinner from '../Components/LoadingSpinner.js'
-import {Redirect} from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
-export default function UploadPage (props) {
- const {state} = useContext(Store)
+export default function UploadPage(props) {
+ const { state } = useContext(Store)
- // {/*Object : link or file uploaded*/}
- // eslint-disable-next-line
- const [object, setObject] = useState()
+ // {/*Object : link or file uploaded*/}
+ // eslint-disable-next-line
+ const [object, setObject] = useState()
- const [loading, toggleLoading] = useState(true)
- const [draft, setDraft] = useState({})
- function handleSuccessfulGet (data) {
- setDraft(data)
- toggleLoading(false)
- }
- useEffect( () => {
- if (state.currentUser.id !== "") {
+ const [loading, toggleLoading] = useState(true)
+ const [draft, setDraft] = useState({})
+ function handleSuccessfulGet(data) {
+ setDraft(data)
+ toggleLoading(false)
+ }
+ useEffect(() => {
+ if (state.currentUser.id !== "") {
- const url = `/learning_objects/`
+ const url = `/learning_objects/`
- let payload = {}
+ let payload = {}
- postRequest(url, payload, handleSuccessfulGet, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
- }
- }, [])
+ }
+ }, [])
- const [activeStep, setActiveStep] = React.useState(0);
- const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+ const [activeStep, setActiveStep] = React.useState(0);
+ const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
- const [objectSubmitted, toggleModal] = useState(false)
- const handleModal = (value) => {toggleModal(value)}
+ const [objectSubmitted, toggleModal] = useState(false)
+ const handleModal = (value) => { toggleModal(value) }
- const handlePost = () => {
- if (state.currentUser.id !== "") {
- const url = `/learning_objects/${draft.id}/publish`
+ const handlePost = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/learning_objects/${draft.id}/publish`
- let payload = {}
+ let payload = {}
- postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
- }
}
+ }
- const handleSubmit = () => {
- if (state.currentUser.id !== "") {
- const url = `/submissions/`
+ const handleSubmit = () => {
+ if (state.currentUser.id !== "") {
+ const url = `/submissions/`
- let payload = {
- "submission" : {
- "learning_object_id" : draft.id
- }
- }
+ let payload = {
+ "submission": {
+ "learning_object_id": draft.id
+ }
+ }
- postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
- )
+ postRequest(url, payload,
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
+ )
- }
}
-
- return (
- <React.Fragment>
- {
- state.currentUser.id === '' &&
- <Redirect to="/"/>
- }
- {
- loading === true ?
- (
- <LoadingSpinner text={"CARREGANDO..."}/>
- )
- :
- (
- <>
- <ModalLearningObjectPublished
- open={objectSubmitted}
- handleClose={() => {toggleModal(false); props.history.push('/')}}
- draftID={draft.id}
- />
- {
- activeStep === 2 ?
- (
- <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
- )
- :
- (
- <Background>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper draftID={draft.id}/>
- </Grid>
- <Grid item md={8} xs={12}>
- <InfoBox>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper activeStep={activeStep}/>
- </div>
- </div>
- {
- activeStep === 0 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartOne draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- </InfoBox>
- </Grid>
- </Grid>
+ }
+
+ return (
+ <React.Fragment>
+ {
+ state.currentUser.id === '' &&
+ <Redirect to="/" />
+ }
+ {
+ loading === true ?
+ (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
+ </div>
+ )
+ :
+ (
+ <>
+ <ModalLearningObjectPublished
+ open={objectSubmitted}
+ handleClose={() => { toggleModal(false); props.history.push('/') }}
+ draftID={draft.id}
+ />
+ {
+ activeStep === 2 ?
+ (
+ <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
+ )
+ :
+ (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox contrast={state.contrast}>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper contrast={state.contrast} activeStep={activeStep} />
</div>
- </Background>
- )
- }
- </>
- )
- }
+ </div>
+ {
+ activeStep === 0 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartOne draftID={draft.id} stepperControl={stepperControl} />
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl} />
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
+ </Grid>
+ </div>
+ </Background>
+ )
+ }
+ </>
+ )
+ }
</React.Fragment>
-)
+ )
}
--
GitLab