Add render config (read only now)

src/component/Config.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import Dialog from 'material-ui/Dialog'
+import FontIcon from 'material-ui/FontIcon'
+import IconButton from 'material-ui/IconButton'
+import FlatButton from 'material-ui/FlatButton'
+import { GridList, GridTile } from 'material-ui/GridList'
+
+class Config extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {open: false}
+  }
+
+  collectRendererConfig = () => this.props.configCollector()['renderer']
+
+  handleOpen = () => {
+    this.setState({open: true});
+  }
+
+  handleClose = () => {
+    this.setState({open: false});
+  }
+
+  generateRenderConfigList = () => {
+    let result = []
+    let rendererConfig = this.collectRendererConfig()
+    for (let key in rendererConfig) {
+      let {prefix, suffix} = rendererConfig[key]
+      result.push(
+        <div key={key}>
+          <h4>{key}</h4>
+          <pre>{prefix + '`' + suffix + '`'}</pre>
+        </div>
+      )
+    }
+    return result
+  }
+
+  render() {
+    console.log(this.collectRendererConfig())
+    const actions = [
+//    <FlatButton label="Reset" primary={true} onClick={this.handleReset}/>,
+      <FlatButton label="OK" primary={true} onClick={this.handleClose}/>
+    ]
+    return (
+      <div>
+        <IconButton onClick={this.handleOpen}>
+          <FontIcon color='rgb(255, 255, 255)' className='material-icons'>settings</FontIcon>
+        </IconButton>
+        <Dialog
+          modal={false}
+          title="Render Configuration"
+          actions={actions}
+          open={this.state.open}
+          autoScrollBodyContent={true}
+          contentStyle={{width: '100%'}}
+          onRequestClose={this.handleClose}>
+          {this.generateRenderConfigList()}
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default Config

src/component/Header.js

@@ -2,11 +2,19 @@ import React from 'react'
 import AppBar from 'material-ui/AppBar'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 
+import Config from './Config'
+
 class Header extends React.Component {
+  constructor (props) {
+    super(props)
+  }
   render () {
     return (
       <MuiThemeProvider>
-        <AppBar showMenuIconButton={false} title='MCBBS Markdown To BBCode Converter' />
+        <AppBar
+          showMenuIconButton={false}
+          iconElementRight={<Config configCollector={this.props.configCollector}/>}
+          title='MCBBS Markdown To BBCode Converter' />
       </MuiThemeProvider>
     )
   }

src/index.css

@@ -1,13 +1,19 @@
 html, body {
-    overflow-x: hidden;
     height: 100%;
     width: 100%;
     margin: 0;
 }
 
+main {
+    overflow-x: hidden;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+}
+
 .main-left {
     position: absolute;
-    top: 96px;
+    top: 32px;
     bottom: 96px;
     padding: 4px 16px;
     overflow-y: auto;
@@ -16,7 +22,7 @@ html, body {
 
 .main-right {
     position: absolute;
-    top: 96px;
+    top: 32px;
     bottom: 96px;
     padding: 0 16px;
     overflow-y: auto;

src/index.js

@@ -45,6 +45,28 @@ function setRenderer () {
   }
 }
 
+function collectConfig () {
+  let rendererConfigResult = {}
+  let rendererConfigFromLocalStorage = (() => {
+    try {
+      return JSON.parse(localStorage.rendererConfig)
+    } catch (e) {
+      return {}
+    }
+  })()
+  for (let key in rendererConfig) {
+    let {prefix, suffix} = rendererConfig[key]
+    suffix = rendererConfigFromLocalStorage[key] || suffix
+    rendererConfigResult[key] = {
+      prefix: prefix,
+      suffix: suffix
+    }
+    rendererConfigFromLocalStorage[key] = suffix
+  }
+  localStorage.rendererConfig = JSON.stringify(rendererConfigFromLocalStorage)
+  return {renderer: rendererConfigResult}
+}
+
 setRenderer()
 
 function onTransform (markdownText) {
@@ -54,5 +76,5 @@ function onTransform (markdownText) {
   }))
 }
 
-ReactDOM.render(<Header/>, document.getElementsByTagName('header')[0])
+ReactDOM.render(<Header configCollector={collectConfig} />, document.getElementsByTagName('header')[0])
 ReactDOM.render(<Main transformer={onTransform} />, document.getElementsByTagName('main')[0])