From c241acfd3a22a5ec7a101d4b308c1f154b5ef062 Mon Sep 17 00:00:00 2001 From: Victor Tortolero Date: Fri, 11 May 2018 16:49:26 -0500 Subject: [PATCH 1/7] Allow Avatar to receive style props --- mobile/components/Avatar/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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 ( + + ); } } From d28a967fbd9238be9e323a22f077ebd22b614754 Mon Sep 17 00:00:00 2001 From: Victor Tortolero Date: Fri, 11 May 2018 16:54:36 -0500 Subject: [PATCH 2/7] Remove Margin from AvatarImage --- mobile/components/Avatar/style.js | 1 - 1 file changed, 1 deletion(-) 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; `; From 05a82a65e5d88e48b06ad5c0d4cfc5fdeeebb5d9 Mon Sep 17 00:00:00 2001 From: Victor Tortolero Date: Fri, 11 May 2018 16:54:45 -0500 Subject: [PATCH 3/7] Add StackedEmptyParticipantHead and StackedAvatar style components --- mobile/components/ThreadItem/style.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js index 6d9505eb92..357eea133e 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 { Stylesheet } from 'react-native'; +import Avatar from '../Avatar'; export const InboxThreadItem = styled.View` display: flex; @@ -53,11 +54,24 @@ 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 stackizeHeads = ( + component, + { marginRight = '-10px', borderWidth = '2px', borderColor = '#FFFFFF' } = {} +) => styled(component)` + margin-right: ${marginRight}; + border-width: ${borderWidth}; + border-color: ${borderColor}; +`; + +export const StackedEmptyParticipantHead = stackizeHeads(EmptyParticipantHead); +export const StackedAvatar = stackizeHeads(Avatar); From e9854017a70c93a30fab8bf7f13c4a861ad039fe Mon Sep 17 00:00:00 2001 From: Victor Tortolero Date: Fri, 11 May 2018 16:57:21 -0500 Subject: [PATCH 4/7] Refactor Facepile to use stacked components --- mobile/components/ThreadItem/Facepile.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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} - + )} ); From ad6a0ea9b367b06d764bab2ac9f34d5a7baffe04 Mon Sep 17 00:00:00 2001 From: Victor Tortolero Date: Wed, 16 May 2018 11:39:23 -0500 Subject: [PATCH 5/7] Refactor stacked styles to use styled-components `css` --- mobile/components/ThreadItem/style.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/mobile/components/ThreadItem/style.js b/mobile/components/ThreadItem/style.js index 357eea133e..b561b59eed 100644 --- a/mobile/components/ThreadItem/style.js +++ b/mobile/components/ThreadItem/style.js @@ -1,5 +1,5 @@ // @flow -import styled from 'styled-components/native'; +import styled, { css } from 'styled-components/native'; import { Stylesheet } from 'react-native'; import Avatar from '../Avatar'; @@ -64,14 +64,16 @@ export const EmptyParticipantHead = styled.Text` overflow: hidden; `; -const stackizeHeads = ( - component, - { marginRight = '-10px', borderWidth = '2px', borderColor = '#FFFFFF' } = {} -) => styled(component)` - margin-right: ${marginRight}; - border-width: ${borderWidth}; - border-color: ${borderColor}; +const stackingStyles = css` + margin-right: -10px; + border-width: 2px; + border-color: #ffffff; `; -export const StackedEmptyParticipantHead = stackizeHeads(EmptyParticipantHead); -export const StackedAvatar = stackizeHeads(Avatar); +export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)` + ${stackingStyles}; +`; + +export const StackedAvatar = styled(Avatar)` + ${stackingStyles}; +`; From 8f420fea259d78ec5d5fb76e32d278d36e7c9747 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Thu, 17 May 2018 07:02:41 -0700 Subject: [PATCH 6/7] Fix quote replies --- api/mutations/message/addMessage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 From 5949c95bb18b52212ef0a0def3983b7256dd0b47 Mon Sep 17 00:00:00 2001 From: Brian Lovin Date: Thu, 17 May 2018 07:05:03 -0700 Subject: [PATCH 7/7] Version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",