glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

bug fixes and make active class auto

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.scss.erb
View file

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

4
app/views/layouts/application.html.erb
View file

@ -6,10 +6,10 @@
#%> #%>
<%= render :partial => 'layouts/head' %> <%= 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> <div class="main" id="react-app"></div>
<%= yield %> <%= yield %>
<% if authenticated? %> <% if current_user %>
<% # for creating and pulling in topics and synapses %> <% # for creating and pulling in topics and synapses %>
<% if controller_name == 'maps' && action_name == "conversation" %> <% if controller_name == 'maps' && action_name == "conversation" %>
<%= render :partial => 'maps/newtopicsecret' %> <%= render :partial => 'maps/newtopicsecret' %>

6
config/application.rb
View file

@ -25,9 +25,9 @@ module Metamaps
config.encoding = 'utf-8' config.encoding = 'utf-8'
config.to_prepare do config.to_prepare do
Doorkeeper::ApplicationsController.layout "application" Doorkeeper::ApplicationsController.layout 'application'
Doorkeeper::AuthorizationsController.layout "application" Doorkeeper::AuthorizationsController.layout 'application'
Doorkeeper::AuthorizedApplicationsController.layout "application" Doorkeeper::AuthorizedApplicationsController.layout 'application'
Doorkeeper::ApplicationController.helper ApplicationHelper Doorkeeper::ApplicationController.helper ApplicationHelper
end end

71
frontend/src/components/App/NavBarLink.js
View file

@ -3,26 +3,63 @@ import PropTypes from 'prop-types'
import { Link } from 'react-router' import { Link } from 'react-router'
import _ from 'lodash' import _ from 'lodash'
const NavBarLink = props => { const PROP_LIST = [
const { show, text, href, linkClass } = props 'matchChildRoutes',
const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass']) 'hardReload',
if (!show) { 'show',
return null '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 ( static contextTypes = {
<Link { ...otherProps } to={href} className={'navBarButton ' + linkClass}> location: PropTypes.object
<div className="navBarIcon"></div> }
{text}
</Link>
)
}
NavBarLink.propTypes = { render = () => {
show: PropTypes.bool, const {
text: PropTypes.string, matchChildRoutes,
href: PropTypes.string, hardReload,
linkClass: PropTypes.string 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 export default NavBarLink

21
frontend/src/components/App/index.js
View file

@ -38,17 +38,38 @@ class App extends Component {
return {location} 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 () { render () {
const { children, toast, unreadNotificationsCount, openInviteLightbox, const { children, toast, unreadNotificationsCount, openInviteLightbox,
mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location, mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
map, userRequested, requestAnswered, requestApproved, serverData, map, userRequested, requestAnswered, requestApproved, serverData,
onRequestAccess, notifications, fetchNotifications, onRequestAccess, notifications, fetchNotifications,
markAsRead, markAsUnread } = this.props markAsRead, markAsUnread } = this.props
const { yieldHTML } = this.state
const { pathname } = location || {} const { pathname } = location || {}
// this fixes a bug that happens otherwise when you logout // this fixes a bug that happens otherwise when you logout
const currentUser = this.props.currentUser && this.props.currentUser.id ? this.props.currentUser : null const currentUser = this.props.currentUser && this.props.currentUser.id ? this.props.currentUser : null
const unauthedHome = pathname === '/' && !currentUser const unauthedHome = pathname === '/' && !currentUser
return <div className="wrapper" id="wrapper"> return <div className="wrapper" id="wrapper">
{yieldHTML && <div id="yield" dangerouslySetInnerHTML={{__html: yieldHTML}}></div>}
{mobile && <MobileHeader currentUser={currentUser} {mobile && <MobileHeader currentUser={currentUser}
unreadNotificationsCount={unreadNotificationsCount} unreadNotificationsCount={unreadNotificationsCount}
mobileTitle={mobileTitle} mobileTitle={mobileTitle}

11
frontend/src/components/Apps/index.js
View file

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

72
frontend/src/components/Maps/Header.js
View file

@ -7,51 +7,43 @@ class Header extends Component {
render = () => { render = () => {
const { signedIn, section, user } = this.props 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 explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
const mapper = section === 'mapper' const mapper = section === 'mapper'
return ( return (
<NavBar> <NavBar>
<NavBarLink show={explore} <NavBarLink show={explore}
href={signedIn ? '/' : '/explore/active'} href={signedIn ? '/' : '/explore/active'}
linkClass={activeClass('active')} linkClass="activeMaps"
text="All Maps" text="All Maps"
/> />
<NavBarLink show={signedIn && explore} <NavBarLink show={signedIn && explore}
href="/explore/mine" href="/explore/mine"
linkClass={activeClass('my')} linkClass="myMaps"
text="My Maps" text="My Maps"
/> />
<NavBarLink show={signedIn && explore} <NavBarLink show={signedIn && explore}
href="/explore/shared" href="/explore/shared"
linkClass={activeClass('shared')} linkClass="sharedMaps"
text="Shared With Me" text="Shared With Me"
/> />
<NavBarLink show={signedIn && explore} <NavBarLink show={signedIn && explore}
href="/explore/starred" href="/explore/starred"
linkClass={activeClass('starred')} linkClass="starredMaps"
text="Starred By Me" text="Starred By Me"
/> />
<NavBarLink show={!signedIn && explore} <NavBarLink show={!signedIn && explore}
href="/explore/featured" href="/explore/featured"
linkClass={activeClass('featured')} linkClass="featuredMaps"
text="Featured Maps" text="Featured Maps"
/> />
{mapper ? (
{mapper ? ( <div className='navBarButton active mapperButton'>
<div className='navBarButton active mapperButton'> {user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
{user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />} {user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>}
{user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>} <div className='clearfloat'></div>
<div className='clearfloat'></div> </div>
</div> ) : null }
) : null }
</NavBar> </NavBar>
) )
} }

5
frontend/src/components/Notifications/index.js
View file

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

4
frontend/src/components/makeRoutes.js
View file

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