mirror of
https://github.com/MichaelMure/git-bug.git
synced 2024-12-14 17:51:44 +03:00
Make BackButton a component and Add it to NewBugPage #10
This commit is contained in:
parent
07f3163296
commit
cd02d80ca2
36
webui/src/pages/bug/BackButton.tsx
Normal file
36
webui/src/pages/bug/BackButton.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
backButton: {
|
||||
position: 'sticky',
|
||||
top: '80px',
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
color: theme.palette.primary.contrastText,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
function BackButton() {
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.backButton}
|
||||
aria-label="back to issue list"
|
||||
href="/"
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
Back to List
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default BackButton;
|
@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
|
||||
|
||||
import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
|
||||
import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
|
||||
import Label from 'src/components/Label';
|
||||
|
||||
import BackButton from './BackButton';
|
||||
import { BugFragment } from './Bug.generated';
|
||||
import CommentForm from './CommentForm';
|
||||
import TimelineQuery from './TimelineQuery';
|
||||
@ -73,16 +72,6 @@ const useStyles = makeStyles((theme) => ({
|
||||
commentForm: {
|
||||
marginLeft: 48,
|
||||
},
|
||||
backButton: {
|
||||
position: 'sticky',
|
||||
top: '80px',
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
color: theme.palette.primary.contrastText,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
@ -99,15 +88,7 @@ function Bug({ bug }: Props) {
|
||||
</div>
|
||||
<div className={classes.container}>
|
||||
<div className={classes.leftSidebar}>
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.backButton}
|
||||
aria-label="back to issue list"
|
||||
href="/"
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
Back to List
|
||||
</Button>
|
||||
<BackButton />
|
||||
</div>
|
||||
<div className={classes.timeline}>
|
||||
<TimelineQuery id={bug.id} />
|
||||
|
@ -1,12 +1,12 @@
|
||||
import React, { FormEvent, useState } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { Button } from '@material-ui/core';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import { Button, Paper } from '@material-ui/core';
|
||||
import { makeStyles, Theme } from '@material-ui/core/styles';
|
||||
|
||||
import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
|
||||
import CommentInput from '../../components/CommentInput/CommentInput';
|
||||
import BackButton from '../bug/BackButton';
|
||||
|
||||
import { useNewBugMutation } from './NewBug.generated';
|
||||
|
||||
@ -15,12 +15,17 @@ import { useNewBugMutation } from './NewBug.generated';
|
||||
*/
|
||||
const useStyles = makeStyles((theme: Theme) => ({
|
||||
main: {
|
||||
maxWidth: 800,
|
||||
maxWidth: 1200,
|
||||
margin: 'auto',
|
||||
marginTop: theme.spacing(4),
|
||||
marginBottom: theme.spacing(4),
|
||||
padding: theme.spacing(2),
|
||||
overflow: 'hidden',
|
||||
},
|
||||
container: {
|
||||
display: 'flex',
|
||||
marginBottom: theme.spacing(1),
|
||||
marginRight: theme.spacing(2),
|
||||
marginLeft: theme.spacing(2),
|
||||
},
|
||||
form: {
|
||||
display: 'flex',
|
||||
@ -34,6 +39,21 @@ const useStyles = makeStyles((theme: Theme) => ({
|
||||
backgroundColor: theme.palette.success.main,
|
||||
color: theme.palette.success.contrastText,
|
||||
},
|
||||
leftSidebar: {
|
||||
marginTop: theme.spacing(2),
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
rightSidebar: {
|
||||
marginTop: theme.spacing(2),
|
||||
flex: '0 0 200px',
|
||||
},
|
||||
timeline: {
|
||||
flex: 1,
|
||||
marginTop: theme.spacing(2),
|
||||
marginRight: theme.spacing(2),
|
||||
minWidth: 400,
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
@ -73,34 +93,42 @@ function NewBugPage() {
|
||||
if (error) return <div>Error</div>;
|
||||
|
||||
return (
|
||||
<Paper className={classes.main}>
|
||||
<form className={classes.form} onSubmit={submitNewIssue}>
|
||||
<BugTitleInput
|
||||
inputRef={(node) => {
|
||||
issueTitleInput = node;
|
||||
}}
|
||||
label="Title"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="dense"
|
||||
onChange={(event: any) => setIssueTitle(event.target.value)}
|
||||
/>
|
||||
<CommentInput
|
||||
loading={false}
|
||||
onChange={(comment: string) => setIssueComment(comment)}
|
||||
/>
|
||||
<div className={classes.actions}>
|
||||
<Button
|
||||
className={classes.greenButton}
|
||||
variant="contained"
|
||||
type="submit"
|
||||
disabled={isFormValid() ? false : true}
|
||||
>
|
||||
Submit new issue
|
||||
</Button>
|
||||
<main className={classes.main}>
|
||||
<div className={classes.container}>
|
||||
<div className={classes.leftSidebar}>
|
||||
<BackButton />
|
||||
</div>
|
||||
</form>
|
||||
</Paper>
|
||||
<Paper className={classes.timeline}>
|
||||
<form className={classes.form} onSubmit={submitNewIssue}>
|
||||
<BugTitleInput
|
||||
inputRef={(node) => {
|
||||
issueTitleInput = node;
|
||||
}}
|
||||
label="Title"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
margin="dense"
|
||||
onChange={(event: any) => setIssueTitle(event.target.value)}
|
||||
/>
|
||||
<CommentInput
|
||||
loading={false}
|
||||
onChange={(comment: string) => setIssueComment(comment)}
|
||||
/>
|
||||
<div className={classes.actions}>
|
||||
<Button
|
||||
className={classes.greenButton}
|
||||
variant="contained"
|
||||
type="submit"
|
||||
disabled={isFormValid() ? false : true}
|
||||
>
|
||||
Submit new issue
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Paper>
|
||||
<div className={classes.rightSidebar}></div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user