From 74a92aa1f471689daa0d4ebac634d2b9303b7a9a Mon Sep 17 00:00:00 2001 From: lukasmartinelli Date: Thu, 8 Sep 2016 19:47:29 +0200 Subject: [PATCH] Hack map and toolbar view --- .eslintrc.yml | 81 ----------------------------------------------- .jshintrc | 3 -- package.json | 37 ++++++++++++++++++++-- src/app.jsx | 37 ++++++++++++++++++---- src/button.jsx | 4 +++ src/button.scss | 18 +++++++++++ src/index.scss | 6 +++- src/layers.jsx | 17 ++++++++++ src/layout.scss | 15 +++++++++ src/map.jsx | 17 ++++++++++ src/template.html | 4 +-- src/theme.jsx | 74 +++++++++++++++++++++++++++++++++++++++++++ src/toolbar.jsx | 44 +++++++++++++++++++++++++ src/workspace.jsx | 50 +++++++++++++++++++++++++++++ webpack.config.js | 19 ++++++++++- 15 files changed, 327 insertions(+), 99 deletions(-) delete mode 100644 .eslintrc.yml delete mode 100644 .jshintrc create mode 100644 src/button.jsx create mode 100644 src/button.scss create mode 100644 src/layers.jsx create mode 100644 src/layout.scss create mode 100644 src/map.jsx create mode 100644 src/theme.jsx create mode 100644 src/toolbar.jsx create mode 100644 src/workspace.jsx diff --git a/.eslintrc.yml b/.eslintrc.yml deleted file mode 100644 index b56f2e1..0000000 --- a/.eslintrc.yml +++ /dev/null @@ -1,81 +0,0 @@ ---- - extends: - - plugin:react/recommended - - env: - browser: true - node: true - es6: true - - parserOptions: - ecmaVersion: 6 - sourceType: "module" - ecmaFeatures: - jsx: true - - globals: - __DEV__: true - __SERVER__: true - - plugins: - - react - - rules: - react/jsx-uses-vars: 1 - react/prop-types: [1, { ignore: [children] }] - - semi: 0 - key-spacing: 1 - curly: 0 - consistent-return: 0 - space-infix-ops: 1 - camelcase: 0 - no-spaced-func: 1 - no-alert: 1 - eol-last: 1 - comma-spacing: 1 - eqeqeq: 1 - - # possible errors - comma-dangle: 0 - no-cond-assign: 2 - no-console: 0 - no-constant-condition: 2 - no-control-regex: 2 - no-debugger: 2 - no-dupe-args: 2 - no-dupe-keys: 2 - no-duplicate-case: 2 - no-empty-character-class: 2 - no-empty: 2 - no-ex-assign: 2 - no-extra-boolean-cast: 2 - no-extra-parens: 0 - no-extra-semi: 2 - no-func-assign: 2 - no-inner-declarations: 2 - no-invalid-regexp: 2 - no-irregular-whitespace: 2 - no-negated-in-lhs: 2 - no-obj-calls: 2 - no-regex-spaces: 2 - no-sparse-arrays: 2 - no-unexpected-multiline: 2 - no-unreachable: 2 - use-isnan: 2 - valid-jsdoc: 2 - valid-typeof: 2 - - no-redeclare: 2 - - init-declarations: 2 - no-catch-shadow: 2 - no-delete-var: 2 - no-label-var: 2 - no-shadow-restricted-names: 2 - no-shadow: 2 - no-undef-init: 2 - no-undef: 2 - no-undefined: 2 - no-unused-vars: 2 - no-use-before-define: 2 diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 2b6f469..0000000 --- a/.jshintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "esversion": 6 -} diff --git a/package.json b/package.json index f018d52..aa33caa 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "build": "webpack --config webpack.production.config.js --progress --profile --colors", "start": "webpack-dev-server --progress --profile --colors", - "lint": "eslint --ext js --ext jsx src || exit 0" + "lint": "eslint --ext js --ext jsx src" }, "repository": { "type": "git", @@ -16,12 +16,40 @@ "license": "MIT", "homepage": "https://github.com/alicoding/react-webpack-babel#readme", "dependencies": { - "bootstrap": "^4.0.0-alpha.3", "node-sass": "^3.9.2", "react": "15.3.0", "react-dom": "15.3.0", + "react-geomicons": "^2.0.5", + "react-icons": "^2.2.1", + "react-map-gl": "^1.4.2", + "react-mapbox-gl": "^0.10.0", + "react-tap-event-plugin": "^1.0.0", + "rebass": "^0.3.1", "sass-loader": "^4.0.1" }, + "jshintConfig": { + "esversion": 6 + }, + "eslintConfig": { + "extend": [ + "plugin:react/recommended" + ], + "env": { + "browser": true, + "node": true, + "es6": true + }, + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "plugins": [ + "react" + ] + }, "devDependencies": { "babel-core": "6.14.0", "babel-loader": "6.2.4", @@ -35,11 +63,14 @@ "extract-text-webpack-plugin": "^1.0.1", "file-loader": "0.9.0", "html-webpack-plugin": "^2.22.0", + "json-loader": "^0.5.4", "react-hot-loader": "1.3.0", "style-loader": "0.13.1", + "transform-loader": "^0.2.3", "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-cleanup-plugin": "^0.3.0", - "webpack-dev-server": "1.15.1" + "webpack-dev-server": "1.15.1", + "webworkify-webpack": "^1.1.7" } } diff --git a/src/app.jsx b/src/app.jsx index 09c33d1..f0800d7 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,16 +1,39 @@ import 'bootstrap/dist/css/bootstrap.min.css'; -import styles from './index.scss'; +import {Workspace} from './workspace.jsx'; +import {Map} from './map.jsx'; +import {Toolbar} from './toolbar.jsx'; import React from 'react'; +import styles from './layout.scss'; +import { Drawer, Container, Block, Fixed } from 'rebass' +import { LayerEditor } from './layers.jsx' +import theme from './theme.jsx' export default class App extends React.Component { + static childContextTypes = { + rebass: React.PropTypes.object, + reactIconBase: React.PropTypes.object + } + + getChildContext () { + return { + rebass: theme, + reactIconBase: { + size: 20, + } + } + } + render() { return ( -
-

