Skip to content

Commit

Permalink
Merged entire oam-uploader repo
Browse files Browse the repository at this point in the history
This is the first step in the merge. Everything works but there
is some redundancy and minor TODOs. The main issue is the duplication
of CSS, see: styles/uploader/*. Consolidating the CSS will also require
bringing the uploader design in line with the browser.

I did manage to fairly easily consolidate the collecticons, but there
were 2 missing icons oam-design-system for dropbox and gdrive, see:
styles/uploader/_buttons.scss.

The merge includes commit history.

Touches #220
Closes hotosm/oam-uploader#76
  • Loading branch information
tombh committed Jun 1, 2017
1 parent 935a84f commit 74d1479
Show file tree
Hide file tree
Showing 37 changed files with 4,242 additions and 130 deletions.
4 changes: 2 additions & 2 deletions .build_scripts/build.sh
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
#!/usr/bin/env bash
set -e # halt script on error

# If this is the production branch, build it with
# If this is the production branch, build it with
# the production environment, otherwise use staging
if [ $TRAVIS_BRANCH = ${DEPLOY_BRANCH} ]; then
echo "We're going live with production!"
npm run build
else
echo "Building based on staging environment"
npm run stage
fi
fi
2 changes: 2 additions & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Ensure that all text files have their line endings normalized
* text=auto
89 changes: 2 additions & 87 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,101 +1,16 @@
################################################
############### .gitignore ##################
################################################
#
# This file is only relevant if you are using git.
#
# Files which match the splat patterns below will
# be ignored by git. This keeps random crap and
# and sensitive credentials from being uploaded to
# your repository. It allows you to configure your
# app for your machine without accidentally
# committing settings which will smash the local
# settings of other developers on your team.
#
# Some reasonable defaults are included below,
# but, of course, you should modify/extend/prune
# to fit your needs!
################################################


################################################
# Local Configuration
#
# Explicitly ignore files which contain:
#
# 1. Sensitive information you'd rather not push to
# your git repository.
# e.g., your personal API keys or passwords.
#
# 2. Environment-specific configuration
# Basically, anything that would be annoying
# to have to change every time you do a
# `git pull`
# e.g., your local development database, or
# the S3 bucket you're using for file uploads
# development.
#
################################################

app/assets/scripts/config/local.js

################################################
# Dependencies
#
# When releasing a production app, you may
# consider including your node_modules and
# bower_components directory in your git repo,
# but during development, its best to exclude it,
# since different developers may be working on
# different kernels, where dependencies would
# need to be recompiled anyway.
#
# More on that here about node_modules dir:
# http://www.futurealoof.com/posts/nodemodules-in-git.html
# (credit Mikeal Rogers, @mikeal)
#
# About bower_components dir, you can see this:
# http://addyosmani.com/blog/checking-in-front-end-dependencies/
# (credit Addy Osmani, @addyosmani)
#
################################################

node_modules
bower_components
.sass-cache
.bundle
bundle

################################################
# Build Files
#
# Common files generated by Node, NPM, and the
# other build related ecosystem.
################################################

test/integration/error_screenshots
lib-cov
*.seed
*.log
*.out
*.pid
npm-debug.log


################################################
# Apidocs
#
# Common files generated by apidocs and other docs
################################################



################################################
# Miscellaneous
#
# Common files generated by text editors,
# operating systems, file systems, etc.
################################################

*~
*#
.DS_STORE
Expand All @@ -109,4 +24,4 @@ temp
tmp
.tmp
dist
test/integration/error_screenshots
test/bower_components
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ language: node_js
branches:
only:
- develop
- master
- master

env:
global:
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
BSD 3-Clause License

Copyright (c) 2017, Development Seed
Copyright (c) Humanitarian Open Street Map Team
All rights reserved.

Redistribution and use in source and binary forms, with or without
Expand Down
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<h1 align="center">OAM Imagery Browser</h1>

<a href="https://travis-ci.org/hotosm/oam-browser">
Expand All @@ -22,7 +21,7 @@ The OAM Imagery Browser is a part of the [OpenAerialMap](https://github.com/hoto

Submit any issues and feedback regarding the imagery browser in the [issue tracker](https://github.com/hotosm/oam-browser/issues).

Access the site at http://beta.openaerialmap.org.
Access the site at http://openaerialmap.org.


## Installation and Usage
Expand Down Expand Up @@ -68,6 +67,9 @@ The following options must be set: (The used file will depend on the context)
- `initialView` - Coordinates for the initial view in format `[lng, lat]`
- `catalog.url` - The [OAM catalog](https://github.com/hotosm/oam-catalog) url (no trailing slash).
- `oamStatus` - The oam status healthcheck endpoint
- `OAMUploaderApi` - The address of the [Uploader Api](https://github.com/hotosm/oam-uploader-api).
- `googleClient` - The client provided by google to use for the GDrive integration.
- `googleDeveloperKey` - The developer key provided by google to use for the GDrive integration.

Example:
```
Expand Down
6 changes: 5 additions & 1 deletion app/assets/scripts/actions/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,9 @@ module.exports = Reflux.createActions({

'selectPreview': {},

'setBaseLayer': {}
'setBaseLayer': {},

'showNotification': {},
'clearNotification': {},
'clearNotificationAfter': {}
});
82 changes: 78 additions & 4 deletions app/assets/scripts/components/app.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
'use strict';
import React from 'react';
import Reflux from 'reflux';

import MessageModal from './modals/message_modal';
import Notifications from '../components/uploader/notifications';
import FeedbackModal from './modals/feedback_modal';
import Header from './header';
import actions from '../actions/actions';

var App = React.createClass({
displayName: 'App',

mixins: [
Reflux.listenTo(actions.showNotification, 'onNotificationShow'),
Reflux.listenTo(actions.clearNotification, 'dismissNotification'),
Reflux.listenTo(actions.clearNotificationAfter, 'dismissNotification')
],

propTypes: {
params: React.PropTypes.object,
routes: React.PropTypes.array,
location: React.PropTypes.object,
children: React.PropTypes.object
},
Expand All @@ -34,15 +43,52 @@ var App = React.createClass({
}
},

getInitialState: function () {
return {
notification: { type: null, message: null }
};
},

onNotificationShow: function (type, message) {
this.setState({
notification: { type: type, message: message }
});
},

dismissNotification: function (time) {
if (!time) {
time = 0;
}

setTimeout(function () {
this.setState({
notification: { type: null, message: null }
});
}.bind(this), time);
},

render: function () {
// Only show the modal if there are no url params.
// There can't be any other without map
// There can't be any other without map.
var params = this.props.params || {};
var query = this.props.location.query || {};

// If we're on a specific coordinate location.
const isLocation = this.props.routes[this.props.routes.length - 1].name === 'map';
// If we're on the homepage.
const isHome = this.props.location.pathname === '/';

// Is this the main map view?
const isMap = isLocation || isHome;

return (
<div>
<Header params={params} query={query} />

{ isMap
? <Header params={params} query={query} />
: null
}

<main className='page__body' role='main'>
<section className='layout layout--app'>
<header className='layout__header'>
Expand All @@ -54,17 +100,45 @@ var App = React.createClass({
</header>
<div className='layout__body'>
<div className='inner'>
{React.cloneElement(this.props.children, { params: params, query: query })}
{React.cloneElement(this.props.children, {
params: params,
query: query
})}
</div>
</div>
</section>
</main>
<footer className='page__footer' role='contentinfo'>
<div className='inner'>
<p>Made with love by <a href='https://developmentseed.org' title='Visit Development Seed website'>Development Seed</a> and <a href='http://hot.openstreetmap.org/' title='Visit the Humanitarian OpenStreetMap Team website'>HOT</a>.</p>
<p>
Made with love by
{' '}
<a
href='https://developmentseed.org'
title='Visit Development Seed website'
>
Development Seed
</a>
{' '}
and
{' '}
<a
href='http://hot.openstreetmap.org/'
title='Visit the Humanitarian OpenStreetMap Team website'
>
HOT
</a>
.
</p>
</div>
</footer>
<MessageModal />
<Notifications
type={this.state.notification.type}
onNotificationDismiss={this.dismissNotification}
>
{this.state.notification.message}
</Notifications>
<FeedbackModal />
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion app/assets/scripts/components/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ var Header = React.createClass({
<ul className='meta-menu'>
<li>
<a
href='https://upload.openaerialmap.org/'
href='#/upload'
className='button-upload'
title='Go to OAM Uploader'
>
Expand Down
76 changes: 76 additions & 0 deletions app/assets/scripts/components/uploader/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
'use strict';
var React = require('react/addons');
var Reflux = require('reflux');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var AppActions = require('../actions/actions');
var Notifications = require('./notifications');

module.exports = React.createClass({
displayName: 'App',

mixins: [
Reflux.listenTo(AppActions.showNotification, 'onNotificationShow'),
Reflux.listenTo(AppActions.clearNotification, 'dismissNotification'),
Reflux.listenTo(AppActions.clearNotificationAfter, 'dismissNotification'),
Router.State
],

getInitialState: function () {
return {
notification: { type: null, message: null }
};
},

onNotificationShow: function (type, message) {
this.setState({
notification: { type: type, message: message }
});
},

dismissNotification: function (time) {
if (!time) {
time = 0;
}

setTimeout(function () {
this.setState({
notification: { type: null, message: null }
});
}.bind(this), time);
},

render: function () {
return (
<div>
<div className='inner-wrapper'>
<header className='site-header' role='banner'>
<div className='inner'>
<div className='site-headline'>
<h1 className='site-title'>
<img
src='assets/graphics/layout/oam-logo-h-pos.svg'
width='167'
height='32'
alt='OpenAerialMap logo' />
<span>OpenAerialMap</span>
<small>Uploader</small>
</h1>
</div>
</div>
</header>
<main className='site-body' role='main'>
<div className='inner'>
<RouteHandler/>
</div>
</main>
</div>
<Notifications
type={this.state.notification.type}
onNotificationDismiss={this.dismissNotification}>
{this.state.notification.message}
</Notifications>
</div>
);
}
});
Loading

0 comments on commit 74d1479

Please sign in to comment.