Error panel with current map style errors #40

.gitignore

@@ -2,6 +2,7 @@
 logs
 *.log
 *.swp
+*.swo
 
 # Runtime data
 pids

src/components/App.jsx

@@ -9,6 +9,7 @@ import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
 import AppLayout from './AppLayout'
+import ErrorPanel from './ErrorPanel'
 
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min'
@@ -34,6 +35,7 @@ export default class App extends React.Component {
     })
 
     this.state = {
+      errors: [],
       mapStyle: style.emptyStyle,
       selectedLayerIndex: 0,
       sources: {},
@@ -77,9 +79,14 @@ export default class App extends React.Component {
     if(errors.length === 0) {
       this.revisionStore.addRevision(newStyle)
       this.saveStyle(newStyle)
-      this.setState({ mapStyle: newStyle })
+      this.setState({
+        mapStyle: newStyle,
+        errors: [],
+      })
     } else {
-      errors.forEach(err => console.error(err.message))
+      this.setState({
+        errors: errors.map(err => err.message)
+      })
     }
   }
 
@@ -187,11 +194,16 @@ export default class App extends React.Component {
       onLayerIdChange={this.onLayerIdChange.bind(this)}
     /> : null
 
+    const bottomPanel = this.state.errors.length > 0 ? <ErrorPanel
+      messages={this.state.errors}
+    /> : null
+
     return <AppLayout
       toolbar={toolbar}
       layerList={layerList}
       layerEditor={layerEditor}
       map={this.mapRenderer()}
+      bottom={bottomPanel}
     />
   }
 }

src/components/AppLayout.jsx

@@ -11,6 +11,7 @@ class AppLayout extends React.Component {
     layerList: React.PropTypes.element.isRequired,
     layerEditor: React.PropTypes.element,
     map: React.PropTypes.element.isRequired,
+    bottom: React.PropTypes.element,
   }
 
   static childContextTypes = {
@@ -60,6 +61,18 @@ class AppLayout extends React.Component {
         </ScrollContainer>
       </div>
       {this.props.map}
+      {this.props.bottom && <div style={{
+          position: 'fixed',
+          height: 50,
+          bottom: 0,
+          left: 550,
+          zIndex: 1,
+          width: '100%',
+          backgroundColor: colors.black
+        }}>
+          {this.props.bottom}
+        </div>
+      }
     </div>
   }
 }

src/components/ErrorPanel.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Paragraph from './Paragraph'
+import colors from '../config/colors'
+import { fontSizes, margins } from '../config/scales'
+
+class ErrorPanel extends React.Component {
+  static propTypes = {
+    messages: React.PropTypes.array,
+  }
+
+  render() {
+    return <div style={{
+      padding: margins[1],
+    }}>
+      {this.props.messages.map(m => <Paragraph style={{
+        color: colors.red,
+        margin: 0,
+        lineHeight: 1.2,
+      }}>{m}</Paragraph>)}
+    </div>
+  }
+}
+
+
+export default ErrorPanel

src/config/colors.js

@@ -8,7 +8,7 @@ const baseColors = {
   blue: '#00d9f7',
   green: '#B4C7AD',
   orange: '#fb3',
-  red: '#f04',
+  red: '#cf4a4a',
 }
 
 const themeColors = {