feat(navigation): add user dropdown
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
495af5702d
commit
cac551beaf
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "my-joy-navigation",
|
||||
"version": "2.5.1",
|
||||
"version": "2.6.0",
|
||||
"private": true,
|
||||
"license": "MPL-2.0",
|
||||
"main": "lib/index.js",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import emotion from 'preact-emotion';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default emotion('a')`
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
text-decoration: none;
|
||||
color: ${props => props.theme.text};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@ import remcalc from 'remcalc';
|
|||
|
||||
const Img = emotion('img')`
|
||||
width: ${remcalc(24)};
|
||||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
export default props => (
|
||||
<Img
|
||||
{...props}
|
||||
src="data:image/png;base64,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"
|
||||
/>
|
||||
);
|
||||
export default props => <Img {...props} />;
|
||||
|
|
|
|||
|
|
@ -33,4 +33,5 @@ export {
|
|||
|
||||
export { default as Overlay } from './overlay';
|
||||
export { default as Anchor } from './anchor';
|
||||
export { default as Popover } from './popover';
|
||||
export { default as Sup } from './sup';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import emotion from 'preact-emotion';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default emotion('div')`
|
||||
min-width: ${remcalc(180)};
|
||||
right: ${remcalc(12)};
|
||||
top: ${remcalc(46)};
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
position: absolute;
|
||||
padding: ${remcalc(12)};
|
||||
z-index: 20;
|
||||
border-radius: ${remcalc(4)};
|
||||
background: ${props => props.theme.white};
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 ${remcalc(2)} ${remcalc(4)} rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: ${remcalc(-6)};
|
||||
right: ${remcalc(12)};
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 ${remcalc(4.5)} ${remcalc(6)} ${remcalc(4.5)};
|
||||
border-color: transparent transparent ${props =>
|
||||
props.theme.white} transparent;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: ${remcalc(-7)};
|
||||
right: ${remcalc(11)};
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 ${remcalc(5.5)} ${remcalc(7)} ${remcalc(5.5)};
|
||||
border-color: transparent transparent ${props =>
|
||||
props.theme.grey} transparent;
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import { Anchor, Popover } from '../components';
|
||||
|
||||
const Account = ({ expanded }) =>
|
||||
expanded ? (
|
||||
<Popover>
|
||||
<Anchor href="/navigation/signout">Log Out</Anchor>
|
||||
</Popover>
|
||||
) : null;
|
||||
|
||||
export default Account;
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
export { default as Services } from './services';
|
||||
export { default as Datacenter } from './datacenter';
|
||||
export { default as Account } from './account';
|
||||
|
|
|
|||
|
|
@ -40,13 +40,14 @@ const GetAccount = gql`
|
|||
}
|
||||
account {
|
||||
login
|
||||
emailHash
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Navigation = ({
|
||||
account = {},
|
||||
datacenter = true,
|
||||
user = {},
|
||||
datacenter,
|
||||
toggleSectionOpen,
|
||||
isOpen,
|
||||
activePanel
|
||||
|
|
@ -85,15 +86,18 @@ const Navigation = ({
|
|||
</HeaderItem>
|
||||
) : null}
|
||||
{datacenter ? <HeaderDividerItem /> : null}
|
||||
{account.login ? (
|
||||
<HeaderItem>
|
||||
{user.login ? (
|
||||
<HeaderItem
|
||||
onClick={() => toggleSectionOpen('account')}
|
||||
active={isOpen && activePanel === 'account'}
|
||||
>
|
||||
<HeaderItemContent>
|
||||
<HeaderItemSubContent>Account:</HeaderItemSubContent>
|
||||
<HeaderSpace />
|
||||
{`${account.login}`}
|
||||
{`${user.login}`}
|
||||
</HeaderItemContent>
|
||||
<HeaderItemIcon>
|
||||
<Avatar />
|
||||
<Avatar src={user.image} />
|
||||
</HeaderItemIcon>
|
||||
</HeaderItem>
|
||||
) : null}
|
||||
|
|
@ -121,7 +125,12 @@ export default compose(
|
|||
|
||||
const { name } = datacenter;
|
||||
|
||||
return { account, datacenter: name, loading, error };
|
||||
const user = {
|
||||
...account,
|
||||
image: `https://www.gravatar.com/avatar/${account.emailHash}`
|
||||
};
|
||||
|
||||
return { user, datacenter: name, loading, error };
|
||||
}
|
||||
}),
|
||||
graphql(GetHeader, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue