Merge pull request #300 from ludovicm67/webui-display-current-identity

Webui: display current identity + improve app bar

3 files changed, 168 insertions, 4 deletions

diff --git a/webui/public/logo.svg b/webui/public/logo.svg
new file mode 100644
index 00000000..05f175b0
--- /dev/null
+++ b/webui/public/logo.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 1024 1024"
+   version="1.1"
+   id="svg26"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata30">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     id="namedview28"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="-437.15126"
+     inkscape:cy="388.1471"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g24" />
+  <defs
+     id="defs10">
+    <path
+       id="b"
+       d="M512.169916 1006.61442c-59.127025 0-118.268018-11.781213-172.799806-34.617561-54.406082-22.780496-104.066777-56.504427-145.315673-98.654977-20.922999-21.380714-39.670593-44.876809-55.890107-70.010056-17.752424-27.503453-33.154852-57.048981-43.3125626-88.22468-22.4244822-68.819718-19.4215151-144.704671 8.7854246-211.391554 26.454045-62.532915 73.778712-115.431419 133.345707-148.122094 7.140776-3.916598 14.438685-7.546956 21.869283-10.877111 1.581795-22.420951 7.259498-44.632458 15.35005-65.555887 8.062618-20.853613 18.635855-41.190599 32.313323-58.926992l-45.425115-45.365511c-25.284285 1.612716-50.236847-9.407515-66.183999-29.060318-15.870332-19.558553-21.457247-46.1579063-14.75644-70.4463972 6.473838-23.4786418 24.027228-43.0790839 46.615826-52.1759231 23.259028-9.3656253 50.268273-6.8837172 71.435699 6.5416257 24.04818 15.2579756 38.322749 42.9953065 36.534936 71.4447456l49.377858 49.310035c38.850014-22.675774 83.39519-34.258012 128.055596-34.331317 44.660406.073305 89.205582 11.655543 128.059088 34.331317l49.374366-49.310035c-1.787813-28.4494391 12.486757-56.18677 36.534936-71.4447456 21.167427-13.4253429 48.176671-15.907251 71.435699-6.5416257 22.588598 9.0968392 40.138497 28.6972813 46.615827 52.1759231 6.700807 24.2919816 1.113891 50.8878442-14.756441 70.4463972-15.947152 19.652803-40.899714 30.673034-66.18749 29.060318l-45.421623 45.365511c13.677467 17.736393 24.250705 38.073379 32.313322 58.926992 8.090552 20.923429 13.768255 43.134936 15.350051 65.555887 7.430598 3.330155 14.731998 6.960513 21.869282 10.877111 59.566996 32.690675 106.891662 85.59267 133.345707 148.125585 28.20694 66.683392 31.213399 142.568345 8.785425 211.388063-10.157711 31.175699-25.560139 60.721227-43.312563 88.22468-16.219514 25.133247-34.967108 48.629342-55.890106 70.010056-41.252388 42.15055-90.913084 75.874481-145.315674 98.654977-54.535279 22.836348-113.67278 34.617561-172.799806 34.617561" />
+    <filter
+       id="a"
+       width="106%"
+       height="105.3%"
+       x="-3%"
+       y="-2.2%"
+       filterUnits="objectBoundingBox">
+      <feOffset
+         dy="4"
+         in="SourceAlpha"
+         result="shadowOffsetOuter1"
+         id="feOffset3" />
+      <feGaussianBlur
+         in="shadowOffsetOuter1"
+         result="shadowBlurOuter1"
+         stdDeviation="8"
+         id="feGaussianBlur5" />
+      <feColorMatrix
+         in="shadowBlurOuter1"
+         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"
+         id="feColorMatrix7" />
+    </filter>
+  </defs>
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     id="g24">
+    <path
+       style="fill:#ffffff"
+       d="m 478.29688,345.97656 c -60.08277,2.67755 -120.57654,9.49701 -178.44579,26.18037 -84.95334,27.86513 -152.59681,101.962 -172.35109,188.96026 -14.8447,62.91306 -5.39931,131.00345 25.84565,187.65597 55.40692,106.84889 161.27694,186.81503 279.47857,209.36551 18.48718,3.66711 37.19436,6.0461 55.88672,7.09961 0,-186.17773 0,-372.35547 0,-558.5332 -24.57813,24.55664 -49.15625,49.11328 -73.73438,73.66992 7.27419,22.12844 -3.69202,48.58916 -24.48047,59.09375 0,67.45443 0,134.90885 0,202.36328 25.0184,12.40274 34.72058,47.56965 19.18946,70.91211 -13.197,21.58771 -43.80569,30.38195 -66.05078,17.89648 -22.3835,-11.59893 -33.6195,-41.36405 -22.57813,-64.44726 4.52435,-10.3033 12.53997,-19.0817 22.52148,-24.31641 0,-63.38867 0,-126.77734 0,-190.16601 -16.4746,16.46028 -32.94921,32.92057 -49.42382,49.38086 8.86272,26.23639 -8.77565,57.66904 -35.92383,63.52734 -24.52168,6.25047 -52.57816,-8.7713 -59.82422,-33.28711 -7.90591,-23.87041 4.7561,-52.91034 28.64844,-61.82226 10.67379,-4.37427 22.88315,-5.04651 33.90625,-1.56836 19.37224,-19.35988 38.76134,-38.71577 58.12304,-58.07813 -9.00673,-26.60045 9.35678,-58.65764 37.16211,-63.68945 8.41047,-1.83551 17.30232,-1.50507 25.52539,1.0625 33.84961,-33.81901 67.69922,-67.63802 101.54883,-101.45703 -1.67448,0.0658 -3.34896,0.13151 -5.02343,0.19726 z"
+       id="path18"
+       inkscape:connector-curvature="0" />
+    <path
+       fill="#161616"
+       d="M512.169916 150.665029c49.758467 0 95.630535 16.518128 132.511162 44.321783l82.55366-82.440542c-6.274804-15.7815846-2.786474-34.1393273 8.844786-46.4999979 10.552287-11.2122209 26.565784-16.165565 41.619029-12.8772985 14.718031 3.2184519 27.058131 14.1025443 32.114289 28.2853753 5.188848 14.5388854 2.234766 31.1547541-7.633123 43.0162511-12.102656 14.549357-32.662505 19.788941-50.271765 12.769086l-81.048685 80.939528c29.792227 30.913894 50.669832 70.474323 58.411202 114.579682-55.240628-13.338075-111.706885-21.541288-168.455979-24.511898-57.475394-3.009008-115.233625-.684183-172.272541 6.988439-31.433384 4.227273-62.643291 10.081225-93.469098 17.523459 7.737878-44.105359 28.615484-83.665788 58.404219-114.579682l-81.048686-80.939528c-15.79002 6.297274-34.181447 2.810036-46.552973-8.824563-11.219225-10.548982-16.174121-26.560955-12.884824-41.6059961 3.21946-14.7134218 14.106961-27.0496574 28.294235-32.1077234 14.54344-5.1837322 31.164513-2.2305757 43.029725 7.6342239 14.539948 12.0918845 19.784665 32.6173697 12.790545 50.2106426l82.553661 82.440542c36.884118-27.803655 82.752695-44.321783 132.511161-44.321783"
+       id="path20"
+       style="fill:#ffffff" />
+    <path
+       style="fill:#ffffff"
+       d="m 642.89453,447.29102 c 26.60503,-9.03201 58.69528,9.31514 63.74219,37.13281 1.83605,8.4009 1.50863,17.28327 -1.05469,25.49805 19.37761,19.36067 38.75521,38.72135 58.13281,58.08203 26.61349,-9.02692 58.52901,9.29461 63.83008,36.99218 5.67931,24.59117 -9.85445,52.25693 -34.45312,58.99805 -23.70337,7.34049 -52.11439,-5.33722 -60.9375,-28.90625 -4.37362,-10.66408 -5.0519,-22.86401 -1.57618,-33.87891 -16.48437,-16.47005 -32.96875,-32.9401 -49.45312,-49.41015 0.001,63.37408 -0.003,126.75031 0.002,190.12305 25.06295,12.40159 34.73257,47.68548 19.13282,71.01367 -13.58819,22.22199 -45.63459,30.63297 -67.95704,16.69531 -21.48899,-12.41231 -31.51563,-41.90944 -20.14453,-64.38281 4.59602,-9.85263 12.40615,-18.22005 22.04883,-23.2793 0,-67.4694 0,-134.9388 0,-202.4082 -20.78883,-10.50513 -31.75059,-36.96771 -24.47851,-59.09571 -24.57813,-24.55664 -49.15625,-49.11328 -73.73438,-73.66992 0,186.18294 0,372.36589 0,558.54883 118.43468,-6.04668 232.57379,-67.96404 302.39592,-163.99647 35.18378,-47.53056 61.9605,-103.67004 65.23103,-163.29064 4.78209,-72.97399 -22.31956,-147.60688 -73.98632,-199.88281 -39.82014,-41.02593 -93.37908,-68.34817 -149.78422,-76.93294 -45.70936,-8.81643 -91.99389,-13.87916 -138.47555,-15.38347 33.83984,33.8112 67.67969,67.6224 101.51953,101.4336 z"
+       id="path22"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
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;