Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • portalmec/portalmec-react
  • rfhferreira/cleaning-portal-mec-react
2 results
Show changes
Showing
with 2689 additions and 95 deletions
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
color: "#666"
}
}));
export default function SearchEPIdiomas() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const filtrosIdiomas = [
{ value: "0", exemplo: "Alemão" },
{ value: "1", exemplo: "Espanhol" },
{ value: "2", exemplo: "Francês" },
{ value: "3", exemplo: "Inglês" },
{ value: "4", exemplo: "Italiano" },
{ value: "5", exemplo: "Japonês" },
{ value: "6", exemplo: "LIBRAS" },
{ value: "7", exemplo: "Mandarim" },
{ value: "8", exemplo: "Nenhum" },
{ value: "9", exemplo: "Outro" },
{ value: "10", exemplo: "Português" },
{ value: "11", exemplo: "Russo" }
];
return (
<List className={classes.root}>
{filtrosIdiomas.map(item => {
const labelId = `checkbox-list-label-${item.value}`;
return (
<ListItem
key={item.exemplo}
role={undefined}
dense
button
onClick={handleToggle(item.value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(item.value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={item.exemplo} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments"></IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SearchList from "../SearchList";
const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
boxShadow: "none",
"&:not(:last-child)": {
borderBottom: 0
},
"&:before": {
display: "none"
},
"&$expanded": {
margin: "auto"
}
},
expanded: {}
})(MuiExpansionPanel);
const ExpansionPanelSummary = withStyles({
root: {
color: "#666",
marginBottom: -1,
minHeight: 56,
backgroundColor: "#fff",
"&$expanded": {
minHeight: 56,
backgroundColor: "#fff"
}
},
content: {
"&$expanded": {
margin: "12px 0"
}
},
expanded: {}
})(MuiExpansionPanelSummary);
const TesteTypography = withStyles({
root: {
fontSize: "17px"
}
})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
root: {
padding: theme.spacing(2)
}
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanels() {
return (
<div>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography
style={{
fontSize: "18px",
textTransform: "uppercase",
fontWeight: "500"
}}
>
Filtros
</Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2d-content"
id="panel2d-header"
>
<TesteTypography>Componentes Curriculares</TesteTypography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
<SearchList />
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3d-content"
id="panel3d-header"
>
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel4d-content"
expandIcon={<ExpandMoreIcon />}
id="panel4d-header"
>
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel5d-content"
expandIcon={<ExpandMoreIcon />}
id="panel5d-header"
>
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel6d-content"
expandIcon={<ExpandMoreIcon />}
id="panel6d-header"
>
<Typography>Palavra-Chave</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
color: "#666"
}
}));
export default function SearchEPTiposRec() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const filtrosTipos = [
{ value: "0", exemplo: "Animação" },
{ value: "1", exemplo: "Aplicativo móvel" },
{ value: "2", exemplo: "Apresentação" },
{ value: "3", exemplo: "Áudio" },
{ value: "4", exemplo: "Experimento prático" },
{ value: "5", exemplo: "Imagem" },
{ value: "6", exemplo: "Infográfico" },
{ value: "7", exemplo: "Jogo" },
{ value: "8", exemplo: "Livro digital" },
{ value: "9", exemplo: "Mapa" },
{ value: "10", exemplo: "Outros" },
{ value: "11", exemplo: "Software Educacional" },
{ value: "12", exemplo: "Texto" },
{ value: "13", exemplo: "Vídeo" },
{ value: "14", exemplo: "Website externo" }
];
return (
<List className={classes.root}>
{filtrosTipos.map(item => {
const labelId = `checkbox-list-label-${item.value}`;
return (
<ListItem
key={item.exemplo}
role={undefined}
dense
button
onClick={handleToggle(item.value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(item.value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={item.exemplo} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments"></IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
const ExpansionPanel = withStyles({
root: {
border: "1px solid rgba(0, 0, 0, .125)",
boxShadow: "none",
"&:not(:last-child)": {
borderBottom: 0
},
"&:before": {
display: "none"
},
"&$expanded": {
margin: "auto"
}
},
expanded: {}
})(MuiExpansionPanel);
const ExpansionPanelSummary = withStyles({
root: {
color: "#666",
marginBottom: -1,
minHeight: 56,
backgroundColor: "#fff",
".MuiButtonBase-root.MuiIconButton-root.MuiExpansionPanelSummary-expandIcon.MuiIconButton-edgeEnd": {
paddingInline: "0"
},
"&$expanded": {
minHeight: 56,
backgroundColor: "#fff"
}
},
content: {
"&$expanded": {
margin: "12px 0"
}
},
expanded: {}
})(MuiExpansionPanelSummary);
const TesteTypography = withStyles({
root: {
fontSize: "17px"
}
})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
root: {
padding: theme.spacing(2)
}
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanel() {
return (
<div>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography
style={{
fontSize: "18px",
textTransform: "uppercase",
fontWeight: "500"
}}
>
Filtros
</Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2d-content"
id="panel2d-header"
>
<TesteTypography>Componentes Curriculares</TesteTypography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
<SearchEPCompCurriculum />
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3d-content"
id="panel3d-header"
>
<Typography>Tipos de Recurso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<SearchEPTiposRec />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel4d-content"
expandIcon={<ExpandMoreIcon />}
id="panel4d-header"
>
<Typography>Etapas de Ensino</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<SearchEPEtapasEns />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel5d-content"
expandIcon={<ExpandMoreIcon />}
id="panel5d-header"
>
<Typography>Idiomas</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<SearchEPIdiomas />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel square>
<ExpansionPanelSummary
aria-controls="panel6d-content"
expandIcon={<ExpandMoreIcon />}
id="panel6d-header"
>
<Typography>Palavra-Chave</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
color: "#666"
}
}));
export default function SearchEPEtapasEns() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const filtrosEtapas = [
{ value: "0", exemplo: "Educação Infantil" },
{ value: "1", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
{ value: "2", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
{ value: "3", exemplo: "Ensino Médio" },
{ value: "4", exemplo: "Ensino Superior" },
{ value: "5", exemplo: "Outros" }
];
return (
<List className={classes.root}>
{filtrosEtapas.map(item => {
const labelId = `checkbox-list-label-${item.value}`;
return (
<ListItem
key={item.exemplo}
role={undefined}
dense
button
onClick={handleToggle(item.value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(item.value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={item.exemplo} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments"></IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import CommentIcon from "@material-ui/icons/Comment";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
export default function SearchList() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<List className={classes.root}>
{[0, 1, 2, 3].map(value => {
const labelId = `checkbox-list-label-${value}`;
return (
<ListItem
key={value}
role={undefined}
dense
button
onClick={handleToggle(value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={`Line item ${value + 1}`} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments">
<CommentIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
......@@ -72,13 +72,13 @@ class SearchSection extends Component{
<SearchBar/>
</Container> */}
<div style={{paddingBottom: "100px", color: "white"}}>
<a href="#sobre"><MdInfoOutline size="30px"/>SOBRE A PLATAFORMA</a>
<a href="#apresentacao"> <FaRegPlayCircle size="25px"/>VÍDEO DE APRESENTAÇÃO</a>
<a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle"}} />SOBRE A PLATAFORMA</a>
<a href="#apresentacao" style={{color:"#fff",textDecoration: "none"}}> <FaRegPlayCircle size="20px" style={{verticalAlign: "middle"}} />VÍDEO DE APRESENTAÇÃO</a>
</div>
<Row justify="center">
<button style={{...buttonStyle, ...{backgroundColor: "#ff7f00"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
<button style={{...buttonStyle, ...{backgroundColor: "#e81f4f"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button>
<button style={{...buttonStyle, ...{backgroundColor: "#673ab7"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
<button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button>
<button style={{...buttonStyle, ...{backgroundColor: "#e81f4f",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button>
<button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button>
</Row>
</div>
);
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.