It Works!

-

This React project just works including module local styles.

-

Global bootstrap css import works too as you can see on the following button.

-

Enjoy!

+
+ + + + +
+ +
) } -} \ No newline at end of file +} diff --git a/src/button.jsx b/src/button.jsx new file mode 100644 index 0000000..d8d62e6 --- /dev/null +++ b/src/button.jsx @@ -0,0 +1,4 @@ +import React from 'react'; +import styles from './button.scss'; +import { Button, Text } from 'rebass' + diff --git a/src/button.scss b/src/button.scss new file mode 100644 index 0000000..28cc847 --- /dev/null +++ b/src/button.scss @@ -0,0 +1,18 @@ +.button { + text-align: center; + display: inline-block; + margin: 0px; + padding: 10px; + position: relative; + border: none; + cursor: pointer; + border-radius: 3px; + white-space: nowrap; + text-overflow: ellipsis; + font-family: 'Open Sans Bold', sans-serif; + line-height: 20px; + font-size: 12px; + + color: #fff; + background-color: rgba(255,255,255,0.10); +} diff --git a/src/index.scss b/src/index.scss index e5eb38a..dbc941c 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,4 +1,8 @@ .blueBg { - background-color: red; + background-color: blue; color: white; } + +.app { + padding: 0; +} diff --git a/src/layers.jsx b/src/layers.jsx new file mode 100644 index 0000000..1c039f7 --- /dev/null +++ b/src/layers.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { Toolbar, NavItem, Tooltip, Container, Space} from 'rebass' +import theme from './theme.jsx'; +import { Button, Text } from 'rebass'; + +export class LayerEditor extends React.Component { + render() { + return + + + Toolbar + + + ; + } +} diff --git a/src/layout.scss b/src/layout.scss new file mode 100644 index 0000000..8b151a6 --- /dev/null +++ b/src/layout.scss @@ -0,0 +1,15 @@ +@mixin full-height { + position: fixed; + top: 0; + bottom: 0; + height: 100%; +} + +.layoutMap { + @include full-height; + width: 100%; + + & > div { + height: 100%; + } +} diff --git a/src/map.jsx b/src/map.jsx new file mode 100644 index 0000000..be8118d --- /dev/null +++ b/src/map.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactMapboxGl from 'react-mapbox-gl'; +import {ZoomControl} from 'react-mapbox-gl'; + + +export class Map extends React.Component { + constructor(props) { + super(props); + } + render() { + return + } +} + diff --git a/src/template.html b/src/template.html index d13e766..5af5b39 100644 --- a/src/template.html +++ b/src/template.html @@ -6,8 +6,6 @@ -
-
Loading...
-
+
Loading...
diff --git a/src/theme.jsx b/src/theme.jsx new file mode 100644 index 0000000..6e66038 --- /dev/null +++ b/src/theme.jsx @@ -0,0 +1,74 @@ +const caps = { + textTransform: 'uppercase', + letterSpacing: '.2em' +} + +const dark = { + name: 'Dark', + color: '#eee', + fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif', + backgroundColor: '#111', + borderRadius: 5, + borderColor: `rgba(255, 255, 255, ${1/16})`, + + colors: { + black: '#242424', + gray: '#313131', + white: '#fff', + blue: '#00d9f7', + info: '#00d9f7', + green: '#0f8', + success: '#0f8', + orange: '#fb3', + warning: '#fb3', + primary: '#778', + midgray: '#778', + gray: '#333339', + secondary: '#333339', + red: '#f04', + error: '#f04' + }, + inverted: '#222', + + scale: [ + 3, 5, 10, 20, 40 + ], + + Card: { + backgroundColor: '#222', + border: 0, + }, + Panel: { + borderWidth: 2, + backgroundColor: '#000' + }, + Heading: caps, + Button: { + color: '#00d9f7', + }, + ButtonOutline: { + color: '#00d9f7', + }, + Toolbar: { + minHeight: 64, + color: '#00d9f7', + backgroundColor: "rgba(0, 0, 0, 0.8)" + }, + Label: { opacity: 5/8 }, + Menu: { + color: '#00d9f7', + backgroundColor: '#000' + }, + Message: { + color: '#111', + opacity: 15/16 + }, + Text: { + opacity: 7/8 + }, + Footer: { + opacity: 1/2 + } +} + +export default dark diff --git a/src/toolbar.jsx b/src/toolbar.jsx new file mode 100644 index 0000000..cc38d4f --- /dev/null +++ b/src/toolbar.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass' +import theme from './theme.jsx'; +import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md'; +import { Button, Text } from 'rebass'; + +export class Toolbar extends React.Component { + render() { + return + + + + + + + + + + + + + + + + + } +} diff --git a/src/workspace.jsx b/src/workspace.jsx new file mode 100644 index 0000000..bc4796e --- /dev/null +++ b/src/workspace.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Space, Toolbar, ButtonCircle, Text, Panel, PanelHeader, PanelFooter } from 'rebass' +import Icon from 'react-geomicons'; + + +export class Workspace extends React.Component { + render() { + return
+ + Hey layer + + + + + + + + + + + + + + +
+ } +} diff --git a/webpack.config.js b/webpack.config.js index 94c389f..a7c3c2c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,18 @@ loaders.push({ ] }); +// Mapbox GL +loaders.push({ + test: /\.json$/, + loader: 'json-loader' +}); + +loaders.push({ + test: /\.js$/, + include: path.resolve('node_modules/mapbox-gl-shaders/index.js'), + loader: 'transform/cacheable?brfs' +}); + // local css modules loaders.push({ test: /[\/\\]src[\/\\].*\.css/, @@ -49,7 +61,12 @@ module.exports = { extensions: ['', '.js', '.jsx'] }, module: { - loaders + loaders, + postLoaders: [{ + include: /node_modules\/mapbox-gl-shaders/, + loader: 'transform', + query: 'brfs' + }] }, devServer: { contentBase: "./public",