diff --git a/api/mutations/message/addMessage.js b/api/mutations/message/addMessage.js index d90687dadd..0ba4306cd6 100644 --- a/api/mutations/message/addMessage.js +++ b/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 diff --git a/mobile/components/Avatar/index.js b/mobile/components/Avatar/index.js index 4d7c9aac3a..0d92efe33e 100644 --- a/mobile/components/Avatar/index.js +++ b/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 { render() { - const { src, size, radius } = this.props; + const { src, size, radius, style } = this.props; let source = src ? { uri: src } : {}; - return ; + return ( + + ); } } diff --git a/mobile/components/Avatar/style.js b/mobile/components/Avatar/style.js index 3361d7cad5..762e8ce915 100644 --- a/mobile/components/Avatar/style.js +++ b/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; `; diff --git a/mobile/components/ThreadItem/Facepile.js b/mobile/components/ThreadItem/Facepile.js index f823b8cf89..4e3b0cfa4c 100644 --- a/mobile/components/ThreadItem/Facepile.js +++ b/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 ( - { return ( - + {messageAvatars(participantList)} {hasOverflow && ( - + {overflowAmount} - + )} ); diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js index 6d9505eb92..b561b59eed 100644 --- a/mobile/components/ThreadItem/style.js +++ b/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}; +`; diff --git a/package.json b/package.json index a615f2f670..eda6d7d260 100644 --- a/package.json +++ b/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",