@@ -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>
</>
);
};
@@ -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>
);
}
@@ -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>
);
};