feat(navigation): add user dropdown

This commit is contained in:
Sara Vieira 2018-03-28 14:26:25 +01:00 committed by Sérgio Ramos
parent 495af5702d
commit cac551beaf
8 changed files with 79 additions and 16 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "my-joy-navigation", "name": "my-joy-navigation",
"version": "2.5.1", "version": "2.6.0",
"private": true, "private": true,
"license": "MPL-2.0", "license": "MPL-2.0",
"main": "lib/index.js", "main": "lib/index.js",

View File

@ -1,9 +1,10 @@
import emotion from 'preact-emotion'; import emotion from 'preact-emotion';
import remcalc from 'remcalc';
export default emotion('a')` export default emotion('a')`
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: ${remcalc(24)};
font-size: 15px; font-size: ${remcalc(15)};
text-decoration: none; text-decoration: none;
color: ${props => props.theme.text}; color: ${props => props.theme.text};

View File

@ -4,11 +4,7 @@ import remcalc from 'remcalc';
const Img = emotion('img')` const Img = emotion('img')`
width: ${remcalc(24)}; width: ${remcalc(24)};
border-radius: 50%;
`; `;
export default props => ( export default props => <Img {...props} />;
<Img
{...props}
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsSAAALEgHS3X78AAALZElEQVR4nN2dfWwbZx3HP/dmO2kaZ0lbm74lXdauY23SUmnaVrZl0GloINWFSf0L1lYgxJhEiCbgP4LE/kCC0moaQ0hoKYOpQ5S52ipWwVi2AW1hG0nXvWhd1mRdW2dKsrqkjd/Oxx93dmzf+XznnN0kX6nq5bnn7fe95/d7fs+rBU3TuJ6I93X2AFuAFqDHCN4CBC2ijwGjxvOg8TwU3D8yVMMq2kKoN4Hxvs4tQASdrHs8zPooOqnR4P6RUQ/ztUVdCIz3dXYAvejEtde8QBgGBoCB4P6Ry7UsqKYEGurZj7ctzS0OAQdqpeY1IXCeEFeKV4A9Xqu3pwQaqjrA/CKuFIeAXq9UW/QiE4B4X2c/cI75TR7AQ8BovK8z4kVmc26BRq86AHR7UaE64yi6WlfdGufUAuN9nXvQXYeFSB7ATmDIaARVoWoCDZV9CmuHdyGhHRg0GoNrVKXC8b7OAXRbstiwN7h/ZMBNAtctcBGTB/CU25bomEA1Gm6Z+c3aF1m85OkQ+FXqmVUPO43upgUO+Fak7vfdlDlfRbUWBgRmGrYmG6RG9Qk1Gu5xksQRgWo0PIDeY+FbmVyzKEnMkdeUyYVE1Wi4Yu9ckUA1Gt5DidouOhLN5IHuXQyo0XCLXVJbAo0vcMDq3aIh0Zq8HLopI38OlVrgADZ+3oIn0Z68HB5So+Gyw76yBKrRcD8ORhgLlkRn5OVQVpUtCVSj4Q7gx07rsuBIdEce6FpoqcrlWqCt3lthwZDonrwcHrJybUwEGpF2VlO3eU9i9eTl0F8aYNUCTZHcYN6SOHfyAO4pbYVFBBpuy5wnROcdid6Ql0Nv4R+lLbAXjzBvSPSWPICdRicLFBBodNOeThRcdxK9Jy+HfEOTCwKdrREobYhLi4eI2amXykb3rUyuAc6nPpDXuKriXOGEPJeyFCCCQaIjAoWGToTVD0LHVxGWmNfFJYBP30Ib+T3Z8RcgPVn0vu4k2pGntCF2fLNqWQy0q9FwRIrEooKmaTn1/dQqprj+hwgb9oHicOY+HUd7/Udkx58zvUpd9NeeRBvyvJQFOChFYr05G2hufUob0j1/Rbj1+84LBFCCCHc8idR90PSq5jaxHHlKG9IdRzyVBYOzHIE9pgLvPAw3bHZeWCnW7a4viXbk3XkYQturz9talnY1Gu7I2cAiSyp1/9yWvJN/P078sq7xN27YyPpNZeYd1+1GjL9PdvSJomDPbaKN2rqRJdhyA7d/4X7riOt2I167SPbszwpDt+RsYH5pTgztQrjjScs8Hnv0YV489jyJxLWi8NbWZXzru708uO87lumyx7ejzYyYwj2xiXY2r4Isr778ElNTE0XhLmX5iZB5LtQDvJwv9L5Tpt5pcvwS+772ABcvfGQry+133sXjf4iaX5x7FnX4e5Zp5kRiBVelnCyPfP1BPjj7nm3WDmV5RUTfGaoXGNpl2bX/4NvfqEgewMl/vcZjj1osaK3bDUqbZZqqbWIl8lq/WFaWSuSBY1laRArsn9C2zRT/+J8Pc3r4zYoF5vDiseeZHL9kChdDXymbxjWJDpxkIXyvKcytLNEjz3L2jHlbYYEs3cVj4eAtpsh//N1vHRcIkEhc4+lfW3T7DWHbdI5JdDo8s5DlhSOHK2ZfimMWaYTm9fnnohZI6yZT5I/PV1bdUrz13zfMhS67rWK6iiS6GNtqTatNYe+/927FdKU49c/XzIEFH0emwAYmjz9uinvXiiysaHVVaDg4TfKFnxaFiT7V0SJ0WRfH5cRA6uWnTWFVybIiayuLkHkuNIgxBzh9ajkki10UryCt7qThxtOO4xf1zlXMqlwdXosWtxzHzhmFshQ1Cmn5Z2pSIIC0zHZ92oS8OgskqpmSEpe6K88NpJbm/LNc+kL9uDaFiv6s6zS+lck1yooUgux+C15NZVlS8MzsyR/EpZ5PPOYh+9+pKl015AHIwdqYIiiWpYhAWTmJELR2eOcC5eYuYMrzfO0gSm/WRRa5NIJ/41oSp7w1vr7QRdv3WkYgOeInMylBBqRlWXxr0xTavfSkQnpMITstIAQ0pJBKoD1pm6//sytJnKitLCJQ5GrL/n8g32h2QqsucMs2BMZs48ycbiAzrpMHoE6IzJz2k01IgE5e8m0f2WkBAC0hkBmTSYwEbPOVlZO1lmVYBExb/AOrP0RcvmrOBSo3d+FrftU2Tio2S0wRMpAaUwBIG/+bolyQ8iSXQ41luSxKkdigOfoUjbdMzKlg5eYu/KETFeNlkzp5QkBDXqUit2cQg3rHkU3oXlaOYGlZFrk9g7xKzRufbMKC/CLUVJbB3HzgEGV2YqWu3E1qyDw0Kwt/I4HPdSIrJx1Fz1yWUa9K+ELF7koq5gPAF06RGPMjB1XkllmbqGUEkhd8+EIZxIDqqKxqZPFv3ojSaDGc07ErR+ABwHrCDtBoJz21hvT5j8p69+LyVSjtIZTGt6l3j+sGGu2kr7STPjfqhSzrcgRGAMulJ6sKaKruHmhZjcxElvTFiwjqVeRVKv5V9j3j9UY2IZH80Ic6ISKtWIa8shVpyawZEKVRHDaAYSkS25JzYwadVkBgDEHSe6JrZxrJxvXCX/vEDx/BfV9SqcFOAM8w/k6A4Q99LPVpdDOB+skEga5kkXlwiEEoOKmkRsNRXG5rm351CX+56OMXpz4xvQv4JNaElrD9ts08vPdemInBtY/RZkYt10e8gtC8DUFugeaNoDTxaP8zXBqf4Pz4VRKpYlsZUCQe+3wr27pnKvqUFtgqRWJDhY60awIBLl2zHuMmUipnz19hxwMb9PVYA3llScdh6oz+HH8XLf2/2cRX3of0FXOmjauLJmaFxpV6GJRdtrx05U+cPW+RF5BIO+t8LDAmRWJDUDwSiaLvTHW88iwGNfbdlOFcppUT77rsOJTgrNCh7VRyRmqBnZvb6G5JIwddE5lfbcoTKEVilw01drxDq+HWGVLjPn55d5K/nQ5x7D9pTpyZvz0w6KZl64Ygj3wZOpqukU0K1di//Bbo0rFwPy4IFGQt3+vu6JpiRxeAQvRkK2+MqIyOp9xWzHP4FYn1a5rZ1B5g23qBHV1TwKy5kJpcZ3lUisRGc3+Yjruq0fAgHh/bF5q3ITSsheYNCMrS2TWF1k3u9qqUQ4E91Sb+rYdNvl6rDuvewtGbFYE9FCy01w0We/Xs4HAfn9d4RYrEegoDLA9cG4cLF/ex1uqwNdf75lBuoawfiNe8OgsLB0vJgzIEGkbS9WGbuSAx5tentipMT4E+kZCeVEiM+R3F9wBxyhz/sL0zwW6WxktkLsskTvvzf4tNGmKbihxUkZp0H02dllCvSmTjIurE7HeX2zPVjCLcYpcUiVnsNLKY0i/BHvQxX01v5hADxR8xOy2QnZbJVKweSE3uV/tc4lA58qDCcVdD5z07O1K2EgFVnyR1m65JQ2lL16BGeQxTQf6Kuy2kSGwAsNwk7CUCnQlXJIpBjYaumRrWiDgQkSIx21uNHN8bUy/XJpuQSF1QyMZF01qJENCQglnkUKaa4ZcbxIEeq163FJWNzCx60Xdy1bRTEQMqgc6qZ0m8Qq8T8sDFtSdGU+5BtwuLGXsNs+UIrm4uKiDxqLs6LQjE0d2VATeJqr7+bpEN9xzbvFJUfXubFIntAfZWm34eYRjoqIY88OACRuOQ9gAL8w7Bg1IkNic/d85XgBpfroc6+IoeYgx9Xm/OgwRPL6EtuOlovt6jGgcOSJFYv1cZ1uQaZGOh/gD1uXTbKQ6h+3eeXsxd04u4DSJ7uX4tMo7+IQcK1zG8RF2ugjcuaajnVfBHgahbn64a1P3HCAw76fWPEYyhT7sNohNX0/vzC1F3AkthLGJ1GP9yP4sBZnILfwpjCH1j6CAwWiv1dIL/A+EDttkCSrnHAAAAAElFTkSuQmCC"
/>
);

