added avatar support

scm-ui/ui-components/src/Annotate.stories.tsx

@@ -23,11 +23,13 @@
  */
 
 import { storiesOf } from "@storybook/react";
-import * as React from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
 import Annotate, { AnnotatedSource } from "./Annotate";
 import { MemoryRouter } from "react-router-dom";
 import repository from "./__resources__/repository";
+import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+import { Person } from "./avatar/Avatar";
 
 const Wrapper = styled.div`
   margin: 2rem;
@@ -109,9 +111,20 @@ const source: AnnotatedSource = {
   ]
 };
 
+const Robohash: FC = ({ children }) => {
+  const binder = new Binder("robohash");
+  binder.bind("avatar.factory", (person: Person) => `https://robohash.org/${person.mail}.png`);
+  return <BinderContext.Provider value={binder}>{children}</BinderContext.Provider>;
+};
+
 storiesOf("Annotate", module)
   .addDecorator(storyFn => <MemoryRouter initialEntries={["/"]}>{storyFn()}</MemoryRouter>)
   .addDecorator(storyFn => <Wrapper className="box">{storyFn()}</Wrapper>)
   .add("Default", () => (
     <Annotate source={source} repository={repository} baseDate={new Date("2020-04-16T09:22:42Z")} />
+  ))
+  .add("With Avatars", () => (
+    <Robohash>
+      <Annotate source={source} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />
+    </Robohash>
   ));

scm-ui/ui-components/src/Annotate.tsx

@@ -34,6 +34,7 @@ import { SingleContributor } from "./repos/changesets";
 import DateFromNow from "./DateFromNow";
 import { Link } from "react-router-dom";
 import { DateInput } from "./dates";
+import { AvatarImage } from "./avatar";
 
 // TODO move types to ui-types
 
@@ -198,11 +199,14 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
       ref={ref}
       onMouseEnter={onMouseEnter}
       onMouseLeave={OnMouseLeave}
-      className="box changeset-details is-family-primary"
+      className="box"
       style={{ top: `${top}px` }}
     >
       <PopoverHeading className="is-clearfix">
-        <SingleContributor className="is-pulled-left" person={annotation.author} />
+        <span className="is-pulled-left">
+          <AuthorImage person={annotation.author} />
+          <SingleContributor person={annotation.author} displayTextOnly={true} />
+        </span>
         <DateFromNow className="is-pulled-right" date={annotation.when} baseDate={baseDate} />
       </PopoverHeading>
       <SmallHr />
@@ -229,6 +233,12 @@ const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
   setTimeout(() => dispatch(action), 250);
 };
 
+const AuthorImage = styled(AvatarImage)`
+  width: 1em;
+  height: 1em;
+  margin-right: 0.2em;
+`;
+
 const AnnotateLine: FC<LineProps> = ({ annotation, showAnnotation, dispatch, nr, children }) => {
   const link = useRef<HTMLDivElement>(null);
 
@@ -264,7 +274,10 @@ const AnnotateLine: FC<LineProps> = ({ annotation, showAnnotation, dispatch, nr,
   return (
     <Line>
       <Metadata className="has-text-info" onMouseOver={onMouseEnter} onMouseOut={OnMouseLeave} ref={link}>
-        <Author className="trigger">{annotation.author.name}</Author>{" "}
+        <Author>
+          <AuthorImage person={annotation.author} />
+          {annotation.author.name}
+        </Author>{" "}
         <When>
           <DateShort value={annotation.when} />
         </When>{" "}