aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
authorMichael Muré <batolettre@gmail.com>2020-01-24 00:46:44 +0100
committerGitHub <noreply@github.com>2020-01-24 00:46:44 +0100
commit9f7953161f3ef8a6081b7950b3cc274e34666116 (patch)
tree6f0c98fcfefc9b2d012cd10bff922ea47fb19652 /webui/src
parentff33e62f65d0a4764358352492f46daccf961f93 (diff)
parent70354165ff1956dd0598ff69736fb0436612003c (diff)
downloadgit-bug-9f7953161f3ef8a6081b7950b3cc274e34666116.tar.gz
Merge pull request #300 from ludovicm67/webui-display-current-identity
Webui: display current identity + improve app bar
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/App.js32
-rw-r--r--webui/src/CurrentIdentity.js45
2 files changed, 73 insertions, 4 deletions
diff --git a/webui/src/App.js b/webui/src/App.js
index 4a52eca1..b9c57327 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -1,5 +1,6 @@
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import Toolbar from '@material-ui/core/Toolbar';
import React from 'react';
@@ -8,12 +9,31 @@ import { Link } from 'react-router-dom';
import BugQuery from './bug/BugQuery';
import ListQuery from './list/ListQuery';
+import CurrentIdentity from './CurrentIdentity';
+
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ main: '#263238',
+ },
+ },
+});
const useStyles = makeStyles(theme => ({
+ offset: theme.mixins.toolbar,
+ filler: {
+ flexGrow: 1,
+ },
appTitle: {
...theme.typography.h6,
color: 'white',
textDecoration: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ },
+ logo: {
+ height: '42px',
+ marginRight: theme.spacing(2),
},
}));
@@ -21,19 +41,23 @@ export default function App() {
const classes = useStyles();
return (
- <>
+ <ThemeProvider theme={theme}>
<CssBaseline />
- <AppBar position="static" color="primary">
+ <AppBar position="fixed" color="primary">
<Toolbar>
<Link to="/" className={classes.appTitle}>
- git-bug webui
+ <img src="logo.svg" className={classes.logo} alt="git-bug" />
+ git-bug
</Link>
+ <div className={classes.filler}></div>
+ <CurrentIdentity />
</Toolbar>
</AppBar>
+ <div className={classes.offset} />
<Switch>
<Route path="/" exact component={ListQuery} />
<Route path="/bug/:id" exact component={BugQuery} />
</Switch>
- </>
+ </ThemeProvider>
);
}
diff --git a/webui/src/CurrentIdentity.js b/webui/src/CurrentIdentity.js
new file mode 100644
index 00000000..451979fb
--- /dev/null
+++ b/webui/src/CurrentIdentity.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+ displayName: {
+ marginLeft: theme.spacing(2),
+ },
+}));
+
+const QUERY = gql`
+ {
+ defaultRepository {
+ userIdentity {
+ displayName
+ avatarUrl
+ }
+ }
+ }
+`;
+
+const CurrentIdentity = () => {
+ const classes = useStyles();
+ return (
+ <Query query={QUERY}>
+ {({ loading, error, data }) => {
+ if (error || loading || !data.defaultRepository.userIdentity)
+ return null;
+ const user = data.defaultRepository.userIdentity;
+ return (
+ <>
+ <Avatar src={user.avatarUrl}>
+ {user.displayName.charAt(0).toUpperCase()}
+ </Avatar>
+ <div className={classes.displayName}>{user.displayName}</div>
+ </>
+ );
+ }}
+ </Query>
+ );
+};
+
+export default CurrentIdentity;