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

abstract exploreMapsBar into reusable navBar

Browse source
This commit is contained in:
Connor Turland 2017-10-13 13:58:21 -04:00
parent 55f2425501
commit a1d4c99ff6
14 changed files with 164 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/assets/stylesheets/clean.css.erb
View file

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

2
app/assets/stylesheets/mobile.scss.erb
View file

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

31
app/views/layouts/doorkeeper.html.erb
View file

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

14
app/views/notifications/_header.html.erb
View file

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

2
app/views/notifications/index.html.erb
View file

@ -76,5 +76,3 @@
</div>
<% end %>
</div>
<%= render partial: 'notifications/header' %>

6
app/views/notifications/show.html.erb
View file

@ -9,7 +9,7 @@
<h2 class="notification-title">
<% case @notification.notification_code
when MAP_ACCESS_REQUEST
request = @notification.notified_object
request = @notification.notified_object
map = request.map %>
<%= image_tag @notification.sender.image(:thirtytwo), class: 'thirty-two-avatar' %> <span style='font-weight:bold;' class='requesterName'><%= request.user.name %></span> wants to collaborate on map <span style='font-weight:bold;'><%= map.name %></span>
<% else %>
@ -24,7 +24,7 @@
<% if request.approved %>
You already responded to this access request, and allowed access.
<% elsif !request.approved %>
You already responded to this access request, and declined access. If you changed your mind, you can still grant
You already responded to this access request, and declined access. If you changed your mind, you can still grant
them access by going to the map and adding them as a collaborator.
<% end %>
<% else %>
@ -50,5 +50,3 @@
<% end %>
</div>
</div>
<%= render partial: 'notifications/header' %>

6
config/application.rb
View file

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

19
frontend/src/components/App/NavBar.js Normal file
View file

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

28
frontend/src/components/App/NavBarLink.js Normal file
View file

@ -0,0 +1,28 @@
import React, { Component } from 'react'
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
}
return (
<Link { ...otherProps } to={href} className={'navBarButton ' + linkClass}>
<div className="navBarIcon"></div>
{text}
</Link>
)
}
NavBarLink.propTypes = {
show: PropTypes.bool,
text: PropTypes.string,
href: PropTypes.string,
linkClass: PropTypes.string
}
export default NavBarLink

21
frontend/src/components/Apps/index.js Normal file
View file

@ -0,0 +1,21 @@
import React, { Component } from 'react'
import NavBar from '../App/Navbar'
import NavBarLink from '../App/NavBarLink'
class Apps extends Component {
render = () => {
const { currentUser } = this.props
return (
<NavBar>
{currentUser.get('admin') && <NavBarLink show href="/oauth/applications"
className="activeMaps" text="Registered Apps" />}
<NavBarLink show href="/oauth/authorized_applications"
linkClass="authedApps" text="Authorized Apps" />
<NavBarLink show href="/" linkClass="myMaps exploreMapsButton" text="Maps" />
</NavBar>
)
}
}
export default Apps

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

@ -1,30 +1,14 @@
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'
let forClass = title + 'Maps'
if (title === 'my' && section === 'mine' ||
title === section) forClass += ' active'
return forClass
@ -34,47 +18,41 @@ class Header extends Component {
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"
/>
<NavBar>
<NavBarLink show={explore}
href={signedIn ? '/' : '/explore/active'}
linkClass={activeClass('active')}
text="All Maps"
/>
<NavBarLink show={signedIn && explore}
href="/explore/mine"
linkClass={activeClass('my')}
text="My Maps"
/>
<NavBarLink show={signedIn && explore}
href="/explore/shared"
linkClass={activeClass('shared')}
text="Shared With Me"
/>
<NavBarLink show={signedIn && explore}
href="/explore/starred"
linkClass={activeClass('starred')}
text="Starred By Me"
/>
<NavBarLink 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>
</div>
</div>
</div>
{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>
) : null }
</NavBar>
)
}
}

1
frontend/src/components/Maps/index.js
View file

@ -6,7 +6,6 @@ import MapperCard from './MapperCard'
import MapCard from './MapCard'
class Maps extends Component {
static propTypes = {
section: PropTypes.string,
maps: PropTypes.object,

18
frontend/src/components/Notifications/index.js Normal file
View file

@ -0,0 +1,18 @@
import React, { Component } from 'react'
import NavBar from '../App/Navbar'
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 href="/" linkClass="myMaps" text="Maps" />
</NavBar>
)
}
}
export default Notifications

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

@ -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} />
<IndexRoute component={Apps} />
<Route path=":code" component={Apps} />
</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>