Merge pull request #1148 from metamaps/feature/refactor.nav.bar

rename exploreMapsBar into reusable navBar
2017-10-14 12:30:29 -04:00 · 2017-10-14 12:30:29 -04:00 · 76c727cd61
parent 55f2425501 693e6f5e10
commit 76c727cd61
17 changed files with 223 additions and 154 deletions
--- 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;
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@ -668,19 +668,19 @@
  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }

-#exploreMapsHeader {
+#navBar {
  position: absolute;
  width: 100%;
 }

-.exploreMapsBar {
+.navBarContainer {
  z-index:2;
  background-color:#FAFAFA;
  height: 42px;
  padding-top: 52px;
 }

-.exploreMapsMenu {
+.navBarMenu {
  display: block;
  width: 100%;
  height:42px;
@ -689,11 +689,11 @@
  text-align: center;
 }

-.exploreMapsCenter {
+.navBarCenter {
   display: block;
 }

-.exploreMapsButton {
+.navBarButton {
    color: #757575;
 	cursor: default;
 	font-weight: normal;
@ -706,13 +706,13 @@
    cursor: pointer;
    position:relative;
 }
-.exploreMapsButton:hover, .exploreMapsButton.active {
+.navBarButton:hover, .navBarButton.active {
  text-decoration: none;
  color: #424242;
  border-bottom: 2px solid #00BCD4;
 }

-.exploreMapsButton.mapperButton {
+.navBarButton.mapperButton {
    height: 40px;
    padding: 0;
 }
@ -729,7 +729,7 @@
 }


-.exploreMapsButton .exploreMapsIcon {
+.navBarButton .navBarIcon {
    background-repeat: no-repeat;
    width:32px;
    height:32px;
@ -738,53 +738,53 @@
    left:5px;
 }

-.exploreMapsCenter .authedApps .exploreMapsIcon {
+.navBarCenter .authedApps .navBarIcon {
    background-image: url(<%= asset_path('user_sprite.png') %>);
    background-position: 0 -32px;
 }
-.exploreMapsCenter .myMaps .exploreMapsIcon {
+.navBarCenter .myMaps .navBarIcon {
    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
    background-position: -32px 0;
 }
-.exploreMapsCenter .sharedMaps .exploreMapsIcon {
+.navBarCenter .sharedMaps .navBarIcon {
    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
    background-position: -128px 0;
 }
-.exploreMapsCenter .activeMaps .exploreMapsIcon {
+.navBarCenter .activeMaps .navBarIcon {
    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
    background-position: 0 0;
 }
-.exploreMapsCenter .featuredMaps .exploreMapsIcon {
+.navBarCenter .featuredMaps .navBarIcon {
    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
    background-position: -96px 0;
 }
-.exploreMapsCenter .starredMaps .exploreMapsIcon {
+.navBarCenter .starredMaps .navBarIcon {
    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
    background-position: -96px 0;
 }
-.exploreMapsCenter .notificationsLink .exploreMapsIcon {
+.navBarCenter .notificationsLink .navBarIcon {
    background-image: url(<%= asset_path 'topright_sprite.png' %>);
    background-position: -128px 0;
 }
-.authedApps:hover .exploreMapsIcon, .authedApps.active .exploreMapsIcon {
+.authedApps:hover .navBarIcon, .authedApps.active .navBarIcon {
    background-position-x: -32px;
 }
-.myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon {
+.myMaps:hover .navBarIcon, .myMaps.active .navBarIcon {
    background-position: -32px -32px;
 }
-.activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon {
+.activeMaps:hover .navBarIcon, .activeMaps.active .navBarIcon {
    background-position: 0 -32px;
 }
-.featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon {
+.featuredMaps:hover .navBarIcon, .featuredMaps.active .navBarIcon {
    background-position: -96px -32px;
 }
-.starredMaps:hover .exploreMapsIcon, .starredMaps.active .exploreMapsIcon {
+.starredMaps:hover .navBarIcon, .starredMaps.active .navBarIcon {
    background-position: -96px -32px;
 }
-.sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
+.sharedMaps:hover .navBarIcon, .sharedMaps.active .navBarIcon {
    background-position: -128px -32px;
 }
-.notificationsLink:hover .exploreMapsIcon, .notificationsLink.active .exploreMapsIcon {
+.notificationsLink:hover .navBarIcon, .notificationsLink.active .navBarIcon {
    background-position-y: -32px;
 }

--- a/app/assets/stylesheets/mobile.scss.erb
+++ b/app/assets/stylesheets/mobile.scss.erb
@ -32,7 +32,7 @@

 /* Smartphones (portrait and landscape) ----------- the minimum space that two map cards can fit side by side */
@media only screen and (max-width : 504px) {
-  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #exploreMapsHeader {
+  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #navBar {
    display: none !important;
  }

--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -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' %>
--- a/app/views/layouts/doorkeeper.html.erb
+++ b/app/views/layouts/doorkeeper.html.erb
@ -1,31 +0,0 @@
-<%#
-# @file
-# Main application file. Holds scaffolding present on every page.
-# Then a certain non-partial view (no _ preceding filename) will be
-# displayed within, based on URL
-#%>
-
-<%= render :partial => 'layouts/head' %>
-<body class="<%= current_user ? 'authenticated' : 'unauthenticated' %>">
-  <div class="main" id="react-app"></div>
-  <%= yield %>
-  <div id="exploreMapsHeader">
-      <div class="exploreMapsBar exploreElement">
-          <div class="exploreMapsMenu">
-              <div class="exploreMapsCenter">
-                <% if current_user && current_user.admin %>
-                  <a href="<%= oauth_applications_path %>" class="activeMaps exploreMapsButton <%= params[:controller] == 'doorkeeper/applications' ? 'active' : nil %>">
-                      <div class="exploreMapsIcon"></div>Registered Apps
-                  </a>
-                <% end %>
-                  <a href="<%= oauth_authorized_applications_path %>" class="authedApps exploreMapsButton <%= params[:controller] == 'doorkeeper/authorized_applications' ? 'active' : nil %>">
-                      <div class="exploreMapsIcon"></div>Authorized Apps
-                  </a>
-                  <a href="/" class="myMaps exploreMapsButton">
-                      <div class="exploreMapsIcon"></div>Maps
-                  </a>
-              </div>
-          </div>
-      </div>
-  </div>
-<%= render :partial => 'layouts/foot' %>
--- a/app/views/notifications/_header.html.erb
+++ b/app/views/notifications/_header.html.erb
@ -1,14 +0,0 @@
-<div id="exploreMapsHeader">
-  <div class="exploreMapsBar exploreElement">
-    <div class="exploreMapsMenu">
-      <div class="exploreMapsCenter">
-        <a href="<%= notifications_path %>" class="notificationsLink exploreMapsButton active">
-          <div class="exploreMapsIcon"></div>Notifications
-        </a>
-        <a href="/" class="exploreMapsButton myMaps">
-          <div class="exploreMapsIcon"></div>Maps
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@ -76,5 +76,3 @@
    </div>
  <% end %>
 </div>
-
-<%= render partial: 'notifications/header' %>
--- a/app/views/notifications/show.html.erb
+++ b/app/views/notifications/show.html.erb
@ -50,5 +50,3 @@
     <% end %>
  </div>
 </div>
-
-<%= render partial: 'notifications/header' %>
--- 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 'doorkeeper'
-      Doorkeeper::AuthorizationsController.layout 'doorkeeper'
-      Doorkeeper::AuthorizedApplicationsController.layout 'doorkeeper'
+      Doorkeeper::ApplicationsController.layout 'application'
+      Doorkeeper::AuthorizationsController.layout 'application'
+      Doorkeeper::AuthorizedApplicationsController.layout 'application'
      Doorkeeper::ApplicationController.helper ApplicationHelper
    end

--- a/frontend/src/components/App/NavBar.js
+++ b/frontend/src/components/App/NavBar.js
@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+class NavBar extends Component {
+  render() {
+    return (
+      <div id="navBar">
+        <div className="navBarContainer">
+          <div className="navBarMenu">
+            <div className="navBarCenter">
+              {this.props.children}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default NavBar
--- a/frontend/src/components/App/NavBarLink.js
+++ b/frontend/src/components/App/NavBarLink.js
@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router'
+import _ from 'lodash'
+
+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
+  }
+
+  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
--- 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 <div className="wrapper" id="wrapper">
+      {yieldHTML && <div id="yield" dangerouslySetInnerHTML={{__html: yieldHTML}}></div>}
      {mobile && <MobileHeader currentUser={currentUser}
                               unreadNotificationsCount={unreadNotificationsCount}
                               mobileTitle={mobileTitle}
--- a/frontend/src/components/Apps/index.js
+++ b/frontend/src/components/Apps/index.js
@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import NavBar from '../App/Navbar'
+import NavBarLink from '../App/NavBarLink'
+
+class Apps extends Component {
+  render = () => {
+    const { currentUser } = this.props
+
+    return (
+      <NavBar>
+        {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" text="Maps" />
+      </NavBar>
+    )
+  }
+}
+
+export default Apps
--- a/frontend/src/components/Maps/Header.js
+++ b/frontend/src/components/Maps/Header.js
@ -1,80 +1,50 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router'
-import _ from 'lodash'
-
-const MapLink = props => {
-  const { show, text, href, linkClass } = props
-  const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
-  if (!show) {
-    return null
-  }
-
-  return (
-    <Link { ...otherProps } to={href} className={linkClass}>
-      <div className="exploreMapsIcon"></div>
-      {text}
-    </Link>
-  )
-}
+import NavBar from '../App/Navbar'
+import NavBarLink from '../App/NavBarLink'

 class Header extends Component {
  render = () => {
    const { signedIn, section, user } = this.props

-    const activeClass = (title) => {
-      let forClass = 'exploreMapsButton'
-      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'

    return (
-      <div id="exploreMapsHeader">
-        <div className="exploreMapsBar exploreElement">
-          <div className="exploreMapsMenu">
-            <div className="exploreMapsCenter">
-              <MapLink show={explore}
-                href={signedIn ? '/' : '/explore/active'}
-                linkClass={activeClass('active')}
-                text="All Maps"
-              />
-              <MapLink show={signedIn && explore}
-                href="/explore/mine"
-                linkClass={activeClass('my')}
-                text="My Maps"
-              />
-              <MapLink show={signedIn && explore}
-                href="/explore/shared"
-                linkClass={activeClass('shared')}
-                text="Shared With Me"
-              />
-              <MapLink show={signedIn && explore}
-                href="/explore/starred"
-                linkClass={activeClass('starred')}
-                text="Starred By Me"
-              />
-              <MapLink show={!signedIn && explore}
-                href="/explore/featured"
-                linkClass={activeClass('featured')}
-                text="Featured Maps"
-              />
-
-              {mapper ? (
-                <div className='exploreMapsButton active mapperButton'>
-                  {user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
-                  {user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>}
-                  <div className='clearfloat'></div>
-                </div>
-              ) : null }
-            </div>
+      <NavBar>
+        <NavBarLink show={explore}
+          href={signedIn ? '/' : '/explore/active'}
+          linkClass="activeMaps"
+          text="All Maps"
+          />
+        <NavBarLink show={signedIn && explore}
+          href="/explore/mine"
+          linkClass="myMaps"
+          text="My Maps"
+          />
+        <NavBarLink show={signedIn && explore}
+          href="/explore/shared"
+          linkClass="sharedMaps"
+          text="Shared With Me"
+          />
+        <NavBarLink show={signedIn && explore}
+          href="/explore/starred"
+          linkClass="starredMaps"
+          text="Starred By Me"
+          />
+        <NavBarLink show={!signedIn && explore}
+          href="/explore/featured"
+          linkClass="featuredMaps"
+          text="Featured Maps"
+          />
+        {mapper ? (
+          <div className='navBarButton active mapperButton'>
+            {user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
+            {user && <div className='exploreMapperName'>{user.name}&rsquo;s Maps</div>}
+            <div className='clearfloat'></div>
          </div>
-        </div>
-      </div>
+        ) : null }
+      </NavBar>
    )
  }
 }
--- a/frontend/src/components/Maps/index.js
+++ b/frontend/src/components/Maps/index.js
@ -6,7 +6,6 @@ import MapperCard from './MapperCard'
 import MapCard from './MapCard'

 class Maps extends Component {
-
  static propTypes = {
    section: PropTypes.string,
    maps: PropTypes.object,
--- a/frontend/src/components/Notifications/index.js
+++ b/frontend/src/components/Notifications/index.js
@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import NavBar from '../App/Navbar'
+import NavBarLink from '../App/NavBarLink'
+
+class Notifications extends Component {
+  render = () => {
+    return (
+      <NavBar>
+        <NavBarLink show matchChildRoutes href="/notifications"
+          linkClass="notificationsLink" text="Notifications" />
+        <NavBarLink show href="/" linkClass="myMaps" text="Maps" />
+      </NavBar>
+    )
+  }
+}
+
+export default Notifications
--- a/frontend/src/components/makeRoutes.js
+++ b/frontend/src/components/makeRoutes.js
@ -1,8 +1,10 @@
 import React from 'react'
 import { Route, IndexRoute } from 'react-router'
 import App from './App'
+import Apps from './Apps'
 import Maps from './Maps'
 import MapView from './MapView'
+import Notifications from './Notifications'
 import TopicView from './TopicView'

 function nullComponent(props) {
@ -31,8 +33,8 @@ export default function makeRoutes (currentUser) {
    <Route path="join" component={nullComponent} />
    <Route path="request" component={nullComponent} />
    <Route path="notifications">
-      <IndexRoute component={nullComponent} />
-      <Route path=":id" component={nullComponent} />
+      <IndexRoute component={Notifications} />
+      <Route path=":id" component={Notifications} />
    </Route>
    <Route path="users">
      <Route path=":id/edit" component={nullComponent} />
@ -50,20 +52,20 @@ export default function makeRoutes (currentUser) {
      <Route path=":id/edit" component={nullComponent} />
    </Route>
    <Route path="oauth">
-      <Route path="token/info" component={nullComponent} />
+      <Route path="token/info" component={Apps} />
      <Route path="authorize">
        <IndexRoute component={nullComponent} />
        <Route path=":code" component={nullComponent} />
      </Route>
      <Route path="authorized_applications">
-        <IndexRoute component={nullComponent} />
-        <Route path=":id" component={nullComponent} />
+        <IndexRoute component={Apps} />
+        <Route path=":id" component={Apps} />
      </Route>
      <Route path="applications">
-        <IndexRoute component={nullComponent} />
-        <Route path="new" component={nullComponent} />
-        <Route path=":id" component={nullComponent} />
-        <Route path=":id/edit" component={nullComponent} />
+        <IndexRoute component={Apps} />
+        <Route path="new" component={Apps} />
+        <Route path=":id" component={Apps} />
+        <Route path=":id/edit" component={Apps} />
      </Route>
    </Route>
  </Route>