yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Collaborator avatars should overlap

Browse Source
This commit is contained in:
Tom Moor
2019-10-15 21:30:33 -07:00
parent 97c8bfc27f
commit 5263d8a315
1 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/Collaborators.js
View File

@@ -61,13 +61,13 @@ class Collaborators extends React.Component<Props> {
{overflow > 0 && <More>+{overflow}</More>} {overflow > 0 && <More>+{overflow}</More>}
{mostRecentViewers.map(({ lastViewedAt, user }) => ( {mostRecentViewers.map(({ lastViewedAt, user }) => (
<React.Fragment key={user.id}> <React.Fragment key={user.id}>
<AvatarPile <Tooltip
tooltip={ tooltip={
<TooltipCentered> <Centered>
<strong>{user.name}</strong> <strong>{user.name}</strong>
<br /> <br />
viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
</TooltipCentered> </Centered>
} }
placement="bottom" placement="bottom"
> >
@@ -78,7 +78,7 @@ class Collaborators extends React.Component<Props> {
size={32} size={32}
/> />
</Viewer> </Viewer>
</AvatarPile> </Tooltip>
<UserProfile <UserProfile
user={user} user={user}
isOpen={this.openProfileId === user.id} isOpen={this.openProfileId === user.id}
@@ -88,15 +88,15 @@ class Collaborators extends React.Component<Props> {
))} ))}
{collaborators.map(user => ( {collaborators.map(user => (
<React.Fragment key={user.id}> <React.Fragment key={user.id}>
<AvatarPile <Tooltip
tooltip={ tooltip={
<TooltipCentered> <Centered>
<strong>{user.name}</strong> <strong>{user.name}</strong>
<br /> <br />
{createdAt === updatedAt ? 'published' : 'updated'}{' '} {createdAt === updatedAt ? 'published' : 'updated'}{' '}
{updatedBy.id === user.id && {updatedBy.id === user.id &&
`${distanceInWordsToNow(new Date(updatedAt))} ago`} `${distanceInWordsToNow(new Date(updatedAt))} ago`}
</TooltipCentered> </Centered>
} }
placement="bottom" placement="bottom"
> >
@@ -107,7 +107,7 @@ class Collaborators extends React.Component<Props> {
size={32} size={32}
/> />
</Collaborator> </Collaborator>
</AvatarPile> </Tooltip>
<UserProfile <UserProfile
user={user} user={user}
isOpen={this.openProfileId === user.id} isOpen={this.openProfileId === user.id}
@@ -120,11 +120,14 @@ class Collaborators extends React.Component<Props> {
} }
} }
const TooltipCentered = styled.div` const Centered = styled.div`
text-align: center; text-align: center;
`; `;
const AvatarPile = styled(Tooltip)` const Viewer = styled.div`
width: 32px;
height: 32px;
opacity: 0.75;
margin-right: -8px; margin-right: -8px;
&:first-child { &:first-child {
@@ -132,15 +135,14 @@ const AvatarPile = styled(Tooltip)`
} }
`; `;
const Viewer = styled.div`
width: 32px;
height: 32px;
opacity: 0.75;
`;
const Collaborator = styled.div` const Collaborator = styled.div`
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-right: -8px;
&:first-child {
margin-right: 0;
}
`; `;
const More = styled.div` const More = styled.div`