mirror of
https://github.com/yldio/copilot.git
synced 2024-09-22 06:13:50 +03:00
165 lines
3.5 KiB
JavaScript
165 lines
3.5 KiB
JavaScript
const React = require('react');
|
|
const ReactRedux = require('react-redux');
|
|
const ReactRouter = require('react-router');
|
|
const Styled = require('styled-components');
|
|
|
|
const selectors = require('@state/selectors');
|
|
const actions = require('@state/actions');
|
|
|
|
const Column = require('@ui/components/column');
|
|
const Container = require('@ui/components/container');
|
|
const Avatar = require('@ui/components/avatar');
|
|
const fns = require('@ui/shared/functions');
|
|
const logo = require('@resources/logo.png');
|
|
const Row = require('@ui/components/row');
|
|
const Tooltip = require('@ui/components/tooltip');
|
|
const composers = require('@ui/shared/composers');
|
|
|
|
const {
|
|
Link
|
|
} = ReactRouter;
|
|
|
|
const {
|
|
default: styled
|
|
} = Styled;
|
|
|
|
const {
|
|
remcalc
|
|
} = fns;
|
|
|
|
const {
|
|
connect
|
|
} = ReactRedux;
|
|
|
|
const {
|
|
accountSelector,
|
|
accountUISelector
|
|
} = selectors;
|
|
|
|
const {
|
|
pseudoEl
|
|
} = composers;
|
|
|
|
const {
|
|
handleToggleAction
|
|
} = actions;
|
|
|
|
const StyledHeader = styled.header`
|
|
background-color: #ffffff;
|
|
padding-top: ${remcalc(21)};
|
|
padding-bottom: ${remcalc(21)};
|
|
`;
|
|
|
|
const StyledLogo = styled.img`
|
|
padding-top: ${remcalc(10)}
|
|
`;
|
|
|
|
const StyledProfileWrapper = styled.div`
|
|
position: relative;
|
|
`;
|
|
|
|
const StyledAvatarWrapper = styled.div`
|
|
&:after {
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid black;
|
|
|
|
${pseudoEl({
|
|
top: '50%',
|
|
right: '10px'
|
|
})}
|
|
}
|
|
`;
|
|
|
|
const StyledTooltipWrapper = styled.div`
|
|
position: absolute;
|
|
left: -40px;
|
|
bottom: -180px;
|
|
`;
|
|
|
|
const arrowPosition = {
|
|
bottom: '100%',
|
|
right: '10%'
|
|
};
|
|
|
|
const Header = ({
|
|
account = {},
|
|
accountUI = {},
|
|
dispatch
|
|
}) => {
|
|
const handleToggle = (ev) => {
|
|
ev.preventDefault();
|
|
dispatch(handleToggleAction(accountUI.profile_tooltip));
|
|
};
|
|
|
|
return (
|
|
<StyledHeader>
|
|
<Container fluid>
|
|
<Row>
|
|
<Column xs={2}>
|
|
<Link to='/'>
|
|
<StyledLogo
|
|
alt="Joyent"
|
|
src={logo}
|
|
/>
|
|
</Link>
|
|
</Column>
|
|
<Column
|
|
smOffset={8.5}
|
|
xs={1.5}
|
|
>
|
|
<StyledProfileWrapper>
|
|
|
|
<StyledAvatarWrapper>
|
|
<Link
|
|
onClick={handleToggle}
|
|
to='/'
|
|
>
|
|
<span>{account.name}</span>
|
|
<Avatar
|
|
alt={account.name}
|
|
name={account.name}
|
|
src={account.avatar}
|
|
/>
|
|
</Link>
|
|
</StyledAvatarWrapper>
|
|
|
|
{ accountUI.profile_tooltip ? (
|
|
<StyledTooltipWrapper>
|
|
<Tooltip arrowPosition={arrowPosition}>
|
|
<li><Link to={'/'}>My Account</Link></li>
|
|
<li><Link to={'/'}>Settings</Link></li>
|
|
<li><Link to={'/'}>About</Link></li>
|
|
</Tooltip>
|
|
</StyledTooltipWrapper>
|
|
) : null }
|
|
|
|
</StyledProfileWrapper>
|
|
</Column>
|
|
</Row>
|
|
</Container>
|
|
</StyledHeader>
|
|
);
|
|
};
|
|
|
|
Header.propTypes = {
|
|
account: React.PropTypes.shape({
|
|
uuid: React.PropTypes.string,
|
|
id: React.PropTypes.string,
|
|
name: React.PropTypes.string,
|
|
}),
|
|
accountUI: React.PropTypes.shape({
|
|
profile_tooltip: React.PropTypes.boolean
|
|
}),
|
|
dispatch: React.PropTypes.func
|
|
};
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
account: accountSelector(state),
|
|
accountUI: accountUISelector(state)
|
|
});
|
|
|
|
module.exports = connect(
|
|
mapStateToProps
|
|
)(Header);
|