Skip to content
Snippets Groups Projects
Commit 26270f0a authored by lfr20's avatar lfr20
Browse files

implementing acessibility

parent c0b40047
No related branches found
No related tags found
5 merge requests!100Changed recaptcha key to the production one, removed console.logs and fixed...,!99Changed recaptcha key to the production one, removed console.logs and fixed...,!98Changed recaptcha key to the production one, removed console.logs and fixed...,!86Acessibility,!83Acessibility luis
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 460 additions and 398 deletions
src/Components/Checkbox.js
+ 31
− 7
View file @ 26270f0a
......@@ -19,16 +19,34 @@ import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import styled from 'styled-components'
import { yellow, blue } from "@material-ui/core/colors";
import { withStyles } from '@material-ui/core/styles';
const StyledFormControlLabel = styled(FormControlLabel)`
font-size : 12px !important;
.label {
font-size : 12px !important;
}
.MuiCheckbox-colorSecondary.Mui-checked {
color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
}
`
const ContrastCheckBox = withStyles({
root: {
color: yellow[400],
'&$checked': {
color: yellow[600],
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
const NormalCheckBox = withStyles({
root: {
color: blue[400],
'&$checked': {
color: blue[600],
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default function LabeledCheckbox(props) {
......@@ -36,10 +54,16 @@ export default function LabeledCheckbox(props) {
<StyledFormControlLabel
contrast={props.contrast}
control={
<Checkbox
value={props.checked}
onChange={props.handleChange}
/>
props.contrast === "" ?
<NormalCheckBox
value={props.checked}
onChange={props.handleChange}
/>
:
<ContrastCheckBox
value={props.checked}
onChange={props.handleChange}
/>
}
label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
/>
......
src/Components/CollectionCardFunction.js
+ 174
− 174
View file @ 26270f0a
This diff is collapsed.
src/Components/MobileDrawerMenu.js
+ 2
− 2
View file @ 26270f0a
......@@ -152,7 +152,7 @@ export default function MobileDrawerMenu(props) {
src={getUserAvatar()}
/>
</div>
<span className="Text">Minha área</span>
<span className="text">Minha área</span>
</MyArea>
{
minhaArea.map((item, index) =>
......@@ -258,7 +258,7 @@ const ButtonPublicarRecurso = styled(Button)`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
width: 40%;
width: 60%;
background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
......
src/Components/PublicationPermissionsContent.js
+ 55
− 44
View file @ 26270f0a
import React, {useState, useEffect} from 'react';
import React, { useState, useEffect } from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
......@@ -8,7 +8,8 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import {getRequest} from './HelperFunctions/getAxiosConfig'
import { getRequest } from './HelperFunctions/getAxiosConfig';
import { yellow } from "@material-ui/core/colors";
const StyledFormControl = styled(FormControl)`
display: "block ruby";
......@@ -16,74 +17,84 @@ const StyledFormControl = styled(FormControl)`
`
const BlueRadio = withStyles({
root: {
color: '#666',
'&$checked': {
color: '#00bcd4',
root: {
color: '#666',
'&$checked': {
color: '#00bcd4',
},
},
},
checked: {},
checked: {},
})((props) => <Radio color="default" {...props} />);
export default function PublicationPermissionsContent (props) {
const ContrastRadio = withStyles({
root: {
color: yellow[400],
'&$checked': {
color: yellow[600],
},
},
checked: {},
})((props) => <Radio color="default" {...props} />);
export default function PublicationPermissionsContent(props) {
const [questionsArr, setQuestionsArr] = useState([])
const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) }
function handleSuccess (data) {
function handleSuccess(data) {
handleSetQuestionsArr(data)
}
useEffect(() => {
const url = `/questions/`
getRequest(url, handleSuccess, (error) => {console.log(error)})
getRequest(url, handleSuccess, (error) => { console.log(error) })
}, [])
return (
<CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
<Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
<div classname="texto-termos">
<div classname="title">
<Typography variant = "h3" style={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}>
PERMISSÃO DE PUBLICAÇÃO
</Typography>
</div>
<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,
<div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
<Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
<div classname="texto-termos">
<div classname="title">
<Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}>
PERMISSÃO DE PUBLICAÇÃO
</Typography>
</div>
<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>)
</p>
<Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
(<a href="/termos" style={{ color: "initial" }}><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
inviabiliza a publicação do recurso em nossa rede.
</Typography>
<p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
</Typography>
<p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
<StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
<Grid container>
<StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}>
<Grid container>
{
questionsArr.map((question, index) =>
(question.status === 'active' && question.id !== 4) &&
<React.Fragment key={question.id}>
<Grid item xs={10}>
<p>{question.description}</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
</RadioGroup>
</Grid>
</React.Fragment>
)
(question.status === 'active' && question.id !== 4) &&
<React.Fragment key={question.id}>
<Grid item xs={10}>
<p>{question.description}</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
</RadioGroup>
</Grid>
</React.Fragment>
)
}
</Grid>
</StyledFormControl>
</div>
</CardContent>
</StyledFormControl>
</div>
</div>
)
}
......
src/Components/SearchBar.js
+ 21
− 1
View file @ 26270f0a
......@@ -26,6 +26,7 @@ import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"
import { makeStyles } from "@material-ui/styles";
const dividerStyled = {
......@@ -40,6 +41,23 @@ const dividerStyled = {
margin: '0 20px'
}
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%"
}
}));
const DividerVertical = () => <em style={dividerStyled}></em>
const ButtonStyled = styled(Button)`
......@@ -147,6 +165,7 @@ const Flex = styled.span`
`*/
export default function SearchBar(props) {
const classes = useStyles();
const [query, setQuery] = useState('')
const [searchClass, setSearchClass] = useState('LearningObject')
......@@ -188,7 +207,7 @@ export default function SearchBar(props) {
const linkTarget = {
pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
state: {
state: {
applied: true
}
};
......@@ -204,6 +223,7 @@ export default function SearchBar(props) {
type="search"
margin="normal"
variant="outlined"
InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
value={query}
onChange={handleChange}
onKeyPress={handleKeyDown}
......
src/Components/TermsPageContent.js
+ 89
− 89
View file @ 26270f0a
This diff is collapsed.
src/Pages/PublicationPermissionsPage.js
+ 12
− 11
View file @ 26270f0a
......@@ -30,7 +30,6 @@ const CardStyled = styled(Card)`
box-sizing: border-box;
background-color: white;
max-width: 1700px;
padding-top: 52px;
@media ${device.mobileM} {
width: 100%;
height: 100%;
......@@ -44,11 +43,13 @@ const Styledspan = styled.span`
line-height: 22px;
font-size: 15px;
letter-spacing: 0.01em;
color: ${props => props.contrast === "" ? "" : "yellow"};
text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
`;
const Background = styled.div`
padding-top : 40px;
background-color : #f4f4f4;
background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
......@@ -132,20 +133,20 @@ export default function PermissionsContainer(props) {
handleClose={closeModal}
disableBackdropClick={true}
/>
<Background
>
<Background contrast={state.contrast}>
<div className="container">
<CardStyled variant="outlined">
<PublicationPermissionsContent handleRadios={handleRadios} />
<PublicationPermissionsContent handleRadios={handleRadios} contrast={state.contrast} />
<CardActions
style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
>
<div>
<div style={{ fontSize: "14px" }}>
<LabeledCheckbox
contrast={state.contrast}
disabled={unavailableCheckbox}
label={
<Styledspan>
<Styledspan contrast={state.contrast}>
Li e permito a publicação do meu recurso na
Plataforma Integrada de RED do MEC, assim como
atesto que o meu recurso atende aos critérios
......@@ -169,8 +170,8 @@ export default function PermissionsContainer(props) {
<Styledspan
style={
unavailableButton || unavailableCheckbox
? { color: "#666666", fontWeight : "600" }
: { color: "#ffffff", fontWeight : "600" }
? { color: "#666666", fontWeight: "600" }
: { color: "#ffffff", fontWeight: "600" }
}
>
Continuar{" "}
......@@ -182,7 +183,7 @@ export default function PermissionsContainer(props) {
backgroundColor: "#e9e9e9",
}}
>
<Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}} onClick={() => {redirectToHome()}}>
<Styledspan style={{ color: "rgb(102, 102, 102)", fontWeight: "600 !important" }} onClick={() => { redirectToHome() }}>
Cancelar
</Styledspan>
</Button>
......@@ -192,7 +193,7 @@ export default function PermissionsContainer(props) {
</CardActions>
</CardStyled>
</div>
</Background>
</Background>
</>
]
) : (
......
src/Pages/TermsPage.js
+ 76
− 70
View file @ 26270f0a
......@@ -15,9 +15,9 @@ 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, useContext} from 'react';
import React, { useState, useContext } from 'react';
import styled from 'styled-components'
import {device} from '../Components/device.js'
import { device } from '../Components/device.js'
import { Store } from '../Store.js';
import { Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
......@@ -25,12 +25,11 @@ import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
import AppBar from '@material-ui/core/AppBar';
import { makeStyles } from '@material-ui/core/styles';
import {Link} from 'react-router-dom'
import { Link } from 'react-router-dom'
const CardStyled = styled(Card)`
box-sizing : border-box;
background-color : white;
max-width: 1700px;
padding-top: 52px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
......@@ -57,7 +56,7 @@ const StyledSpanContinuar = styled.span`
const Background = styled.div`
padding-top : 40px;
background-color : #f4f4f4;
background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
......@@ -78,76 +77,76 @@ const Background = styled.div`
}
`
export default function TermsContainer (props) {
// eslint-disable-next-line
const {state, dispatch} = useContext(Store)
// eslint-disable-next-line
const [checked, setChecked] = useState(false);
const [unavailableButton, setButtonAvailability] = useState(true);
const classes = useStyles()
const handleChecked = e => {
setChecked(e.target.checked);
setButtonAvailability(!unavailableButton);
}
const handleAgreement = () => {
dispatch( {
type: 'USER_AGREED_TO_PUBLICATION_TERMS',
userAgreement: true
})
export default function TermsContainer(props) {
// eslint-disable-next-line
const { state, dispatch } = useContext(Store)
// eslint-disable-next-line
const [checked, setChecked] = useState(false);
const [unavailableButton, setButtonAvailability] = useState(true);
const classes = useStyles()
const handleChecked = e => {
setChecked(e.target.checked);
setButtonAvailability(!unavailableButton);
}
if (props.location.state) {
props.history.push('/professor')
}else {
props.history.push('/permission')
window.scrollTo(0, 0)
}
const handleAgreement = () => {
dispatch({
type: 'USER_AGREED_TO_PUBLICATION_TERMS',
userAgreement: true
})
if (props.location.state) {
props.history.push('/professor')
} else {
props.history.push('/permission')
window.scrollTo(0, 0)
}
}
return (
<Background>
<div className="container">
<CardStyled variant="outlined">
<TermsPageContent/>
</CardStyled>
</div>
<AppBar position="fixed" color="primary" className={classes.appBar}>
<StyledAppBarContainer>
<div className="container">
<div style={{fontSize:"14px"}}>
<LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
</div>
<div className="botoes">
<Button disabled = {unavailableButton}
style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
return (
<Background contrast={state.contrast}>
<div className="container">
<CardStyled contrast={state.contrast} variant="outlined">
<TermsPageContent contrast={state.contrast} />
</CardStyled>
</div>
<AppBar position="fixed" color="primary" className={state.contrast === "" ? classes.lightAppBar : classes.darkAppBar}>
<StyledAppBarContainer>
<div className="container">
<div style={{ fontSize: "14px" }}>
<LabeledCheckbox contrast={state.contrast} label={<Styledspan style={state.contrast === "" ? { color: "#666", fontWeight: "600" } : { color: "yellow", fontWeight: "600", textDecoration: "underline" }}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked} />
</div>
<div className="botoes">
<Button disabled={unavailableButton}
style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
onClick={handleAgreement}
>
<StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
Continuar
</StyledSpanContinuar>
</Button>
<Link to="/">
<GrayButton>
Cancelar
</GrayButton>
</Link>
</div>
>
<StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
Continuar
</StyledSpanContinuar>
</Button>
<Link to="/">
<GrayButton contrast={state.contrast}>
Cancelar
</GrayButton>
</Link>
</div>
</StyledAppBarContainer>
</AppBar>
</Background>
)
</div>
</StyledAppBarContainer>
</AppBar>
</Background>
)
}
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;
font-weight : 600 !important;
color : #666 !important;
color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
......@@ -171,13 +170,20 @@ const GrayButton = styled(Button)`
`
const useStyles = makeStyles((theme) => ({
appBar: {
top: 'auto',
bottom: 0,
height : '100px',
backgroundColor : '#fff',
boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
},
lightAppBar: {
top: 'auto',
bottom: 0,
height: '100px',
backgroundColor: '#fff',
boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
},
darkAppBar: {
top: 'auto',
bottom: 0,
height: '100px',
backgroundColor: 'black',
boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
},
}));
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment