Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixing missing avatar and adding toggled style to dropdown arrow in profile header

This commit is contained in:
Alex Windett 2016-12-21 14:49:41 +00:00
parent 36f14ba3a2
commit d6c1e7b351
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/header/index.js
View File

@ -62,7 +62,7 @@ const StyledAvatarWrapper = styled.div`
&:after { &:after {
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid black; border-${props => props.toggled ? 'bottom' : 'top'}: 5px solid black;
${pseudoEl({ ${pseudoEl({
top: '50%', top: '50%',
@ -77,6 +77,11 @@ const StyledTooltipWrapper = styled.div`
bottom: -180px; bottom: -180px;
`; `;
const StyledName = styled.span`
position: relative;
top: -12px;
`;
const arrowPosition = { const arrowPosition = {
bottom: '100%', bottom: '100%',
right: '10%' right: '10%'
@ -110,16 +115,19 @@ const Header = ({
> >
<StyledProfileWrapper> <StyledProfileWrapper>
<StyledAvatarWrapper> <StyledAvatarWrapper toggled={accountUI.profile_tooltip}>
<Link <Link
onClick={handleToggle} onClick={handleToggle}
to='/' to='/'
> >
<span>{account.name}</span> <StyledName>{account.name}</StyledName>
<Avatar <Avatar
alt={account.name} alt={account.name}
name={account.name} name={account.name}
src={account.avatar} src={account.avatar}
style={{
marginLeft: '12px'
}}
/> />
</Link> </Link>
</StyledAvatarWrapper> </StyledAvatarWrapper>

2
frontend/src/mock-state.json
View File

@ -5,7 +5,7 @@
"id": "nicola", "id": "nicola",
"name": "Nicola", "name": "Nicola",
"email": "nicola@biztech.com", "email": "nicola@biztech.com",
"avatar": "./resources/avatar.png" "avatar": "/src/resources/avatar.png"
}, },
"ui": { "ui": {
"profile_tooltip": false "profile_tooltip": false