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
Select Git revision

Target

Select target project
  • portalmec/portalmec-react
  • rfhferreira/cleaning-portal-mec-react
2 results
Select Git revision
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 2064 additions and 158 deletions
src/Components/ReportForm.js 0 → 100644
View file @ 4f57647c
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
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, {useContext} from 'react';
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
export default function ReportForm (props) {
const [value, setValue] = React.useState(-1);
const handleChange = (event) => {
setValue(event.target.value);
};
/*values are set according to backend complaint id*/
const [options] = React.useState([
{value : "6", text :'Esta pessoa está fingindo ser eu ou alguém que eu conheço.'},
{value : "4", text : 'Essa pessoa envia spam.'},
{value : "3", text : 'Essa é uma conta falsa.'},
{value : "1", text : ' A publicação dessa pessoa viola os diretos autorais.'},
{value : "2", text : 'As publicações dessa pessoa contém conteúdo ofensivo/abusivo.'}
])
const [moreInfo, setMoreInfo] = React.useState({
key : false,
value : "",
})
const handleChangeMoreInfo = (e) => {
const userInput = e.target.value
const flag = userInput.length > 150 ? true : false
setMoreInfo({...moreInfo,
key : flag,
value : userInput
})
}
const formSubmit = (e) => {
e.preventDefault()
const finalRadioValue = value
const finalMoreInfo = moreInfo
if( finalRadioValue != -1 && !(finalMoreInfo.key)) {
props.handleSubmit(finalRadioValue, finalMoreInfo.value)
}
}
return (
<form onSubmit={(e) => {formSubmit(e)}}>
<StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
<FormControlLabel value={option.value} control={<Radio color="orange"/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
id = {"Escreva mais sobre o problema"}
label={"Escreva mais sobre o problema"}
type = {"text"}
value = {moreInfo.value}
onChange = {e => handleChangeMoreInfo(e)}
helperText = {moreInfo.value.length + '/150'}
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
required = {false}
helperText ={moreInfo.value.length + '/150'}
style={{width:"100%"}}
/>
<ButtonsDiv>
<ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
<ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
}
const ButtonsDiv = styled.div`
display : flex;
flex-direction : row;
justify-content : flex-end;
align-items : center;
`
const ButtonCancelar = styled(Button)`
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
const ButtonEnviar = styled(Button)`
background-color : #ff7f00 !important;
color : #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
border-radius: 3px !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
outline : none !important;
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
const StyledTextField = styled(TextField)`
.MuiFormHelperText-root {
text-align : right;
}
label.Mui-focused {
color : orange;
}
label.Mui-focused.Mui-error {
color : red;
}
.MuiInput-underline::after {
border-bottom: 2px solid orange;
}
`
const StyledFormControl = styled(FormControl)`
.MuiFormControlLabel-root {
color : #666;
}
.MuiIconButton-label {
color : #666;
}
.PrivateRadioButtonIcon-checked-327 {
color : orange;
}
.MuiTypography-body1 {
font-size : 14px;
}
`
src/Components/ReportModal.js 0 → 100644
View file @ 4f57647c
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
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, {useContext} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import SignUpContainer from './SignUpContainerFunction.js'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
import ReportForm from './ReportForm.js'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
)
}
export default function ReportModal (props) {
const {state} = useContext(Store)
const handleSubmit = (complaint_reason_id, description) => {
console.log('complaint_reason_id: ', complaint_reason_id)
console.log('description: ', description)
const payload = {
"complaint" : {
"user_id" : state.currentUser.id,
"description" : description,
"complainable_id" : props.complainableId,
"complainable_type" : props.complainableType,
"complaint_reason_id" : complaint_reason_id
}
}
console.log(payload)
{/*
axios.post(`${apiUrl}/complaints`,
{
"complaint" : {
"user_id" : state.currentUser.id,
"description" : description,
"complainable_id" : props.complainableId,
"complainable_type" : props.complainableType,
"complaint_reason_id" : complaint_reason_id
}
}).then( (response) => {console.log(response)}, (error) => {console.log(error)})
*/}
}
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation={true}
centered={true}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open}>
<ReportContainer>
<Header>
<span style={{width:"32px"}}/>
<h2>O que está acontecendo?</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
<ReportForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
</Content>
</ReportContainer>
</Fade>
</StyledModal>
)
}
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
max-width : 470px;
`
const Header = styled.div`
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px;
align-items : center;
justify-content : space-between;
height : 64px;
h2 {
font-size : 26px;
font-weight : lighter;
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
const StyledModal = styled(Modal)`
.djXaxP{
margin : 0 !important;
}
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
`
const ReportContainer = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
max-height : none;
position : relative;
padding : 10px;
border-radius : 4px;
@media screen and (max-width : 899px) {
width : 100%;
height : 100%;
}
`
src/Components/ResourceCard.js
View file @ 4f57647c
...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details. ...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {Component} from 'react'; import React, { Component } from "react";
import './CardsAnimation.css'; import "./CardsAnimation.css";
import {Container} from 'react-grid-system'; import { Container } from "react-grid-system";
import Card from '@material-ui/core/Card'; import Card from "@material-ui/core/Card";
import CardContent from '@material-ui/core/CardContent'; import CardContent from "@material-ui/core/CardContent";
import CardActions from '@material-ui/core/CardActions'; import CardActions from "@material-ui/core/CardActions";
import IconButton from '@material-ui/core/IconButton'; import IconButton from "@material-ui/core/IconButton";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
import FavoriteIcon from '@material-ui/icons/Favorite'; import FavoriteIcon from "@material-ui/icons/Favorite";
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg"; import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg"; import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg"; import aplicativo from "../img/laranja/APP.jpg";
...@@ -39,26 +39,42 @@ import outros from "../img/laranja/OUTROS.jpg"; ...@@ -39,26 +39,42 @@ import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg"; import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg"; import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg"; import video from "../img/laranja/VIDEO.jpg";
import Rating from '@material-ui/lab/Rating'; import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from '@material-ui/icons/StarBorder'; import StarBorderIcon from "@material-ui/icons/StarBorder";
import {apiDomain} from '../env'; import { apiDomain } from "../env";
import AddIcon from '@material-ui/icons/CreateNewFolder'; import AddIcon from "@material-ui/icons/CreateNewFolder";
import Options from './CardOptions' import Options from "./CardOptions";
import Video from '@material-ui/icons/OndemandVideo'; import Video from "@material-ui/icons/OndemandVideo";
import noAvatar from "../img/default_profile.png"; import noAvatar from "../img/default_profile.png";
const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao}, const types = [
{label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}] { label: "Animação", thumb: animacao },
{ label: "Apresentação", thumb: apresentacao },
{ label: "Aplicativo", thumb: aplicativo },
{ label: "Áudio", thumb: audio },
{ label: "Vazio", thumb: vazio },
{ label: "Imagem", thumb: imagem },
{ label: "Gráfico", thumb: grafico },
{ label: "Jogo", thumb: jogo },
{ label: "Livro", thumb: livro },
{ label: "Livro digital", thumb: livro },
{ label: "Mapa", thumb: mapa },
{ label: "Outros", thumb: outros },
{ label: "Software Educacional", thumb: software },
{ label: "Software", thumb: software },
{ label: "Texto", thumb: texto },
{ label: "Vídeo", thumb: video }
];
const slideStyle = { const slideStyle = {
height: "50px", height: "50px",
width: "50px", width: "50px",
backgroundColor: "white", backgroundColor: "white",
borderRadius: "50%", borderRadius: "50%"
}; };
const publisherStyle = { const publisherStyle = {
color: "white", color: "white",
paddinLeft: "30px", paddinLeft: "30px",
fontSize: "15px", fontSize: "15px"
}; };
class ResourceCard extends Component { class ResourceCard extends Component {
...@@ -67,30 +83,38 @@ class ResourceCard extends Component { ...@@ -67,30 +83,38 @@ class ResourceCard extends Component {
this.state = { this.state = {
thumbnail: null, thumbnail: null,
userStyle: "animatiOff", userStyle: "animatiOff",
userAvatar: null, userAvatar: null
}; };
} }
renderType(type){ renderType(type){
if (!this.state.thumbnail && !this.props.thumbnail ) { if (!this.state.thumbnail) {
if(!this.props.thumbnail) {
const aux = types.find(function(element){return element.label === type});
this.setState({thumbnail: aux.thumb});
}
else{
this.setState({thumbnail: `${apiDomain}` + this.props.thumbnail});
}
}
{/*if (!this.state.thumbnail && !this.props.thumbnail ) {
var aux = types.find(function(element){ return element.label === type}); var aux = types.find(function(element){ return element.label === type});
this.setState({thumbnail: aux.thumb}); this.setState({thumbnail: aux.thumb});
} }
if (!this.state.thumbnail && this.props.thumbnail ) { if (!this.state.thumbnail && this.props.thumbnail ) {
this.setState({thumbnail: apiDomain + this.props.thumbnail}); this.setState({thumbnail: apiDomain + this.props.thumbnail});
} }*/}
} }
onHover() { onHover() {
this.setState({ userStyle: "animatiOn" }); this.setState({ userStyle: "animatiOn" });
} }
onIddle() { onIddle() {
this.setState({userStyle: "animatiOff"}) this.setState({ userStyle: "animatiOff" });
} }
defAvatar() { defAvatar() {
if (!this.state.userAvatar && (!this.props.avatar.length)){ if (!this.state.userAvatar && !this.props.avatar.length) {
this.setState({ userAvatar: noAvatar }); this.setState({ userAvatar: noAvatar });
} }
if (!this.state.userAvatar && (this.props.avatar) ) { if (!this.state.userAvatar && this.props.avatar) {
this.setState({ userAvatar: apiDomain + this.props.avatar }); this.setState({ userAvatar: apiDomain + this.props.avatar });
} }
} }
...@@ -98,21 +122,43 @@ class ResourceCard extends Component { ...@@ -98,21 +122,43 @@ class ResourceCard extends Component {
this.renderType(this.props.type); this.renderType(this.props.type);
this.defAvatar(); this.defAvatar();
return ( return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} > <Card
<Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}> onMouseOver={this.onHover.bind(this)}
onMouseOut={this.onIddle.bind(this)}
>
<Container
style={{
padding: "0px",
height: "175px",
backgroundColor: "#ff7f00"
}}
>
<div className={this.state.userStyle}> <div className={this.state.userStyle}>
<img style={slideStyle} src={this.state.userAvatar} alt="Avatar" /> <img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
<Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography> <Typography style={publisherStyle}>
Enviado por: <br />
{this.props.author}
</Typography>
</div> </div>
<img src={this.state.thumbnail} style={{height:"100%"}} alt="thumbnail do recurso"/> <img
src={this.state.thumbnail}
style={{ height: "100%" }}
alt="thumbnail do recurso"
/>
</Container> </Container>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}> <CardContent
<Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}> style={{ height: "60%", textAlign: "left", paddingBottom: "0px" }}
>
<Typography
variant="body2"
color="textSecondary"
component="p"
style={{ height: "45px", overflow: "hidden", fontSize: "0.8em" }}
>
{this.props.name} {this.props.name}
</Typography> </Typography>
</CardContent> </CardContent>
<Container style={{ textAlign: "left" }}> <Container style={{ textAlign: "left" }}>
<Rating <Rating
name="customized-empty" name="customized-empty"
value={this.props.rating * 10} value={this.props.rating * 10}
...@@ -120,23 +166,32 @@ class ResourceCard extends Component { ...@@ -120,23 +166,32 @@ class ResourceCard extends Component {
emptyIcon={<StarBorderIcon fontSize="inherit" />} emptyIcon={<StarBorderIcon fontSize="inherit" />}
/> />
</Container> </Container>
<CardActions style={{justifyContent: "space-between", padding: "0px"}}> <CardActions
{ this.props.type ==="Vídeo" style={{ justifyContent: "space-between", padding: "0px" }}
? <Video style={{color:"#ff7f00"}} /> >
: <br/>} {this.props.type === "Vídeo" ? (
<Video style={{ color: "#ff7f00" }} />
) : (
<br />
)}
<IconButton aria-label="Favoritar" size="small"> <IconButton aria-label="Favoritar" size="small">
<FavoriteIcon /> <FavoriteIcon />
</IconButton> </IconButton>
</CardActions> </CardActions>
<CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}> <CardActions
style={{
borderTop: "1px solid #e5e5e5",
justifyContent: "space-between"
}}
>
<IconButton aria-label="Guardar" size="small"> <IconButton aria-label="Guardar" size="small">
<AddIcon /> <AddIcon />
</IconButton> </IconButton>
<Options /> <Options />
</CardActions> </CardActions>
</Card> </Card>
);} );
}
} }
export default ResourceCard; export default ResourceCard;
src/Components/ResourceCardFunction.js 0 → 100644
View file @ 4f57647c
/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
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} from 'react';
import Card from '@material-ui/core/Card';
import {apiDomain, apiUrl} from '../env';
import Options from './CardOptions'
import noAvatar from "../img/default_profile.png";
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
import audio from "../img/laranja/AUDIO.jpg";
import vazio from "../img/laranja/EMPTY.jpg";
import imagem from "../img/laranja/IMAGEM.jpg";
import grafico from "../img/laranja/INFOGRAFICO.jpg";
import jogo from "../img/laranja/JOGO.jpg";
import livro from "../img/laranja/LIVRO_DIGITAL.jpg";
import mapa from "../img/laranja/MAPA.jpg";
import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg";
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import Video from '@material-ui/icons/OndemandVideo';
import MoreIcon from '@material-ui/icons/More';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ButtonGuardarColecao from './ButtonGuardarColecao.js'
import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid';
const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
{label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
export default function ResourceCardFunction (props) {
const [thumbnail, setThumbnail] = useState(null)
const [label, setLabel] = useState(props.type ? props.type : "Outros")
const [userAvatar, setUserAvatar] = useState(noAvatar)
const [slideIn, setSlide] = useState(false)
const controlSlide = () => {setSlide(!slideIn)}
useEffect( () => {
//decide which thumbnail to use
if (props.thumbnail) {
setThumbnail(`${apiDomain}` + props.thumbnail)
}
else {
//props.type is either the object type or "Outros"
const aux = types.find(function(element){return element.label === props.type})
setThumbnail(aux.thumb)
}
if (props.avatar) {
setUserAvatar(`${apiDomain}` + props.avatar)
}
}, [])
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
<div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
<AvatarDiv>
<img className="img" src={userAvatar} alt="user avatar"/>
</AvatarDiv>
<EnviadoPor>
Enviado por:
<br/>
<p>{props.author}</p>
</EnviadoPor>
</div>
<TagContainer>
<Grid container spacing={1} justify='safe' style={{height : "inherit"}}>
{
props.tags.map( (tag) =>
<Grid item key={tag.id}>
<span key={tag.id}>{tag.name}</span>
</Grid>
)
}
</Grid>
</TagContainer>
</SlideContentDiv>
)
}
return (
<StyledCard>
<CardDiv>
<CardReaDiv>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
{
props.published &&
<Slide direction="right" in={slideIn}>
<a href="" className="text">
{SlideAnimationContent()}
</a>
</Slide>
}
<a href=""> {/*add link to learningObject*/}
<img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
</a>
</Header>
<Description>
<a href="" className="text"> {/*add link to learningObject*/}
<span>
{props.title}
</span>
</a>
{
props.published &&
<Rating
name="customized-empty"
value={props.rating*10}
precision={0.5}
style={{color:"#666"}}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
}
<Footer>
<Type>
<MoreIcon style={{color:"#ff7f00"}}/> {/*get icon based on object type*/}
<span>{label}</span>
</Type>
{
props.published &&
<LikeCounter>
<span>{props.likeCount}</span>
<ButtonNoWidth>
<FavoriteIcon style={{color : props.liked ? "red" : "#666" }}/>
</ButtonNoWidth>
</LikeCounter>
}
</Footer>
</Description>
</CardReaDiv>
{
props.published &&
<CardReaFooter>
<div style={{display : "flex", height : "100%"}}>
<ButtonGuardarColecao/>
</div>
<Options/>
</CardReaFooter>
}
</CardDiv>
</StyledCard>
)
}
/*---------- USED IN SLIDE DIV ONLY -----------*/
export const TagContainer = styled.div`
display : flex;
flex-direction : row;
width : 100%;
overflow : hidden;
flex : 2;
height : 120px;
span {
background-color : #fff;
height : 20px;
overflow : hidden;
margin : 2px;
padding : 3px 8px;
border-radius : 10px;
color : #666;
font-size : 11px;
}
`
export const EnviadoPor = styled.div`
display : inline-block;
padding-left : 10px;
overflow : hidden;
color : #fff;
padding-right : 1em;
p {
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;
margin : 0;
}
`
const AvatarDiv = styled.div`
vertical-align : middle;
border : 0;
img {
height : 40px;
width : 40px;
border : 0;
vertical-align : middle;
border-radius : 50%;
}
`
const SlideContentDiv = styled.div`
background-color : #ff9226;
padding : 10px;
width : 100%;
height : 100%;
position : absolute;
display : flex;
flex-direction : column;
`
/*--------------------------------------------*/
const CardReaFooter = styled.div`
height : 60px;
display : flex;
justify-content : space-between;
border-top : 1px solid #e5e5e5;
border-bottom : 1px solid #e5e5e5;
align-items : center;
padding : 0 15px 0 15px;
`
export const ButtonNoWidth = styled(Button)`
max-width : 24px !important;
width : 24px !important;
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
background-color : #fff !important;
color : #a5a5a5 !important;
border : 0 !important;
.MuiButton-root {
width : 24px !important;
min-width : 12px !important;
}
.MuiSvgIcon-root {
padding-right : 0 !important;
}
.MuiButton-label {
padding-left : 4px !important;
}
`
export const LikeCounter = styled.div`
font-size : 14px;
.btn-like {
padding : 0 !important;
background-color : #fff !important;
border : 0 !important;
min-width : min-content;
}
.MuiSvgIcon-root {
font-size : 21px;
vertical-align : middle;
padding-right : .4em;
}
`
const Type = styled.div`
line-height : 1;
.MuiSvgIcon-root {
font-size : 21px;
vertical-align : middle;
padding-right : .4em;
}
`
export const Footer = styled.div`
display : flex;
flex-direction : row;
justify-content : space-between;
`
const Description = styled.div`
display : flex;
flex : 1;
background-color : #fff;
flex-direction : column;
justify-content: space-between;
padding : 15px;
a {
text-decoration : none !important;
color : inherit;
}
.title {
text-overflow : ellipsis;
overflow : hidden;
margin-bottom : 10px;
font-size : 1.2em;
line-height : 1.1;
max-height : 46px;
color : #666;
}
`
export const Header = styled.div`
display : flex;
flex : 2;
position : relative;
overflow : hidden;
`
export const CardReaDiv = styled.div`
display : flex;
flex-direction : column;
height : 320px;
width : 272.5px;
margin : 0 auto;
.img-cover {
background-color : #e5e5e5;
height : 100%;
object-fit : cover;
overflow : hidden;
display : block;
background-position : center;
background-size : cover;
width : 100%;
}
`
export const CardDiv = styled.div`
background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
color : #666;
`
export const StyledCard = styled(Card)`
width : 272.5px;
max-height : 380px;
margin-top : 10px;
margin-bottom : 10px;
max-width : 345px;
border-radius : 0;
box-shadow : 0 0 5px 0 rgba(0,0,0,.25);
`
src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js 0 → 100644
View file @ 4f57647c
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 SearchEPCompCurriculum() {
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 filtrosComponente = [
{ exemplo: "Arte", value: "3" },
{ exemplo: "Biologia", value: "5" },
{ exemplo: "Ciências da Natureza", value: "6" },
{ exemplo: "Direitos Humanos", value: "20" },
{ exemplo: "Educação Ambiental", value: "21" },
{ exemplo: "Educação do Campo", value: "22" },
{ exemplo: "Educação Especial", value: "23" },
{ exemplo: "Educação Física", value: "7" },
{ exemplo: "Educação Indígena", value: "24" },
{ exemplo: "Educação Quilombola", value: "25" },
{ exemplo: "Educação Sexual", value: "26" },
{ exemplo: "Ensino Religioso", value: "16" },
{ exemplo: "Filosofia", value: "8" },
{ exemplo: "Física", value: "9" },
{ exemplo: "Geografia", value: "10" },
{ exemplo: "História", value: "11" },
{ exemplo: "Informática", value: "18" },
{ exemplo: "Língua Espanhola", value: "1" },
{ exemplo: "Língua Inglesa", value: "2" },
{ exemplo: "Língua Portuguesa", value: "4" },
{ exemplo: "Matemática", value: "12" },
{ exemplo: "Outras Línguas", value: "15" },
{ exemplo: "Outros", value: "17" },
{ exemplo: "Química", value: "13" },
{ exemplo: "Sociologia", value: "14" }
];
return (
<List className={classes.root}>
{filtrosComponente.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>
);
}
src/Components/SearchExpansionPanel/SearchEPIdiomas.js 0 → 100644
View file @ 4f57647c
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: "5", exemplo: "Alemão" },
{ value: "3", exemplo: "Espanhol" },
{ value: "4", exemplo: "Francês" },
{ value: "2", exemplo: "Inglês" },
{ value: "6", exemplo: "Italiano" },
{ value: "9", exemplo: "Japonês" },
{ value: "19", exemplo: "LIBRAS" },
{ value: "7", exemplo: "Mandarim" },
{ value: "18", exemplo: "Nenhum" },
{ value: "10", exemplo: "Outro" },
{ value: "1", exemplo: "Português" },
{ value: "8", 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>
);
}
src/Components/SearchExpansionPanel/SearchEPKeyWord.js 0 → 100644
View file @ 4f57647c
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>
);
}
src/Components/SearchExpansionPanel/SearchEPTiposRec.js 0 → 100644
View file @ 4f57647c
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: "5", exemplo: "Animação" },
{ value: "20", exemplo: "Aplicativo móvel" },
{ value: "17", exemplo: "Apresentação" },
{ value: "7", exemplo: "Áudio" },
{ value: "4", exemplo: "Experimento prático" },
{ value: "1", exemplo: "Imagem" },
{ value: "18", exemplo: "Infográfico" },
{ value: "19", exemplo: "Jogo" },
{ value: "21", exemplo: "Livro digital" },
{ value: "2", exemplo: "Mapa" },
{ value: "15", exemplo: "Outros" },
{ value: "3", exemplo: "Software Educacional" },
{ value: "6", exemplo: "Texto" },
{ value: "8", exemplo: "Vídeo" },
{ value: "13", exemplo: "Website externo" },
{ value: "22", exemplo: "Plano de Aula" },
];
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>
);
}
src/Components/SearchExpansionPanel/SearchExpansionPanel.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js 0 → 100644
View file @ 4f57647c
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: "1", exemplo: "Educação Infantil" },
{ value: "2", exemplo: "Ensino Fundamental I (1º até o 5º ano )" },
{ value: "3", exemplo: "Ensino Fundamental II (do 6º até o 9º ano)" },
{ value: "4", exemplo: "Ensino Médio" },
{ value: "5", exemplo: "Ensino Superior" },
{ value: "6", 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>
);
}
src/Components/SearchList.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/SearchSection.js
View file @ 4f57647c
This diff is collapsed.
src/Components/SignUpModal.js
View file @ 4f57647c
...@@ -47,7 +47,7 @@ export default function SignUpModal (props) { ...@@ -47,7 +47,7 @@ export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store) const { state, dispatch } = useContext(Store)
const handleLoginInfo = (newLogin) => { const handleLoginInfo = (newLogin) => {
console.log(state.currentUser) {/*console.log(state.currentUser)*/}
axios.post(`${apiUrl}/auth`, axios.post(`${apiUrl}/auth`,
{ {
name : newLogin.name, name : newLogin.name,
......
src/Components/TabPanels/Breadcrumbs.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/TabPanels/ContainerRedeVazia.js deleted 100644 → 0
View file @ f1162cd5
This diff is collapsed.
src/Components/TabPanels/PanelComponents/ButtonsArea.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/TabPanels/PanelComponents/NoContent.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/TabPanels/PanelComponents/PanelTitle.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.
src/Components/TabPanels/PanelComponents/TemplateColecao.js 0 → 100644
View file @ 4f57647c
This diff is collapsed.