Skip to content
This repository has been archived by the owner on Oct 11, 2022. It is now read-only.

[Mobile v1] Overlay thread participant heads #3072

Merged
merged 5 commits into from May 17, 2018
Merged

[Mobile v1] Overlay thread participant heads #3072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c241acf
Allow Avatar to receive style props
May 11, 2018
d28a967
Remove Margin from AvatarImage
May 11, 2018
05a82a6
Add StackedEmptyParticipantHead and StackedAvatar style components
May 11, 2018
e985401
Refactor Facepile to use stacked components
May 11, 2018
ad6a0ea
Refactor stacked styles to use styled-components `css`
May 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 5 additions & 2 deletions mobile/components/Avatar/index.js
View file
Open in desktop
Expand Up @@ -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} />
);
}
}
1 change: 0 additions & 1 deletion mobile/components/Avatar/style.js
View file
Open in desktop
Expand Up @@ -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;
`;
14 changes: 9 additions & 5 deletions mobile/components/ThreadItem/Facepile.js
View file
Open in desktop
Expand Up @@ -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 => {
Expand All @@ -13,7 +17,7 @@ const messageAvatars = list => {
return null;
}
return (
<Avatar
<StackedAvatar
key={participant.id}
src={participant.profilePhoto}
size={30}
Expand Down Expand Up @@ -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>
);
Expand Down
22 changes: 19 additions & 3 deletions mobile/components/ThreadItem/style.js
View file
Open in desktop
@@ -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;
Expand Down Expand Up @@ -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')};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should handle all this styling at the mobile/components/Avatar level. border-radius for user avatars should always be 100%. for community avatars, it should always be 25%.

The only thing that should change between instances is size and whether or not it has status and link elements.

It's ok to handle the overlapping here, of course.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I learned tonight that react native does some weird things with border radius; for circles you have to set the border radius to 50% of the width/height, otherwise it over-radius-es and becomes a diamond :P

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh also just note this is an empty participant head - not an avatar, so we'll need to treat it differently anyways :)

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};
`;