Merge pull request #3112 from withspectrum/2.2.13

2.2.13

Author: brianlovin

api/mutations/message/addMessage.js

@@ -127,7 +127,7 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
 
   if (message.parentId) {
     const parent = await getMessage(message.parentId);
-    if (parent.threadId !== message.threadId)
+    if (parent.threadId !== message.threadId) {
       trackQueue.add({
         userId: user.id,
         event: eventFailed,
@@ -137,7 +137,8 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
         },
       });
 
-    return new UserError('You can only quote messages from the same thread.');
+      return new UserError('You can only quote messages from the same thread.');
+    }
   }
 
   // construct the shape of the object to be stored in the db

mobile/components/Avatar/index.js

@@ -6,13 +6,16 @@ type AvatarProps = {
   src: string,
   size: number,
   radius: number,
+  style?: Object,
 };
 
 export default class Avatar extends Component<AvatarProps> {
   render() {
-    const { src, size, radius } = this.props;
+    const { src, size, radius, style } = this.props;
     let source = src ? { uri: src } : {};
 
-    return <AvatarImage source={source} size={size} radius={radius} />;
+    return (
+      <AvatarImage source={source} size={size} radius={radius} style={style} />
+    );
   }
 }

mobile/components/Avatar/style.js

@@ -5,5 +5,4 @@ export const AvatarImage = styled.Image`
   width: ${props => (props.size ? `${props.size}px` : '30px')};
   height: ${props => (props.size ? `${props.size}px` : '30px')};
   border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
-  margin-right: 5px;
 `;

mobile/components/ThreadItem/Facepile.js

@@ -2,7 +2,11 @@
 import * as React from 'react';
 import Avatar from '../Avatar';
 import type { UserInfoType } from '../../../shared/graphql/fragments/user/userInfo';
-import { FacepileContainer, EmptyParticipantHead } from './style';
+import {
+  FacepileContainer,
+  StackedEmptyParticipantHead,
+  StackedAvatar,
+} from './style';
 const NUM_TO_DISPLAY = 5;
 
 const messageAvatars = list => {
@@ -13,7 +17,7 @@ const messageAvatars = list => {
       return null;
     }
     return (
-      <Avatar
+      <StackedAvatar
         key={participant.id}
         src={participant.profilePhoto}
         size={30}
@@ -50,12 +54,12 @@ const Facepile = ({ participants, creator }: FacepileProps) => {
 
   return (
     <FacepileContainer>
-      <Avatar src={creator.profilePhoto} size={30} radius={15} />
+      <StackedAvatar src={creator.profilePhoto} size={30} radius={15} />
       {messageAvatars(participantList)}
       {hasOverflow && (
-        <EmptyParticipantHead adjustsFontSizeToFit>
+        <StackedEmptyParticipantHead size={30} adjustsFontSizeToFit>
           {overflowAmount}
-        </EmptyParticipantHead>
+        </StackedEmptyParticipantHead>
       )}
     </FacepileContainer>
   );

mobile/components/ThreadItem/style.js

@@ -1,6 +1,7 @@
 // @flow
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { Stylesheet } from 'react-native';
+import Avatar from '../Avatar';
 
 export const InboxThreadItem = styled.View`
   display: flex;
@@ -53,11 +54,26 @@ export const FacepileContainer = styled.View`
 export const EmptyParticipantHead = styled.Text`
   color: ${props => props.theme.text.alt};
   background: ${props => props.theme.bg.wash};
-  border-radius: 15px;
+  border-radius: ${props => (props.radius ? `${props.radius}px` : '15px')};
   text-align: center;
   text-align-vertical: center;
   font-size: 12px;
   font-weight: 600;
-  width: 30px;
+  height: ${props => (props.size ? `${props.size}px` : '30px')};
+  width: ${props => (props.size ? `${props.size}px` : '30px')};
   overflow: hidden;
 `;
+
+const stackingStyles = css`
+  margin-right: -10px;
+  border-width: 2px;
+  border-color: #ffffff;
+`;
+
+export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)`
+  ${stackingStyles};
+`;
+
+export const StackedAvatar = styled(Avatar)`
+  ${stackingStyles};
+`;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Spectrum",
-  "version": "2.2.12",
+  "version": "2.2.13",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "babel-cli": "^6.24.1",