diff --git a/ui/src/side_nav/components/UserNavBlock.js b/ui/src/side_nav/components/UserNavBlock.js new file mode 100644 index 0000000000..60cc67c734 --- /dev/null +++ b/ui/src/side_nav/components/UserNavBlock.js @@ -0,0 +1,63 @@ +import React, {PropTypes, Component} from 'react' +import {connect} from 'react-redux' + +class UserNavBlock extends Component { + constructor(props) { + super(props) + } + + render() { + const {logoutLink, customLinks, me} = this.props + + return ( +
+
+
+
+
+
+ {me.name} +
+
Organizations
+ + OrganizationName1 (Viewer) + + + OrganizationName2 (Editor) + + + Logout + + {customLinks ?
: null} + {customLinks + ?
Custom Links
+ : null} + {customLinks + ? customLinks.map((link, i) => + + {link.name} + + ) + : null} +
+
+
+ ) + } +} + +const {array, shape, string} = PropTypes + +UserNavBlock.propTypes = { + customLinks: array, + logoutLink: string.isRequired, + me: shape({ + name: string.isRequired, + }), +} + +const mapStateToProps = ({auth: {me}}) => ({ + me, +}) + +export default connect(mapStateToProps)(UserNavBlock) diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js index 71f5f7e626..fe30371663 100644 --- a/ui/src/side_nav/containers/SideNav.js +++ b/ui/src/side_nav/containers/SideNav.js @@ -4,6 +4,7 @@ import {connect} from 'react-redux' import Authorized, {ADMIN_ROLE} from 'src/auth/Authorized' +import UserNavBlock from 'src/side_nav/components/UserNavBlock' import { NavBar, NavBlock, @@ -34,31 +35,6 @@ const SideNav = React.createClass({ ), }, - renderUserMenuBlockWithCustomLinks(customLinks, logoutLink) { - return [ - , - ...customLinks - .sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase()) - .map(({name, url}, i) => - - {name} - - ), - - Logout - , - ] - }, - render() { const { params: {sourceID}, @@ -152,18 +128,7 @@ const SideNav = React.createClass({ /> {isUsingAuth - ? - {customLinks - ? this.renderUserMenuBlockWithCustomLinks( - customLinks, - logoutLink - ) - : } - + ? : null} }, diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss index 5ff2503fa5..26261ad99c 100644 --- a/ui/src/style/layout/sidebar.scss +++ b/ui/src/style/layout/sidebar.scss @@ -151,6 +151,7 @@ $sidebar-menu--gutter: 18px; cursor: pointer; } } +.sidebar-menu--item, .sidebar-menu--item:link, .sidebar-menu--item:active, .sidebar-menu--item:visited { @@ -163,13 +164,15 @@ $sidebar-menu--gutter: 18px; transition: none; // Rounding bottom outside corner of match container - &:last-child {border-bottom-right-radius: $radius;} + &:nth-last-child(2) {border-bottom-right-radius: $radius;} } +.sidebar-menu--item.active, .sidebar-menu--item.active:link, .sidebar-menu--item.active:active, .sidebar-menu--item.active:visited { @include gradient-h($sidebar-menu--item-bg,$sidebar-menu--item-bg-accent); color: $sidebar-menu--item-text-active; + font-weight: 700; } .sidebar-menu--item:hover, .sidebar-menu--item.active:hover { @@ -188,6 +191,9 @@ $sidebar-menu--gutter: 18px; font-weight: 400; padding: 0px $sidebar-menu--gutter; } +.sidebar-menu--item > strong { + opacity: 0.6; +} // Invisible triangle for easier mouse movement when navigating to sub items .sidebar-menu--item + .sidebar-menu--triangle { position: absolute; @@ -198,3 +204,17 @@ $sidebar-menu--gutter: 18px; left: 0px; transform: translate(-50%,-50%) rotate(45deg); } +.sidebar-menu--divider { + width: 100%; + height: 2px; + @include gradient-h($c-laser,$c-potassium); +} +.sidebar-menu--section { + white-space: nowrap; + font-size: 13px; + line-height: 22px; + font-weight: 600; + padding: 4px $sidebar-menu--gutter; + text-transform: uppercase; + color: $c-hydrogen; +}