resizeable editor pane

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Set the theme for the editor
 - Set the theme for the output
 - Settings and input are persisted between app restarts
+- Editor pane can be resized
 
 # 1.0.0
 

package.json

@@ -31,6 +31,7 @@
     "react-codemirror": "^0.3.0",
     "react-dom": "^15.3.1",
     "react-redux": "^4.4.5",
+    "react-split-pane": "0.1.66",
     "redux": "^3.6.0",
     "redux-persist": "4.8.3",
     "redux-thunk": "^2.1.0"

src/app/components/Output/styles.css

@@ -1,13 +1,10 @@
 .Output {
-  flex: 0 0 50%;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
+  height: 100%;
 }
 
 .Output .ReactCodeMirror {
-  flex: 0 0 100%;
-  overflow: hidden;
+  height: 100%;
 }
 
 .Output .CodeMirror {

src/app/components/Setting/CoffeeScriptVersion/index.js

@@ -1,21 +1,14 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { setCoffeeScriptVersion } from '../../../actions/settings'
+import Selector from '../Selector'
 import { getAllVersions as getAllCoffeeScriptVersions } from '../../../coffeescript'
 
-const CoffeeScriptVersionSetting = ({ dispatch, version }) => {
+export default function ({ version, onChange }) {
   return (
-    <div className='Settings__setting'>
-      <label className='Setting__label'>CoffeeScript Version</label>
-      <select className='Setting__selector' value={version} onChange={e => {
-        dispatch(setCoffeeScriptVersion(e.target.value))
-      }}>
-        {getAllCoffeeScriptVersions().map(v => {
-          return <option value={v} key={v}>{v}</option>
-        })}
-      </select>
-    </div>
+    <Selector
+      label='CoffeeScript Version'
+      initialValue={version}
+      onChange={onChange}
+      options={getAllCoffeeScriptVersions()}
+    />
   )
 }
-
-export default connect()(CoffeeScriptVersionSetting)

src/app/components/Setting/EditorTheme/index.js

@@ -1,21 +1,14 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { setEditorTheme } from '../../../actions/settings'
+import Selector from '../Selector'
 import { getAllThemes as getAllEditorThemes } from '../../../editor'
 
-const EditorThemeSetting = ({ dispatch, theme }) => {
+export default function ({ theme, onChange }) {
   return (
-    <div className='Settings__setting'>
-      <label className='Setting__label'>Editor Theme</label>
-      <select className='Setting__selector' value={theme} onChange={e => {
-        dispatch(setEditorTheme(e.target.value))
-      }}>
-        {getAllEditorThemes().map(v => {
-          return <option value={v} key={v}>{v}</option>
-        })}
-      </select>
-    </div>
+    <Selector
+      label='Editor Theme'
+      initialValue={theme}
+      onChange={onChange}
+      options={getAllEditorThemes()}
+    />
   )
 }
-
-export default connect()(EditorThemeSetting)

src/app/components/Setting/OutputTheme/index.js

@@ -1,21 +1,14 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { setOutputTheme } from '../../../actions/settings'
+import Selector from '../Selector'
 import { getAllThemes as getAllEditorThemes } from '../../../editor'
 
-const OutputThemeSetting = ({ dispatch, theme }) => {
+export default function ({ theme, onChange }) {
   return (
-    <div className='Settings__setting'>
-      <label className='Setting__label'>Output Theme</label>
-      <select className='Setting__selector' value={theme} onChange={e => {
-        dispatch(setOutputTheme(e.target.value))
-      }}>
-        {getAllEditorThemes().map(v => {
-          return <option value={v} key={v}>{v}</option>
-        })}
-      </select>
-    </div>
+    <Selector
+      label='Output Theme'
+      initialValue={theme}
+      onChange={onChange}
+      options={getAllEditorThemes()}
+    />
   )
 }
-
-export default connect()(OutputThemeSetting)

src/app/components/Setting/Selector/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function ({ label, initialValue, options, onChange }) {
+  return (
+    <div className='Settings__setting'>
+      <label className='Setting__label'>{label}</label>
+      <select className='Setting__selector' value={initialValue} onChange={onChange}>
+        {options.map(v => {
+          return <option value={v} key={v}>{v}</option>
+        })}
+      </select>
+    </div>
+  )
+}

src/app/containers/App/index.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import SplitPane from 'react-split-pane'
+import Editor from '../Editor'
+import Status from '../../components/Status'
+import Output from '../../components/Output'
+import Settings from '../Settings'
+
+import './styles.css'
+
+const App = ({ outputTheme, output, status }) => {
+  return (
+    <div className='App'>
+      <div className='App__Settings'>
+        <Settings />
+      </div>
+      <div className='App__EditorOutput'>
+        <SplitPane split='vertical' minSize={100} maxSize={-100} defaultSize='50%'>
+          <Editor />
+          <Output theme={outputTheme}>{output}</Output>
+        </SplitPane>
+      </div>
+      <div className='App__Status'>
+        <Status status={status} />
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = state => {
+  return {
+    outputTheme: state.app.outputTheme,
+    output: state.app.output,
+    status: state.app.status
+  }
+}
+
+export default connect(mapStateToProps)(App)

src/app/components/App/styles.css → src/app/containers/App/styles.css

@@ -15,3 +15,9 @@
   flex-direction: row;
   flex: 2 0 auto;
 }
+
+.Resizer.vertical {
+  border-left: 3px solid #ddd;
+  border-right: 3px solid #ddd;
+  cursor: col-resize;
+}

src/app/containers/Editor/index.js

@@ -1,17 +1,17 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Codemirror from 'react-codemirror'
 import { connect } from 'react-redux'
 import { compileInput } from '../../actions/editor'
 import 'codemirror/mode/coffeescript/coffeescript'
 
 import './styles.css'
 
-class Editor extends React.Component {
+class Editor extends Component {
   get options () {
     return {
       lineNumbers: true,
       mode: 'coffeescript',
-      theme: this.props.theme
+      theme: this.props.editorTheme
     }
   }
 
@@ -31,22 +31,24 @@ class Editor extends React.Component {
   }
 
   handleFocusChange (focused) {
-    if (focused && this.props.children === this.defaultValue) {
+    if (focused && this.props.input === this.defaultValue) {
       this.props.dispatch(compileInput('', this.props.coffeeScriptVersion))
     }
 
-    if (!focused && this.props.children === '') {
+    if (!focused && this.props.input === '') {
       this.props.dispatch(compileInput(this.defaultValue, this.props.coffeeScriptVersion))
     }
   }
 
   componentDidMount () {
-    this.props.dispatch(compileInput(this.props.children, this.props.coffeeScriptVersion))
+    // re-compile input when the component is mounted
+    this.props.dispatch(compileInput(this.props.input, this.props.coffeeScriptVersion))
   }
 
   componentDidUpdate (prevProps) {
+    // re-compile input if the CoffeeScript version changed
     if (this.props.coffeeScriptVersion !== prevProps.coffeeScriptVersion) {
-      this.props.dispatch(compileInput(this.props.children, this.props.coffeeScriptVersion))
+      this.props.dispatch(compileInput(this.props.input, this.props.coffeeScriptVersion))
     }
   }
 
@@ -57,11 +59,19 @@ class Editor extends React.Component {
           options={this.options}
           onChange={this.handleInputChange}
           onFocusChange={this.handleFocusChange}
-          value={this.props.children}
+          value={this.props.input}
         />
       </div>
     )
   }
 }
 
-export default connect()(Editor)
+const mapStateToProps = state => {
+  return {
+    coffeeScriptVersion: state.app.coffeeScriptVersion,
+    editorTheme: state.app.editorTheme,
+    input: state.app.input
+  }
+}
+
+export default connect(mapStateToProps)(Editor)

src/app/containers/Editor/styles.css

@@ -1,13 +1,10 @@
 .Editor {
-  flex: 0 0 50%;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
+  height: 100%
 }
 
 .Editor .ReactCodeMirror {
-  flex: 0 0 100%;
-  overflow: hidden;
+  height: 100%
 }
 
 .Editor .CodeMirror {

src/app/containers/Settings/index.js

@@ -1,17 +1,35 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { setCoffeeScriptVersion, setEditorTheme, setOutputTheme } from '../../actions/settings'
 import CoffeeScriptVersion from '../../components/Setting/CoffeeScriptVersion'
 import EditorTheme from '../../components/Setting/EditorTheme'
 import OutputTheme from '../../components/Setting/OutputTheme'
 
 import './styles.css'
 import '../../components/Setting/styles.css'
 
-export default function ({ coffeeScriptVersion, editorTheme, outputTheme }) {
+const Settings = ({ dispatch, coffeeScriptVersion, editorTheme, outputTheme }) => {
   return (
     <div className='Settings'>
-      <OutputTheme theme={outputTheme} />
-      <EditorTheme theme={editorTheme} />
-      <CoffeeScriptVersion version={coffeeScriptVersion} />
+      <OutputTheme theme={outputTheme} onChange={e => {
+        dispatch(setOutputTheme(e.target.value))
+      }} />
+      <EditorTheme theme={editorTheme} onChange={e => {
+        dispatch(setEditorTheme(e.target.value))
+      }} />
+      <CoffeeScriptVersion version={coffeeScriptVersion} onChange={e => {
+        dispatch(setCoffeeScriptVersion(e.target.value))
+      }} />
     </div>
   )
 }
+
+const mapStateToProps = state => {
+  return {
+    coffeeScriptVersion: state.app.coffeeScriptVersion,
+    editorTheme: state.app.editorTheme,
+    outputTheme: state.app.outputTheme
+  }
+}
+
+export default connect(mapStateToProps)(Settings)

src/app/index.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-
 import store from './store'
-import App from './components/App'
+import App from './containers/App'
 
 import 'normalize.css'
 import 'codemirror/lib/codemirror.css'

src/app/store.js

@@ -1,5 +1,5 @@
-import {compose, applyMiddleware, createStore} from 'redux'
-import {persistStore, autoRehydrate} from 'redux-persist'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { autoRehydrate, persistStore } from 'redux-persist'
 import thunk from 'redux-thunk'
 import reducer from './reducers'
 
@@ -13,7 +13,6 @@ const store = createStore(
 )
 
 persistStore(store, {
-  blacklist: [], // todo
   keyPrefix: 'CoffeeWriter-'
 })
 

src/app/styles.css

@@ -1,9 +1,13 @@
 body {
   font-size: 14px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .CodeMirror {
   font-size: 15px;
   font-family: 'Source Code Pro', monospace;
 }
+
+*, *:before, *:after {
+  position: relative;
+}