From 6bdd0b5ebd6a7bb2bb20b8b041c441050b8a45d3 Mon Sep 17 00:00:00 2001
From: James D'Alton <jda1g15@soton.ac.uk>
Date: Mon, 17 Feb 2020 14:03:26 +0000
Subject: [PATCH] basic layout achieved
---
src/compforge/src/FormsDisplay.js | 49 ++++++++++++++
src/compforge/src/Menu.js | 47 +++++++++++++
src/compforge/src/index.js | 106 ++++++++++++++----------------
3 files changed, 146 insertions(+), 56 deletions(-)
create mode 100644 src/compforge/src/FormsDisplay.js
create mode 100644 src/compforge/src/Menu.js
diff --git a/src/compforge/src/FormsDisplay.js b/src/compforge/src/FormsDisplay.js
new file mode 100644
index 00000000..aa04585a
--- /dev/null
+++ b/src/compforge/src/FormsDisplay.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Grid } from '@material-ui/core';
+
+const FormsDisplay = ({ formItems }) => {
+ return (
+ <div>
+ {formItems.map(
+ (formItem, i) =>
+ <Grid
+ container
+ direction="column"
+ justify="space-evenly"
+ alignItems="stretch"
+ spacing={3}
+ item
+ xs={9}
+ key={i}>
+ <FormItem
+ name={formItem.name}
+ owner={formItem.owner}
+ dateModified={formItem.dateModified} />
+ </Grid>
+ )}
+ </div>
+ )
+}
+
+const FormItem = ({ name, owner, dateModified }) => {
+ return (
+ <Grid
+ container
+ direction="row"
+ spacing={3}>
+ <Grid item xs={3}>
+ <h3>{name}</h3>
+ </Grid>
+ <Grid item xs={3}>
+ <h3>{owner}</h3>
+ </Grid>
+ <Grid item xs={3}>
+ <div outline="2px solid black">
+ <h3>{dateModified}</h3>
+ </div>
+ </Grid>
+ </Grid>
+ )
+}
+
+export default FormsDisplay
\ No newline at end of file
diff --git a/src/compforge/src/Menu.js b/src/compforge/src/Menu.js
new file mode 100644
index 00000000..11db4d1c
--- /dev/null
+++ b/src/compforge/src/Menu.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, Grid } from '@material-ui/core';
+
+
+class Menu extends React.Component {
+ state = { signedIn: false }
+
+ toggleSignedInOut = () => {
+ this.setState(prevState => ({
+ signedIn: !prevState.signedIn
+ }))
+ }
+
+ render() {
+ const { menuItems } = this.props
+ return (
+ <Grid
+ container
+ direction="column"
+ justify="space-evenly"
+ alignItems="stretch"
+ spacing={3}
+ >
+ {
+ menuItems.map(
+ (menuItem, i) =>
+ <Grid key={i} item xs={3}>
+ <MenuButton
+ key={i}
+ id={menuItem.id} />
+ </Grid>
+ )
+ }
+ </Grid >
+ )
+ }
+}
+
+const MenuButton = ({ id }) => {
+ return (
+ <section>
+ <Button variant="contained" color="primary">{id}</Button>
+ </section>
+ )
+}
+
+export default Menu
\ No newline at end of file
diff --git a/src/compforge/src/index.js b/src/compforge/src/index.js
index 2b109ff7..d8bacca7 100644
--- a/src/compforge/src/index.js
+++ b/src/compforge/src/index.js
@@ -1,75 +1,69 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { Grid, AppBar, Button } from '@material-ui/core';
+import { Grid, AppBar, Toolbar, Typography, Button, makeStyles } from '@material-ui/core';
+import Menu from './Menu'
+import FormsDisplay from './FormsDisplay'
let menuItems = [
- {"id": "createForm"},
- {"id": "shareForm"},
- {"id": "addPartner"},
- {"id": "viewAccount"},
- {"id": "signOut"}
+ { "id": "createForm" },
+ { "id": "shareForm" },
+ { "id": "addPartner" },
+ { "id": "viewAccount" },
+ { "id": "signOut" }
]
+let formItems = [
+ { "name": "myFirstForm", "owner": "me!", "dateModified": "Today 12:32" },
+ { "name": "mySecondForm", "owner": "me!", "dateModified": "Yesterday 16:04" },
+ { "name": "myThirdForm", "owner": "me!", "dateModified": "Friday 14:46" }
+]
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ title: {
+ flexGrow: 1,
+ },
+}));
+
const Page = () => {
+ const classes = useStyles();
return (
- <Grid container>
+ <Grid container spacing={3}>
<Grid item xs={12}>
- {/* <AppBar /> */}
- <h1>header</h1>
+ <AppBar position="static">
+ <Toolbar>
+ <Typography variant="h6" className={classes.title}>
+ Compforge
+ </Typography>
+ <Button color="inherit">Login</Button>
+ </Toolbar>
+ </AppBar>
</Grid>
- <Grid item xs={3}>
- <Menu menuItems={menuItems}/>
+ <Grid
+ item
+ xs={3}
+ >
+ <Menu menuItems={menuItems} />
</Grid>
- <Grid item xs={9}>
- <FormsDisplay />
+ <Grid
+ container
+ item
+ xs={9}
+ direction="column"
+ justify="space-evenly"
+ spacing={3}
+ >
+ <FormsDisplay formItems={formItems} />
</Grid>
</Grid>
)
}
-const FormsDisplay = () => {
- return (
- <Grid item xs={3}>
- <p>[Form name here]</p>
- </Grid>
- )
-}
-
-const MenuButton = ({id}) => {
- return (
- <section>
- <Button variant="contained" color="primary">{id}</Button>
- </section>
- )
-}
-
-class Menu extends React.Component {
- state = {signedIn: false}
-
- toggleSignedInOut = () => {
- this.setState(prevState => ({
- signedIn: !prevState.signedIn
- }))
- }
-
- render () {
- const { menuItems } = this.props
- return (
- <div id="menu">
- <AppBar />
- <h2>Signed {this.state.signedIn ? 'in' : 'out'}</h2>
- <Button variant="contained" color="primary" onClick={this.toggleSignedInOut}>Sign in/out</Button>
- {menuItems.map(
- (menuItem, i) =>
- <MenuButton
- key={i}
- id={menuItem.id}/>
- )}
- </div>
- )
- }
-}
-
ReactDOM.render(
<Page />,
document.getElementById('root')
--
GitLab