bug fixes and make active class auto

This commit is contained in:
Connor Turland 2017-10-14 12:03:05 -04:00
parent a1d4c99ff6
commit 693e6f5e10
9 changed files with 124 additions and 71 deletions

View file

@ -826,6 +826,7 @@ label {
font-size: 14px;
line-height: 14px;
color: #757575;
cursor: pointer;
}
.accountListItem:hover {
color: #424242;

View file

@ -6,10 +6,10 @@
#%>
<%= render :partial => 'layouts/head' %>
<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
<body class="<%= current_user ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
<div class="main" id="react-app"></div>
<%= 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' %>

View file

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

View file

@ -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'
]
return (
<Link { ...otherProps } to={href} className={'navBarButton ' + linkClass}>
<div className="navBarIcon"></div>
{text}
</Link>
)
}
NavBarLink.propTypes = {
class NavBarLink extends Component {
static propTypes = {
matchChildRoutes: PropTypes.bool,
hardReload: PropTypes.bool,
show: PropTypes.bool,
text: PropTypes.string,
href: PropTypes.string,
linkClass: PropTypes.string
}
static contextTypes = {
location: PropTypes.object
}
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 (
<a { ...otherProps } href={href} className={classes.join(' ')}>
<div className="navBarIcon"></div>
{text}
</a>
)
}
return (
<Link { ...otherProps } to={href} className={classes.join(' ')}>
<div className="navBarIcon"></div>
{text}
</Link>
)
}
}
export default NavBarLink

View file

@ -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 <div className="wrapper" id="wrapper">
{yieldHTML && <div id="yield" dangerouslySetInnerHTML={{__html: yieldHTML}}></div>}
{mobile && <MobileHeader currentUser={currentUser}
unreadNotificationsCount={unreadNotificationsCount}
mobileTitle={mobileTitle}

View file

@ -1,4 +1,5 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import NavBar from '../App/Navbar'
import NavBarLink from '../App/NavBarLink'
@ -8,11 +9,13 @@ class Apps extends Component {
return (
<NavBar>
{currentUser.get('admin') && <NavBarLink show href="/oauth/applications"
className="activeMaps" text="Registered Apps" />}
<NavBarLink show href="/oauth/authorized_applications"
{currentUser && currentUser.get('admin') && <NavBarLink show hardReload
matchChildRoutes href="/oauth/applications" linkClass="activeMaps"
text="Registered Apps" />}
<NavBarLink show hardReload matchChildRoutes
href="/oauth/authorized_applications"
linkClass="authedApps" text="Authorized Apps" />
<NavBarLink show href="/" linkClass="myMaps exploreMapsButton" text="Maps" />
<NavBarLink show href="/" linkClass="myMaps" text="Maps" />
</NavBar>
)
}

View file

@ -7,13 +7,6 @@ class Header extends Component {
render = () => {
const { signedIn, section, user } = this.props
const activeClass = (title) => {
let forClass = title + 'Maps'
if (title === 'my' && section === 'mine' ||
title === section) forClass += ' active'
return forClass
}
const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
const mapper = section === 'mapper'
@ -21,30 +14,29 @@ class Header extends Component {
<NavBar>
<NavBarLink show={explore}
href={signedIn ? '/' : '/explore/active'}
linkClass={activeClass('active')}
linkClass="activeMaps"
text="All Maps"
/>
<NavBarLink show={signedIn && explore}
href="/explore/mine"
linkClass={activeClass('my')}
linkClass="myMaps"
text="My Maps"
/>
<NavBarLink show={signedIn && explore}
href="/explore/shared"
linkClass={activeClass('shared')}
linkClass="sharedMaps"
text="Shared With Me"
/>
<NavBarLink show={signedIn && explore}
href="/explore/starred"
linkClass={activeClass('starred')}
linkClass="starredMaps"
text="Starred By Me"
/>
<NavBarLink show={!signedIn && explore}
href="/explore/featured"
linkClass={activeClass('featured')}
linkClass="featuredMaps"
text="Featured Maps"
/>
{mapper ? (
<div className='navBarButton active mapperButton'>
{user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}

View file

@ -4,11 +4,10 @@ import NavBarLink from '../App/NavBarLink'
class Notifications extends Component {
render = () => {
const { currentUser } = this.props
return (
<NavBar>
<NavBarLink show href="/notifications"
linkClass="notificationsLink active" text="Notifications" />
<NavBarLink show matchChildRoutes href="/notifications"
linkClass="notificationsLink" text="Notifications" />
<NavBarLink show href="/" linkClass="myMaps" text="Maps" />
</NavBar>
)

View file

@ -54,8 +54,8 @@ export default function makeRoutes (currentUser) {
<Route path="oauth">
<Route path="token/info" component={Apps} />
<Route path="authorize">
<IndexRoute component={Apps} />
<Route path=":code" component={Apps} />
<IndexRoute component={nullComponent} />
<Route path=":code" component={nullComponent} />
</Route>
<Route path="authorized_applications">
<IndexRoute component={Apps} />