diff options
-rw-r--r-- | webui/src/components/CurrentIdentity/CurrentIdentity.tsx | 11 | ||||
-rw-r--r-- | webui/src/pages/identity/BugList.tsx | 52 | ||||
-rw-r--r-- | webui/src/pages/identity/GetBugsByUser.graphql | 2 | ||||
-rw-r--r-- | webui/src/pages/identity/Identity.tsx | 118 |
4 files changed, 107 insertions, 76 deletions
diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx index f3dff5ed..b68b84e5 100644 --- a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx +++ b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx @@ -26,6 +26,9 @@ const useStyles = makeStyles((theme) => ({ profileLink: { ...theme.typography.button, }, + popupButton: { + textTransform: 'none', + }, })); const CurrentIdentity = () => { @@ -57,15 +60,14 @@ const CurrentIdentity = () => { aria-controls={open ? 'menu-list-grow' : undefined} aria-haspopup="true" onClick={handleToggle} + className={classes.popupButton} > <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}> {user.displayName.charAt(0).toUpperCase()} </Avatar> + <div className={classes.displayName}>{user.displayName}</div> + <LockIcon color="secondary" className={user.isProtected ? '' : ''} /> </Button> - <LockIcon - color="secondary" - className={user.isProtected ? '' : classes.hidden} - /> <Popper open={open} anchorEl={anchorRef.current} @@ -99,7 +101,6 @@ const CurrentIdentity = () => { </Grow> )} </Popper> - <div className={classes.displayName}>{user.displayName}</div> </> ); }; diff --git a/webui/src/pages/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx index e1083cfb..623deda5 100644 --- a/webui/src/pages/identity/BugList.tsx +++ b/webui/src/pages/identity/BugList.tsx @@ -1,18 +1,37 @@ import React from 'react'; -import { Link } from '@material-ui/core'; +import { Card, Link, Typography } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; +import { makeStyles } from '@material-ui/core/styles'; + +import Date from '../../components/Date'; import { useGetBugsByUserQuery } from './GetBugsByUser.generated'; +const useStyles = makeStyles((theme) => ({ + main: { + ...theme.typography.body2, + }, + bugLink: { + ...theme.typography.button, + }, + cards: { + backgroundColor: theme.palette.background.default, + color: theme.palette.info.contrastText, + padding: theme.spacing(1), + margin: theme.spacing(1), + }, +})); + type Props = { humanId: string; }; function BugList({ humanId }: Props) { + const classes = useStyles(); const { loading, error, data } = useGetBugsByUserQuery({ variables: { - query: 'author:' + humanId, + query: 'author:' + humanId + ' sort:creation', }, }); @@ -22,10 +41,31 @@ function BugList({ humanId }: Props) { console.log(bugs); return ( - <ol> - <li>{bugs ? bugs[0].title : ''}</li> - <Link href={'/bug/' + (bugs ? bugs[0].id : '')}>Klick</Link> - </ol> + <div className={classes.main}> + {bugs?.map((bug, index) => { + return ( + <Card className={classes.cards}> + <Typography variant="overline" component="h2"> + <Link + className={classes.bugLink} + href={'/bug/' + bug.id} + color={'inherit'} + > + {bug.title} + </Link> + </Typography> + <Typography variant="subtitle2"> + Created + <Date date={bug.createdAt} /> + </Typography> + <Typography variant="subtitle2"> + Last edited + <Date date={bug.createdAt} /> + </Typography> + </Card> + ); + })} + </div> ); } diff --git a/webui/src/pages/identity/GetBugsByUser.graphql b/webui/src/pages/identity/GetBugsByUser.graphql index 0be85578..0f170dc1 100644 --- a/webui/src/pages/identity/GetBugsByUser.graphql +++ b/webui/src/pages/identity/GetBugsByUser.graphql @@ -4,6 +4,8 @@ query GetBugsByUser ($query: String){ nodes { id title + createdAt + lastEdit } } } diff --git a/webui/src/pages/identity/Identity.tsx b/webui/src/pages/identity/Identity.tsx index 43925f4f..8261c0f4 100644 --- a/webui/src/pages/identity/Identity.tsx +++ b/webui/src/pages/identity/Identity.tsx @@ -2,16 +2,15 @@ import React from 'react'; import { Checkbox, - Divider, - FormControl, FormControlLabel, - FormGroup, - FormLabel, + Link, Paper, - TextField, + Typography, } from '@material-ui/core'; import Avatar from '@material-ui/core/Avatar'; import { makeStyles } from '@material-ui/core/styles'; +import InfoIcon from '@material-ui/icons/Info'; +import MailOutlineIcon from '@material-ui/icons/MailOutline'; import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated'; @@ -19,26 +18,24 @@ import BugList from './BugList'; const useStyles = makeStyles((theme) => ({ main: { - maxWidth: 1200, + maxWidth: 1000, margin: 'auto', marginTop: theme.spacing(4), + padding: theme.spacing(3, 2), + display: 'flex', }, container: { display: 'flex', marginBottom: theme.spacing(1), - marginRight: theme.spacing(2), - marginLeft: theme.spacing(2), }, leftSidebar: { marginTop: theme.spacing(2), - marginRight: theme.spacing(2), + flex: '0 0 200px', }, content: { marginTop: theme.spacing(5), - marginRight: theme.spacing(4), padding: theme.spacing(3, 2), minWidth: 800, - display: 'flex', backgroundColor: theme.palette.background.paper, }, rightSidebar: { @@ -53,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ paddingBottom: theme.spacing(3), }, header: { - ...theme.typography.h5, + ...theme.typography.h4, }, })); @@ -70,67 +67,58 @@ const Identity = () => { <h1 className={classes.header}> {user?.displayName ? user?.displayName : 'none'} </h1> - <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}> - {user?.displayName.charAt(0).toUpperCase()} - </Avatar> - </div> - <Paper className={classes.content}> - <Divider variant="fullWidth" /> - <FormControl component="fieldset"> - <FormGroup> - <FormLabel className={classes.control} component="legend"> - Your account - </FormLabel> - <TextField - className={classes.control} - label="Name" - variant="outlined" - value={user?.name ? user?.name : '---'} - /> - <TextField - className={classes.control} - label="Id (truncated)" - variant="outlined" - value={user?.humanId ? user?.humanId : '---'} - /> - <TextField - className={classes.control} - label="Id (full)" - variant="outlined" - value={user?.id ? user?.id : '---'} - /> - <TextField - className={classes.control} - label="E-Mail" - variant="outlined" - value={user?.email ? user?.email : '---'} - /> - <TextField - className={classes.control} - label="Login" - variant="outlined" - value={user?.login ? user?.login : '---'} - /> - <FormControlLabel - className={classes.control} - label="Protected" - labelPlacement="end" - value={user?.isProtected} - control={<Checkbox color="secondary" indeterminate />} - /> - </FormGroup> - </FormControl> - </Paper> - <div className={classes.rightSidebar}> <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined} className={classes.large} > {user?.displayName.charAt(0).toUpperCase()} </Avatar> + <Typography variant="h5" component="h2"> + Your account + </Typography> + <Typography variant="subtitle2" component="h2"> + Name: {user?.name ? user?.name : '---'} + </Typography> + <Typography variant="subtitle2" component="h3"> + Id (truncated): {user?.humanId ? user?.humanId : '---'} + <InfoIcon + fontSize={'small'} + titleAccess={user?.id ? user?.id : '---'} + /> + </Typography> + <Typography variant="subtitle2" component="h3"> + Login: {user?.login ? user?.login : '---'} + </Typography> + <Typography + variant="subtitle2" + component="h3" + style={{ + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + }} + > + <MailOutlineIcon /> + <Link href={'mailto:' + user?.email} color={'inherit'}> + {user?.email ? user?.email : '---'} + </Link> + </Typography> + <FormControlLabel + className={classes.control} + label="Protected" + labelPlacement="end" + value={user?.isProtected} + control={<Checkbox color="secondary" indeterminate />} + /> </div> + <Paper className={classes.content}> + <Typography variant="h5" component="h2"> + Bugs authored by {user?.displayName} + </Typography> + <BugList humanId={user?.humanId ? user?.humanId : ''} /> + </Paper> + <div className={classes.rightSidebar}></div> </div> - <BugList humanId={user?.humanId ? user?.humanId : ''} /> </main> ); }; |