[Mobile v1] Overlay thread participant heads #3072
Conversation
Generated by 🚫 dangerJS |
TheMightyPenguin
force-pushed
the
overlay-mobile-thread-participant-heads
branch
2 times, most recently
from
439b426
to
773f016
Compare
TheMightyPenguin
force-pushed
the
overlay-mobile-thread-participant-heads
branch
from
773f016
to
e985401
Compare
| `; | ||
|
|
||
| export const StackedEmptyParticipantHead = stackizeHeads(EmptyParticipantHead); | ||
| export const StackedAvatar = stackizeHeads(Avatar); |
There was a problem hiding this comment.
We should use the css helper here instead of wrapping it in another component:
import { css } from 'styled-components';
const stackingStyles = css`
margin-right: -10px;
border-width: 2px;
border-color: #FFFFFF;
`
export const StackedEmptyParticipantHead = styled(EmptyParticipantHead)`
${stackingStyles}
`
export const StackedAvatar = styled(Avatar)`
${stackingStyles}
`There was a problem hiding this comment.
Will make this change 👍. Should I keep the HoC, or is it overkill for this? @mxstbr
|
Looking awesome @TheMightyPenguin! |
| @@ -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')}; | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Oh also just note this is an empty participant head - not an avatar, so we'll need to treat it differently anyways :)
|
@mxstbr PR updated 😄 |
Status
Deploy after merge (delete what needn't be deployed)
Release notes for users (delete if codebase-only change)
Tired of seeing those heads so spaced out? Well no more, now they stack in a sexy way!
Before:
After:
Parent Isue: #2330