From 36f14ba3a20356067eb6aec4a2476621eb43cbd0 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 21 Dec 2016 14:05:16 +0000 Subject: [PATCH] implimenting header and porfile tooltip toggle --- frontend/src/components/article/index.js | 10 +- frontend/src/components/header/index.js | 135 +++++++++++++++++++++-- frontend/src/mock-state.json | 6 +- frontend/src/resources/avatar.png | Bin 0 -> 3212 bytes frontend/src/state/actions.js | 3 +- frontend/src/state/reducers/account.js | 16 ++- frontend/src/state/selectors.js | 2 + 7 files changed, 152 insertions(+), 20 deletions(-) create mode 100644 frontend/src/resources/avatar.png diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js index 229e5525..09210628 100644 --- a/frontend/src/components/article/index.js +++ b/frontend/src/components/article/index.js @@ -1,14 +1,14 @@ const Styled = require('styled-components'); -const fns = require('@ui/shared/functions'); +// const fns = require('@ui/shared/functions'); const { default: styled } = Styled; -const { - remcalc -} = fns; +// const { +// remcalc +// } = fns; +// Main Contonent Wrapper Styles module.exports = styled.article` - margin-top: ${remcalc(78)}; `; diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index c2435c1c..050ebf28 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -1,12 +1,19 @@ 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 @@ -20,34 +27,138 @@ const { remcalc } = fns; -const StyledHeader = styled.header` - height: ${remcalc(78)}; - background-color: #ffffff; - position: absolute; - width: 100%; - top: 0; - left: 0 -`; +const { + connect +} = ReactRedux; -const StyledLogo = styled.img` +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 Header = () => { +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 ( - + + + + + + + {account.name} + + + + + { accountUI.profile_tooltip ? ( + + +
  • My Account
    • +
  • Settings
    • +
  • About
    • +     +     + ) : null } + +     +     ); }; -module.exports = Header; +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); diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index 1c01eb60..04a0c729 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -4,7 +4,11 @@ "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01", "id": "nicola", "name": "Nicola", - "email": "nicola@biztech.com" + "email": "nicola@biztech.com", + "avatar": "./resources/avatar.png" + }, + "ui": { + "profile_tooltip": false } }, "datacenters": { diff --git a/frontend/src/resources/avatar.png b/frontend/src/resources/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..68b6ad913ad6c1d749dcf8cd02107022dd0f2b68 GIT binary patch literal 3212 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 bool) }; diff --git a/frontend/src/state/reducers/account.js b/frontend/src/state/reducers/account.js index 7fec06fb..365e2e98 100644 --- a/frontend/src/state/reducers/account.js +++ b/frontend/src/state/reducers/account.js @@ -1,9 +1,23 @@ const ReduxActions = require('redux-actions'); +const actions = require('@state/actions'); + const { handleActions } = ReduxActions; +const { + handleToggleAction +} = actions; + module.exports = handleActions({ - 'x': (state) => state // somehow handleActions needs at least one reducer + [handleToggleAction.toString()]: (state, action) => { + return { + ...state, + ui: { + ...state.ui, + 'profile_tooltip': !action.payload + } + }; + } }, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 62419e73..f504a7ea 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -8,6 +8,7 @@ const { } = reselect; const account = (state) => get(state, 'account.data', {}); +const accountUi = (state) => get(state, 'account.ui', {}); const orgUiSections = (state) => get(state, 'orgs.ui.sections', []); const projectUiSections = (state) => get(state, 'projects.ui.sections', []); const orgs = (state) => get(state, 'orgs.data', []); @@ -37,6 +38,7 @@ const orgSections = (orgId) => createSelector( module.exports = { accountSelector: account, + accountUISelector: accountUi, orgByIdSelector: orgById, orgsSelector: orgs, orgSectionsSelector: orgSections,