Skip to content
Snippets Groups Projects
Commit b9221dea authored by Raul Almeida's avatar Raul Almeida
Browse files

Store link in menubar and start achievement description on user profile

parent b130be90
No related branches found
No related tags found
1 merge request!21Gamification
...@@ -3,17 +3,26 @@ import styled from 'styled-components' ...@@ -3,17 +3,26 @@ import styled from 'styled-components'
import { Container } from 'react-grid-system' import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import { Grid } from '@material-ui/core' import { Grid } from '@material-ui/core'
import RequirementDialog from './RequirementsDialog.js';
export default function AchievementDescriptionCard(props) { export default function AchievementDescriptionCard(props) {
var teste = [
{name: "Casas", description: "Construa três casas"}
];
return ( return (
<Paper elevation={3}> <Paper elevation={3}>
<Grid container direction="row" justify="space-around" alignItems="center"> <Grid container direction="row" justify="space-around" alignItems="center">
<Grid item xs={5}> <Grid item xs={3}>
<AchievementImg src={props.src ? props.src : "https://material-ui.com/static/images/grid/complex.jpg"}/> <AchievementImg src={props.src ? props.src : "https://material-ui.com/static/images/grid/complex.jpg"}/>
</Grid> </Grid>
<Grid item xs={5}> <Grid item xs={7}>
<AchievementTitle>{props.title ? props.title : "Conquistador de conquistas"}</AchievementTitle> <AchievementTitle>{props.title ? props.title : "Conquistador de conquistas"}</AchievementTitle>
<AchievementDescription>{props.description ? props.description : "Conquiste conquistas"}</AchievementDescription> <AchievementDescription>{props.description ? props.description : "Conquiste conquistas"}</AchievementDescription>
<RequirementDialog
title="Conquistador de conquistas"
description="Conquiste conquistas"
requirements={teste}
/>
</Grid> </Grid>
</Grid> </Grid>
</Paper> </Paper>
...@@ -24,9 +33,10 @@ const AchievementImg = styled.img` ...@@ -24,9 +33,10 @@ const AchievementImg = styled.img`
border-radius: 100px; border-radius: 100px;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 30px;
` `
const AchievementTitle = styled.h1` const AchievementTitle = styled.h2`
` `
const AchievementDescription = styled.p` const AchievementDescription = styled.p`
......
...@@ -126,6 +126,9 @@ export default function MenuBar(props){ ...@@ -126,6 +126,9 @@ export default function MenuBar(props){
<Dropdown name="Ajuda" items={menuAjuda}/> <Dropdown name="Ajuda" items={menuAjuda}/>
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" > <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
<ButtonStyled >Educação Conectada</ButtonStyled> <ButtonStyled >Educação Conectada</ButtonStyled>
</a>
<a href="/store">
<ButtonStyled>Lojinha</ButtonStyled>
</a> </a>
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled> <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
</Left> </Left>
......
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import DetailsIcon from '@material-ui/icons/Details';
import styled from 'styled-components'
import { spacing } from '@material-ui/system'
const styles = theme => ({
root: {
margin: 0,
padding: theme.spacing(2),
},
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
});
const DialogTitle = withStyles(styles)(props => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h6" mr={8} pr={8}>{children}</Typography>
{onClose ? (
<IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
});
const DialogContent = withStyles(theme => ({
root: {
padding: theme.spacing(2),
},
}))(MuiDialogContent);
const DialogActions = withStyles(theme => ({
root: {
margin: 0,
padding: theme.spacing(1),
},
}))(MuiDialogActions);
export default function RequirementDialog(props) {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
<DetailsIcon /> Saiba mais
</Button>
<Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>
<DialogTitle pr={5} mr={5} w-75 id="customized-dialog-title" onClose={handleClose}>
{props.title}
</DialogTitle>
<DialogContent dividers>
<Typography gutterBottom>
{props.description}
<h2>Requisitos</h2>
{props.requirements.map(
(r) => {
return (<div>
<RequirementTitle>{r.name}</RequirementTitle>
<RequirementDescription>{r.description}</RequirementDescription>
</div>
);}
)}
</Typography>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="primary">
Save changes
</Button>
</DialogActions>
</Dialog>
</div>
);
}
const RequirementDescription = styled.p`
margin-left: 20px;
margin-right: 20px;
`
const RequirementTitle = styled.h3`
`
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment