diff --git a/src/App.js b/src/App.js
index 6990081cace26209be98ce4726f140e61cff54ed..50962d9c065ba585f2f181121ba1de8073cfa068 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,14 @@
import React from "react";
import { HashRouter, Route } from "react-router-dom";
-
+import "./global.css";
import CreateForm from "./pages/CreateForm";
import AnswerForm from "./pages/AnswerForm";
+import Header from "./components/header/header";
function App() {
return (
<HashRouter>
+ <Header />
<Route path="/create" component={CreateForm} />
<Route path="/answer/:id" component={AnswerForm} />
</HashRouter>
diff --git a/src/components/FormFieldSelect.js b/src/components/FormFieldSelect.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec682434faa1777283293b16dbb1b2df99da09b0
--- /dev/null
+++ b/src/components/FormFieldSelect.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(3),
+ width: theme.spacing(100),
+ height: theme.spacing(16),
+ margin: theme.spacing(2)
+ },
+ questionsGrid: {
+ marginBottom: '20px'
+ },
+}));
+
+function FormFieldSelect(props) {
+ const classes = useStyles();
+
+ return (
+ <Paper className={classes.paper}>
+ <Grid container>
+ <Grid item xs={12} className={classes.questionsGrid}>
+ <TextField value={props.question} label="sua pergunta" onChange={e => props.setTextField(e.target.value, props.idq)}/>
+ </Grid>
+ <Grid item xs={11} className={classes.questionsGrid}>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ // value={age}
+ // onChange={handleChange}
+ >
+ <MenuItem value={10}>Ten</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+ </Select>
+ </Grid>
+ <Grid item xs={1}>
+ <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
+ <DeleteOutlinedIcon />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+
+}
+
+export default FormFieldSelect;
+
+{/* <InputLabel id="demo-simple-select-label">Age</InputLabel>
+<Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={age}
+ onChange={handleChange}
+>
+ <MenuItem value={10}>Ten</MenuItem>
+ <MenuItem value={20}>Twenty</MenuItem>
+ <MenuItem value={30}>Thirty</MenuItem>
+</Select> */}
\ No newline at end of file
diff --git a/src/components/fieldsAnswerForm/FormFieldRadio.js b/src/components/fieldsAnswerForm/FormFieldRadio.js
index 68a79e4755a18af240c46f9ff0592027b9d27fcd..3f18ffbc7cdb5c6f7178e39dd9f5790b788a52d5 100644
--- a/src/components/fieldsAnswerForm/FormFieldRadio.js
+++ b/src/components/fieldsAnswerForm/FormFieldRadio.js
@@ -1,21 +1,22 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import TextField from "@material-ui/core/TextField";
-import DeleteOutlinedIcon from "@material-ui/icons/DeleteOutlined";
-import IconButton from "@material-ui/core/IconButton";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
-import AddCircleIcon from "@material-ui/icons/AddCircle";
-import CloseIcon from "@material-ui/icons/Close";
-import Switch from "@material-ui/core/Switch";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+
+import FieldFooterOptions from './FieldFooterOptions';
-import FieldFooterOptions from "./FieldFooterOptions";
const useStyles = makeStyles(theme => ({
paper: {
@@ -25,10 +26,12 @@ const useStyles = makeStyles(theme => ({
margin: theme.spacing(2)
},
questionsGrid: {
- marginBottom: "20px"
- }
+ marginBottom: '20px'
+ },
}));
+
+
function FormFieldRadio(props) {
const classes = useStyles();
@@ -39,16 +42,13 @@ function FormFieldRadio(props) {
};
const options = props.options.map(function(x) {
- return (
- <span>
- {x.value}
- <Radio
- checked={selectedValue === x.value}
- onChange={handleChange}
- value={x.value}
- />
- </span>
- );
+ return <span>
+ {x.value}
+ <Radio checked={selectedValue === x.value}
+ onChange={handleChange}
+ value={x.value}
+ />
+ </span>;
});
return (
@@ -59,20 +59,19 @@ function FormFieldRadio(props) {
{props.question}
</Typography>
</Grid>
- <Grid
- item
- container
+ <Grid item container
direction="column"
justify="flex-start"
- alignItems="flex-start"
- xs={5}
- className={classes.questionsGrid}
+ alignItems="flex-start" xs={5} className={classes.questionsGrid}
>
- <RadioGroup>{options}</RadioGroup>
+ <RadioGroup>
+ {options}
+ </RadioGroup>
</Grid>
</Grid>
</Paper>
);
+
}
-export default FormFieldRadio;
+export default FormFieldRadio;
\ No newline at end of file
diff --git a/src/components/fieldsAnswerForm/FormFieldText.js b/src/components/fieldsAnswerForm/FormFieldText.js
index 91e2f594edaa680195880ac1df7abf57daa69513..a675f3a77cefbaa0b6ed00c67ff8c85ac093cda3 100644
--- a/src/components/fieldsAnswerForm/FormFieldText.js
+++ b/src/components/fieldsAnswerForm/FormFieldText.js
@@ -1,13 +1,13 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import TextField from "@material-ui/core/TextField";
-import DeleteOutlinedIcon from "@material-ui/icons/DeleteOutlined";
-import IconButton from "@material-ui/core/IconButton";
-import Typography from "@material-ui/core/Typography";
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
-import FieldFooterOptions from "./FieldFooterOptions";
+import FieldFooterOptions from './FieldFooterOptions';
const useStyles = makeStyles(theme => ({
paper: {
@@ -17,8 +17,8 @@ const useStyles = makeStyles(theme => ({
margin: theme.spacing(2)
},
questionsGrid: {
- marginBottom: "20px"
- }
+ marginBottom: '20px'
+ },
}));
function FormFieldText(props) {
@@ -39,17 +39,17 @@ function FormFieldText(props) {
placeholder="Resposta curta"
/>
</Grid>
- <Grid
- item
- container
+ <Grid item container
direction="row"
justify="flex-end"
alignItems="flex-end"
xs={3}
- ></Grid>
+ >
+ </Grid>
</Grid>
</Paper>
);
+
}
-export default FormFieldText;
+export default FormFieldText;
\ No newline at end of file
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ffafe76150062e710a1f15742e1a18227e22cee
--- /dev/null
+++ b/src/components/header/header.jsx
@@ -0,0 +1,161 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import logo from "./header_imgs/imgsimmc-01.png";
+import { makeStyles } from "@material-ui/core";
+import MenuListComposition from "./header_components/MenuList";
+import { Avatar } from "@material-ui/core";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import Button from "@material-ui/core/Button";
+import Popper from "@material-ui/core/Popper";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+
+const useStyles = makeStyles(theme => ({
+ barraBrasil: {
+ background: "#7F7F7F",
+ height: "20px",
+ padding: "0 0 0 10px",
+ display: "block"
+ },
+ menuBarraTemp: {
+ listStyle: "none"
+ },
+ menuBarraTempInterno: {
+ display: "inline",
+ float: "left",
+ paddingRight: "10px",
+ marginRight: "10px",
+ borderRight: "1px solid #EDEDED"
+ },
+ header: {
+ background: "#05a5dd",
+ width: "auto",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ height: "13%"
+ },
+ simmc: {
+ marginTop: "5%",
+ fontSize: "15px",
+ color: "#ffffff",
+ marginLeft: "2%",
+ ["@media (max-width:1040px)"]: {
+ display: "none"
+ },
+ ["@media (max-height:681px)"]: {
+ display: "none"
+ }
+ },
+ form_creator: {
+ color: "#ffffff",
+ marginTop: "10%",
+ ["@media (max-width:599px)"]: {
+ fontSize: "21px",
+ ["@media (max-width:525px)"]: {
+ marginTop: "5%",
+ marginLeft: "10%"
+ },
+ ["@media (max-width:337px)"]: {
+ fontSize: "19px"
+ }
+ },
+ ["@media (max-height:681px)"]: {
+ marginTop: "5%"
+ }
+ },
+ link: {
+ textDecoration: "none"
+ },
+ logo: {
+ marginLeft: "2.5%",
+ marginTop: "4%",
+ width: "85px",
+ ["@media (max-width:525px)"]: {
+ width: "65px",
+ ["@media (max-width:338px)"]: {
+ marginTop: "3%"
+ }
+ },
+ ["@media (max-height:681px)"]: {
+ width: "65px"
+ }
+ },
+ userImgContainer: {
+ display: "flex",
+ flexDirection: "column"
+ }
+}));
+
+export default function Header() {
+ const classes = useStyles();
+
+ return (
+ <Grid>
+ <header className={classes.header} alignItems="center ">
+ <Grid container item>
+ <Grid container item xs={3} sm={3} md={4}>
+ <a
+ href="https://simmc.c3sl.ufpr.br/"
+ title="Ir para a página inicial do SIMMC"
+ >
+ <img
+ src={logo}
+ alt="logo"
+ href="localhost3000/#/signup"
+ className={classes.logo}
+ maxWidth="100px"
+ />
+ </a>
+ <Grid
+ container
+ item
+ xs={5}
+ sm={6}
+ md={7}
+ alignContent="flexstart"
+ alignItems="start"
+ >
+ <a
+ href="https://simmc.c3sl.ufpr.br/"
+ title="Ir para a página inicial do SIMMC"
+ className={classes.link}
+ >
+ <h2 className={classes.simmc}>
+ Sistema Integrado de Monitoramento do Ministério da Ciência,
+ Tecnologia, Inovações e Comunicações
+ </h2>
+ </a>
+ </Grid>
+ </Grid>
+ <Grid container item xs={6} sm={6} md={4} justify="center">
+ <a
+ href="https://google.com.br"
+ title="Ir para a página inicial do Gerenciador de Formulários"
+ className={classes.link}
+ >
+ <h2 className={classes.form_creator}>
+ Gerenciador de Formulários
+ </h2>
+ </a>
+ </Grid>
+ <Grid
+ container
+ item
+ xs={3}
+ sm={3}
+ md={4}
+ className={classes.userImgContainer}
+ justify="center"
+ alignContent="flex-end"
+ >
+ <MenuListComposition />
+ </Grid>
+ </Grid>
+ </header>
+ </Grid>
+ );
+}
diff --git a/src/components/header/header_components/MenuList.jsx b/src/components/header/header_components/MenuList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7c8613e2661ae595bf94614f5f9cdfed1ad61732
--- /dev/null
+++ b/src/components/header/header_components/MenuList.jsx
@@ -0,0 +1,130 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import { makeStyles } from "@material-ui/core/styles";
+import UserImg from "./../header_imgs/user.png";
+
+import { Avatar } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+ menuPopUp: {
+ alignContent: "start",
+ ["@media (max-width:346px)"]: {
+ width: "23%"
+ }
+ },
+ menuPopUpText: {
+ ["@media (max-width:525px)"]: {
+ fontSize: "13px"
+ }
+ },
+ popUpPaper: {
+ marginRight: "14%",
+ ["@media (max-width:525px)"]: {
+ marginRight: "0"
+ }
+ },
+ menuList: {
+ alignItems: "flex-start"
+ }
+}));
+
+/**
+ * Para fazer com que o componente não apareça em telas em que o usuário não está logado, basta fazer uma função de verificação para tal e retornar o componente,
+ * caso logado, ou NULL, caso não-logado.
+ */
+
+function MenuListComposition(props) {
+ const [open, setOpen] = React.useState(false);
+
+ const prevOpen = React.useRef(open);
+
+ const anchorRef = React.useRef(null);
+ const handleToggle = () => {
+ setOpen(prevOpen => !prevOpen);
+ };
+ const handleClose = event => {
+ if (anchorRef.current && anchorRef.current.contains(event.target)) {
+ return;
+ }
+ setOpen(false);
+ };
+ function handleListKeyDown(event) {
+ if (event.key === "Tab") {
+ event.preventDefault();
+ setOpen(false);
+ }
+ }
+ React.useEffect(() => {
+ if (prevOpen.current === true && open === false) {
+ anchorRef.current.focus();
+ }
+
+ prevOpen.current = open;
+ }, [open]);
+
+ const classes = useStyles();
+
+ return (
+ <div>
+ <Button
+ ref={anchorRef}
+ aria-controls={open ? "menu-list-grow" : undefined}
+ aria-haspopup="true"
+ onClick={handleToggle}
+ >
+ <Avatar alt="user_avatar" src={UserImg} className={classes.userImg} />{" "}
+ </Button>
+ <Popper
+ open={open}
+ anchorEl={anchorRef.current}
+ role={undefined}
+ transition
+ disablePortal
+ className={classes.menuPopUp}
+ >
+ {({ TransitionProps, placement }) => (
+ <Grow
+ {...TransitionProps}
+ style={{
+ transformOrigin:
+ placement === "bottom" ? "center top" : "center bottom"
+ }}
+ >
+ <Paper className={classes.popUpPaper}>
+ <ClickAwayListener onClickAway={handleClose}>
+ <MenuList
+ className={classes.menuList}
+ autoFocusItem={open}
+ id="menu-list-grow"
+ onKeyDown={handleListKeyDown}
+ alignContent="flex-start"
+ >
+ <MenuItem
+ onClick={handleClose}
+ className={classes.menuPopUpText}
+ >
+ Perfil
+ </MenuItem>
+ <MenuItem
+ onClick={handleClose}
+ className={classes.menuPopUpText}
+ >
+ Logout
+ </MenuItem>
+ </MenuList>
+ </ClickAwayListener>
+ </Paper>
+ </Grow>
+ )}
+ </Popper>
+ </div>
+ );
+}
+
+export default MenuListComposition;
diff --git a/src/components/header/header_imgs/imgsimmc-01.png b/src/components/header/header_imgs/imgsimmc-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..c549ed8b629749b0ca98d74230f7b1edf7928a15
Binary files /dev/null and b/src/components/header/header_imgs/imgsimmc-01.png differ
diff --git a/src/components/header/header_imgs/user.png b/src/components/header/header_imgs/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..35fcbb89031acbae1c31fec417d35580fab07218
Binary files /dev/null and b/src/components/header/header_imgs/user.png differ
diff --git a/src/global.css b/src/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..aa7913b6d1193d2fef634b42b4fe8d98cf3ca099
--- /dev/null
+++ b/src/global.css
@@ -0,0 +1,25 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
+
+* {
+ margin: 0;
+ padding: 0;
+ outline: 0;
+ box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+ height: 100%;
+}
+
+body {
+ background: #eceff3;
+ -webkit-font-smoothing: antialiased;
+}
+
+body,
+input,
+button {
+ font-family: Roboto, sans-serif;
+}
diff --git a/src/index.js b/src/index.js
index 87d1be551891a8eccfe648e1b5a49b5751e5cad5..48da9f652bd46c9448f2caeb9c010dbad946259f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.