From 12f0e5d501bb46c332958080d0680571d82faae8 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 30 Apr 2016 11:46:32 -0700 Subject: [PATCH] Simple header menu --- src/actions/SlackAuthAction.js | 4 +- src/actions/UserActions.js | 10 +++ src/components/Layout/Layout.js | 10 ++- src/components/Layout/Layout.scss | 14 +---- .../components/HeaderMenu/HeaderMenu.js | 63 +++++++++++++++++++ .../components/HeaderMenu/HeaderMenu.scss | 50 +++++++++++++++ .../Layout/components/HeaderMenu/index.js | 2 + src/utils/base-styles.scss | 3 + src/utils/constants.scss | 5 ++ 9 files changed, 145 insertions(+), 16 deletions(-) create mode 100644 src/components/Layout/components/HeaderMenu/HeaderMenu.js create mode 100644 src/components/Layout/components/HeaderMenu/HeaderMenu.scss create mode 100644 src/components/Layout/components/HeaderMenu/index.js create mode 100644 src/utils/constants.scss diff --git a/src/actions/SlackAuthAction.js b/src/actions/SlackAuthAction.js index f827e81a2..a01b762a2 100644 --- a/src/actions/SlackAuthAction.js +++ b/src/actions/SlackAuthAction.js @@ -1,5 +1,5 @@ import makeActionCreator from '../utils/actions'; -import { push } from 'react-router-redux'; +import { replace } from 'react-router-redux'; import { client } from 'utils/ApiClient'; import auth from 'utils/auth'; @@ -25,7 +25,7 @@ export function slackAuthAsync(code) { auth.setToken(data.data.accessToken); dispatch(updateUser(data.data.user)); dispatch(updateTeam(data.data.team)); - dispatch(push('/dashboard')); + dispatch(replace('/dashboard')); }) // .catch((err) => { // dispatch(push('/error')); diff --git a/src/actions/UserActions.js b/src/actions/UserActions.js index 1ccb4c47a..3f7ae3606 100644 --- a/src/actions/UserActions.js +++ b/src/actions/UserActions.js @@ -1,5 +1,15 @@ +import { push } from 'react-router-redux'; +import auth from 'utils/auth'; + import makeActionCreator from '../utils/actions'; export const UPDATE_USER = 'UPDATE_USER'; export const updateUser = makeActionCreator(UPDATE_USER, 'user'); + +export function logoutUser() { + return (dispatch) => { + auth.logout(); + dispatch(push('/')); + }; +}; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index e8e149e0b..e0e07f5ec 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -1,6 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; +import HeaderMenu from './components/HeaderMenu'; + import styles from './Layout.scss'; class Layout extends React.Component { @@ -13,9 +15,9 @@ class Layout extends React.Component {
Coinbase
-
+ -
+
{ this.props.children } @@ -31,4 +33,6 @@ const mapStateToProps = (state) => { } }; -export default connect(mapStateToProps)(Layout); \ No newline at end of file +export default connect( + mapStateToProps, +)(Layout); \ No newline at end of file diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 15052061d..bfa06a599 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -21,15 +21,7 @@ font-weight: bold; } -.user { - - img { - height: 24px; - width: 24px; - border-radius: 12px; - } -} - .content { - flex: 1; -} \ No newline at end of file + display: flex; + justify-content: center; +} diff --git a/src/components/Layout/components/HeaderMenu/HeaderMenu.js b/src/components/Layout/components/HeaderMenu/HeaderMenu.js new file mode 100644 index 000000000..4abc3cba2 --- /dev/null +++ b/src/components/Layout/components/HeaderMenu/HeaderMenu.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { logoutUser } from 'actions/UserActions'; + +import styles from './HeaderMenu.scss'; + +class HeaderMenu extends React.Component { + static propTypes = { + children: React.PropTypes.node.isRequired, + } + + state = { + menuVisible: false, + } + + onMouseEnter = () => { + this.setState({ menuVisible: true }); + } + + onMouseLeave = () => { + this.setState({ menuVisible: false }); + } + + logout = (event) => { + event.preventDefault(); + this.props.logout(); + } + + render() { + return ( +
+
+ { this.props.children } +
+ + { this.state.menuVisible ? ( +
+ +
+ ) : null } +
+ ); + } +}; + +const mapDispatchToProps = (dispatch) => { + return { + logout: () => { + dispatch(logoutUser()) + }, + } +}; + + +export default connect(null, mapDispatchToProps)(HeaderMenu); \ No newline at end of file diff --git a/src/components/Layout/components/HeaderMenu/HeaderMenu.scss b/src/components/Layout/components/HeaderMenu/HeaderMenu.scss new file mode 100644 index 000000000..cf0882bd1 --- /dev/null +++ b/src/components/Layout/components/HeaderMenu/HeaderMenu.scss @@ -0,0 +1,50 @@ +@import '../../../../utils/constants.scss'; + +.content { + display: flex; + justify-content: center; + align-items: center; + + min-height: 43px; + min-width: 43px; +} + +.menu { + position: relative; + + img { + height: 24px; + width: 24px; + border-radius: 12px; + } + + .menu { + position: absolute; + top: 42px; + right: 0; + z-index: 1000; + border: 1px solid #eee; + + ul { + margin: 0; + padding: 5px 0; + font-size: 0.9em; + } + + li { + margin: 0; + padding: 0; + list-style-type: none; + + a { + display: flex; + margin: 0; + padding: 5px 10px; + min-width: 150px; + + color: $textColor; + text-decoration: none; + } + } + } +} \ No newline at end of file diff --git a/src/components/Layout/components/HeaderMenu/index.js b/src/components/Layout/components/HeaderMenu/index.js new file mode 100644 index 000000000..cc2de652b --- /dev/null +++ b/src/components/Layout/components/HeaderMenu/index.js @@ -0,0 +1,2 @@ +import HeaderMenu from './HeaderMenu'; +export default HeaderMenu; \ No newline at end of file diff --git a/src/utils/base-styles.scss b/src/utils/base-styles.scss index 8b6a0ea39..a5c9427d4 100644 --- a/src/utils/base-styles.scss +++ b/src/utils/base-styles.scss @@ -1,3 +1,5 @@ +@import './constants.scss'; + * { box-sizing: border-box; } @@ -10,6 +12,7 @@ html, body, .viewport { html, body { font-family: 'Atlas Grotesk', 'Helvetica Neue', sans-serif; + color: $textColor; } a { diff --git a/src/utils/constants.scss b/src/utils/constants.scss new file mode 100644 index 000000000..e9e3db7e2 --- /dev/null +++ b/src/utils/constants.scss @@ -0,0 +1,5 @@ +$textColor: #171B35; + +:export { + textColor: $textColor; +} \ No newline at end of file