diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index d255b652..11330ef9 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/app/assets/stylesheets/application.scss.erb @@ -826,6 +826,7 @@ label { font-size: 14px; line-height: 14px; color: #757575; + cursor: pointer; } .accountListItem:hover { color: #424242; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 3ebbbad6..340874fc 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,10 +6,10 @@ #%> <%= render :partial => 'layouts/head' %> -
controller-<%= controller_name %> action-<%= action_name %>"> + controller-<%= controller_name %> action-<%= action_name %>"> <%= yield %> - <% if authenticated? %> + <% if current_user %> <% # for creating and pulling in topics and synapses %> <% if controller_name == 'maps' && action_name == "conversation" %> <%= render :partial => 'maps/newtopicsecret' %> diff --git a/config/application.rb b/config/application.rb index 715ee8af..06842eb6 100644 --- a/config/application.rb +++ b/config/application.rb @@ -25,9 +25,9 @@ module Metamaps config.encoding = 'utf-8' config.to_prepare do - Doorkeeper::ApplicationsController.layout "application" - Doorkeeper::AuthorizationsController.layout "application" - Doorkeeper::AuthorizedApplicationsController.layout "application" + Doorkeeper::ApplicationsController.layout 'application' + Doorkeeper::AuthorizationsController.layout 'application' + Doorkeeper::AuthorizedApplicationsController.layout 'application' Doorkeeper::ApplicationController.helper ApplicationHelper end diff --git a/frontend/src/components/App/NavBarLink.js b/frontend/src/components/App/NavBarLink.js index ff0856e7..033de2e9 100644 --- a/frontend/src/components/App/NavBarLink.js +++ b/frontend/src/components/App/NavBarLink.js @@ -3,26 +3,63 @@ import PropTypes from 'prop-types' import { Link } from 'react-router' import _ from 'lodash' -const NavBarLink = props => { - const { show, text, href, linkClass } = props - const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass']) - if (!show) { - return null +const PROP_LIST = [ + 'matchChildRoutes', + 'hardReload', + 'show', + 'text', + 'href', + 'linkClass' +] + +class NavBarLink extends Component { + static propTypes = { + matchChildRoutes: PropTypes.bool, + hardReload: PropTypes.bool, + show: PropTypes.bool, + text: PropTypes.string, + href: PropTypes.string, + linkClass: PropTypes.string } - return ( - - - {text} - - ) -} + static contextTypes = { + location: PropTypes.object + } -NavBarLink.propTypes = { - show: PropTypes.bool, - text: PropTypes.string, - href: PropTypes.string, - linkClass: PropTypes.string + render = () => { + const { + matchChildRoutes, + hardReload, + show, + text, + href, + linkClass + } = this.props + const { location } = this.context + const otherProps = _.omit(this.props, PROP_LIST) + const classes = ['navBarButton', linkClass] + const active = matchChildRoutes ? + location.pathname.startsWith(href) : + location.pathname === href + if (active) classes.push('active') + if (!show) { + return null + } + if (hardReload) { + return ( + + + {text} + + ) + } + return ( + + + {text} + + ) + } } export default NavBarLink diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js index 9d4d3ee0..9a830255 100644 --- a/frontend/src/components/App/index.js +++ b/frontend/src/components/App/index.js @@ -38,17 +38,38 @@ class App extends Component { return {location} } + constructor (props) { + super(props) + this.state = { + yieldHTML: null + } + } + + componentDidMount () { + this.setYield() + } + + setYield () { + const yieldHTML = document.getElementById('yield') + if (yieldHTML) { + this.setState({yieldHTML: yieldHTML.innerHTML}) + document.body.removeChild(yieldHTML) + } + } + render () { const { children, toast, unreadNotificationsCount, openInviteLightbox, mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location, map, userRequested, requestAnswered, requestApproved, serverData, onRequestAccess, notifications, fetchNotifications, markAsRead, markAsUnread } = this.props + const { yieldHTML } = this.state const { pathname } = location || {} // this fixes a bug that happens otherwise when you logout const currentUser = this.props.currentUser && this.props.currentUser.id ? this.props.currentUser : null const unauthedHome = pathname === '/' && !currentUser return