chat: display avatars if set

pkg/interface/chat/src/js/components/lib/chat-input.js

@@ -31,7 +31,6 @@ const MARKDOWN_CONFIG = {
   }
 };
 
-
 export class ChatInput extends Component {
   constructor(props) {
     super(props);
@@ -117,7 +116,6 @@ export class ChatInput extends Component {
       return;
     }
     this.setState({ patpSearch: match[1].toLowerCase() });
-
   }
 
   clearSearch() {
@@ -276,6 +274,15 @@ export class ChatInput extends Component {
     const sigilClass = props.ownerContact
       ? '' : 'mix-blend-diff';
 
+    const img = (props.ownerContact && (props.ownerContact.avatar !== null))
+      ? <img src={props.ownerContact.avatar} height={24} width={24} className="dib" />
+      : <Sigil
+        ship={window.ship}
+        size={24}
+        color={`#${color}`}
+        classes={sigilClass}
+        />;
+
     const candidates = _.chain(this.props.envelopes)
       .defaultTo([])
       .map('author')
@@ -324,12 +331,7 @@ export class ChatInput extends Component {
             height: 24
           }}
         >
-          <Sigil
-            ship={window.ship}
-            size={24}
-            color={`#${color}`}
-            classes={sigilClass}
-          />
+        {img}
         </div>
         <div
           className="fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center"

pkg/interface/chat/src/js/components/lib/member-element.js

@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
-import classnames from 'classnames';
 import { Sigil } from '/components/lib/icons/sigil';
 import { uxToHex, cite } from '/lib/util';
 
-
 export class MemberElement extends Component {
-
   onRemove() {
     const { props } = this;
     props.api.groups.remove([`~${props.ship}`], props.path);
@@ -24,7 +21,8 @@ export class MemberElement extends Component {
     } else if (window.ship !== props.ship && window.ship === props.owner) {
       actionElem = (
         <a onClick={this.onRemove.bind(this)}
-           className="w-20 dib list-ship black white-d f8 pointer">
+           className="w-20 dib list-ship black white-d f8 pointer"
+        >
            Ban
         </a>
       );
@@ -34,20 +32,24 @@ export class MemberElement extends Component {
       );
     }
 
-    let name = !!props.contact
+    const name = props.contact
       ? `${props.contact.nickname} (${cite(props.ship)})` : `${cite(props.ship)}`;
-    let color = !!props.contact ? uxToHex(props.contact.color) : '000000';
+    const color = props.contact ? uxToHex(props.contact.color) : '000000';
+
+    const img = (props.contact && (props.contact.avatar !== null))
+      ? <img src={props.contact.avatar} height={32} width={32} className="dib" />
+      : <Sigil ship={props.ship} size={32} color={`#${color}`} />;
 
     return (
       <div className="flex mb2">
-        <Sigil ship={props.ship} size={32} color={`#${color}`} />
+      {img}
         <p className={
-            "w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8"
-           }>{name}</p>
+            'w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8'
+           }
+        >{name}</p>
         {actionElem}
       </div>
     );
   }
 }
 
-

pkg/interface/chat/src/js/components/lib/overlay-sigil.js

@@ -1,9 +1,9 @@
-import React, { Component } from "react";
-import { Sigil } from "/components/lib/icons/sigil";
+import React, { Component } from 'react';
+import { Sigil } from '/components/lib/icons/sigil';
 import {
   ProfileOverlay,
   OVERLAY_HEIGHT
-} from "/components/lib/profile-overlay";
+} from '/components/lib/profile-overlay';
 
 export class OverlaySigil extends Component {
   constructor() {
@@ -49,7 +49,6 @@ export class OverlaySigil extends Component {
       const parent = this.containerRef.current.offsetParent;
       const { offsetTop } = this.containerRef.current;
 
-
       let bottomSpace, topSpace;
 
       if(navigator.userAgent.includes('Firefox')) {
@@ -58,7 +57,6 @@ export class OverlaySigil extends Component {
       } else {
         topSpace = offsetTop + parent.scrollHeight - parent.clientHeight - parent.scrollTop;
         bottomSpace = parent.clientHeight - topSpace - OVERLAY_HEIGHT;
-
       }
       this.setState({
         topSpace,
@@ -69,12 +67,22 @@ export class OverlaySigil extends Component {
 
   render() {
     const { props, state } = this;
-    return (
+
+    const img = (props.contact && (props.contact.avatar !== null))
+      ? <img src={props.contact.avatar} height={24} width={24} className="dib" />
+      : <Sigil
+        ship={props.ship}
+        size={24}
+        color={props.color}
+        classes={props.sigilClass}
+        />;
+
+     return (
       <div
         onClick={this.profileShow}
-        className={props.className + " pointer relative"}
+        className={props.className + ' pointer relative'}
         ref={this.containerRef}
-        style={{ height: "24px" }}
+        style={{ height: '24px' }}
       >
         {state.profileClicked && (
           <ProfileOverlay
@@ -87,12 +95,7 @@ export class OverlaySigil extends Component {
             onDismiss={this.profileHide}
           />
         )}
-        <Sigil
-          ship={props.ship}
-          size={24}
-          color={props.color}
-          classes={props.sigilClass}
-        />
+        {img}
       </div>
     );
   }

pkg/interface/chat/src/js/components/lib/profile-overlay.js

@@ -1,7 +1,7 @@
-import React, { Component } from "react";
-import { Link } from "react-router-dom";
-import { cite } from "/lib/util";
-import { Sigil } from "/components/lib/icons/sigil";
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { cite } from '/lib/util';
+import { Sigil } from '/components/lib/icons/sigil';
 
 export const OVERLAY_HEIGHT = 250;
 
@@ -14,13 +14,13 @@ export class ProfileOverlay extends Component {
   }
 
   componentDidMount() {
-    document.addEventListener("mousedown", this.onDocumentClick);
-    document.addEventListener("touchstart", this.onDocumentClick);
+    document.addEventListener('mousedown', this.onDocumentClick);
+    document.addEventListener('touchstart', this.onDocumentClick);
   }
 
   componentWillUnmount() {
-    document.removeEventListener("mousedown", this.onDocumentClick);
-    document.removeEventListener("touchstart", this.onDocumentClick);
+    document.removeEventListener('mousedown', this.onDocumentClick);
+    document.removeEventListener('touchstart', this.onDocumentClick);
   }
 
   onDocumentClick(event) {
@@ -38,21 +38,31 @@ export class ProfileOverlay extends Component {
 
     let top, bottom;
     if (topSpace < OVERLAY_HEIGHT / 2) {
-      top = `0px`;
+      top = '0px';
     }
     if (bottomSpace < OVERLAY_HEIGHT / 2) {
-      bottom = `0px`;
+      bottom = '0px';
     }
     if (!(top || bottom)) {
       bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`;
     }
-    const containerStyle = { top, bottom, left: "100%" };
+    const containerStyle = { top, bottom, left: '100%' };
 
     const isOwn = window.ship === ship;
 
-    const identityHref = group["group-path"].startsWith("/~/")
-      ? "/~groups/me"
-      : `/~groups/view${group["group-path"]}/${window.ship}`;
+    const identityHref = group['group-path'].startsWith('/~/')
+      ? '/~groups/me'
+      : `/~groups/view${group['group-path']}/${window.ship}`;
+
+    const img = (contact && (contact.avatar !== null))
+      ? <img src={contact.avatar} height={160} width={160} className="brt2 dib" />
+      : <Sigil
+        ship={ship}
+        size={160}
+        color={color}
+        classes="brt2"
+        svgClass="brt2"
+        />;
 
     return (
       <div
@@ -60,14 +70,8 @@ export class ProfileOverlay extends Component {
         style={containerStyle}
         className="flex-col shadow-6 br2 bg-white bg-gray0-d inter absolute z-1 f9 lh-solid"
       >
-        <div style={{ height: "160px" }}>
-          <Sigil
-            ship={ship}
-            size={160}
-            color={color}
-            classes="brt2"
-            svgClass="brt2"
-          />
+        <div style={{ height: '160px', width: '160px' }}>
+        {img}
         </div>
         <div className="pv3 pl3 pr2">
           {contact && contact.nickname && (