View File

@ -33,4 +33,5 @@ export {
export { default as Overlay } from './overlay'; export { default as Overlay } from './overlay';
export { default as Anchor } from './anchor'; export { default as Anchor } from './anchor';
export { default as Popover } from './popover';
export { default as Sup } from './sup'; export { default as Sup } from './sup';

View File

@ -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;
}
`;

View File

@ -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;

View File

@ -1,2 +1,3 @@
export { default as Services } from './services'; export { default as Services } from './services';
export { default as Datacenter } from './datacenter'; export { default as Datacenter } from './datacenter';
export { default as Account } from './account';

View File

@ -40,13 +40,14 @@ const GetAccount = gql`
} }
account { account {
login login
emailHash
} }
} }
`; `;
const Navigation = ({ const Navigation = ({
account = {}, user = {},
datacenter = true, datacenter,
toggleSectionOpen, toggleSectionOpen,
isOpen, isOpen,
activePanel activePanel
@ -85,15 +86,18 @@ const Navigation = ({
</HeaderItem> </HeaderItem>
) : null} ) : null}
{datacenter ? <HeaderDividerItem /> : null} {datacenter ? <HeaderDividerItem /> : null}
{account.login ? ( {user.login ? (
<HeaderItem> <HeaderItem
onClick={() => toggleSectionOpen('account')}
active={isOpen && activePanel === 'account'}
>
<HeaderItemContent> <HeaderItemContent>
<HeaderItemSubContent>Account:</HeaderItemSubContent> <HeaderItemSubContent>Account:</HeaderItemSubContent>
<HeaderSpace /> <HeaderSpace />
{`${account.login}`} {`${user.login}`}
</HeaderItemContent> </HeaderItemContent>
<HeaderItemIcon> <HeaderItemIcon>
<Avatar /> <Avatar src={user.image} />
</HeaderItemIcon> </HeaderItemIcon>
</HeaderItem> </HeaderItem>
) : null} ) : null}
@ -121,7 +125,12 @@ export default compose(
const { name } = datacenter; 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, { graphql(GetHeader, {