From 5df15208d6643844cb2eb12ad991e4bc8f669514 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Fri, 7 Jul 2017 10:18:29 +0800
Subject: [web] Add PureStringSequenceOption type to OptionMaster.jsx

---
 web/src/js/components/Modal/OptionModal.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'web/src/js/components/Modal/OptionModal.jsx')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index ef3a224a..ec59fa29 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -28,6 +28,7 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
+                    <div className="container-fluid">
                     {
                         Object.keys(options).sort()
                             .map((key, index) => {
@@ -41,10 +42,10 @@ class PureOptionModal extends Component {
                                     />)
                             })
                     }
+                    </div>
                 </div>
 
                 <div className="modal-footer">
-                    <button type="button" className="btn btn-primary">Save Changes</button>
                 </div>
             </div>
         )
-- 
cgit v1.2.3


From 6be1c2efb9f477c4cbe05edd5010e78186c8e748 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sat, 15 Jul 2017 22:54:33 +0800
Subject: [web] Add simple validation and improve UI.

---
 web/src/js/components/Modal/OptionModal.jsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'web/src/js/components/Modal/OptionModal.jsx')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index ec59fa29..a4dd95d0 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as modalAction from '../../ducks/ui/modal'
-import { update as updateOptions } from '../../ducks/options'
 import Option from './OptionMaster'
 
 class PureOptionModal extends Component {
@@ -37,7 +36,6 @@ class PureOptionModal extends Component {
                                     <Option
                                         key={index}
                                         name={key}
-                                        updateOptions={updateOptions}
                                         option={option}
                                     />)
                             })
@@ -58,6 +56,5 @@ export default connect(
     }),
     {
         hideModal: modalAction.hideModal,
-        updateOptions: updateOptions,
     }
 )(PureOptionModal)
-- 
cgit v1.2.3


From babd967eb8ac62c4a6ff6734ff57e46faaa5bab6 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Mon, 17 Jul 2017 20:46:28 +0200
Subject: [web] options: make help and err permanently visible, improve perf

---
 web/src/js/components/Modal/OptionModal.jsx | 51 +++++++++++++++++++----------
 1 file changed, 34 insertions(+), 17 deletions(-)

(limited to 'web/src/js/components/Modal/OptionModal.jsx')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index a4dd95d0..d16c2afc 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,7 +1,22 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import * as modalAction from '../../ducks/ui/modal'
-import Option from './OptionMaster'
+import React, { Component } from "react"
+import { connect } from "react-redux"
+import * as modalAction from "../../ducks/ui/modal"
+import Option from "./Option"
+
+function PureOptionHelp({help}){
+    return <div className="small text-muted">{help}</div>;
+}
+const OptionHelp = connect((state, {name}) => ({
+    help: state.options[name].help,
+}))(PureOptionHelp);
+
+function PureOptionError({error}){
+    if(!error) return null;
+    return <div className="small text-danger">{error}</div>;
+}
+const OptionError = connect((state, {name}) => ({
+    error: state.ui.optionsEditor[name] && state.ui.optionsEditor[name].error
+}))(PureOptionError);
 
 class PureOptionModal extends Component {
 
@@ -28,18 +43,20 @@ class PureOptionModal extends Component {
 
                 <div className="modal-body">
                     <div className="container-fluid">
-                    {
-                        Object.keys(options).sort()
-                            .map((key, index) => {
-                                let option = options[key];
-                                return (
-                                    <Option
-                                        key={index}
-                                        name={key}
-                                        option={option}
-                                    />)
-                            })
-                    }
+                        {
+                            options.map(name =>
+                                <div key={name} className="row">
+                                    <div className="col-xs-6">
+                                        {name}
+                                        <OptionHelp name={name}/>
+                                    </div>
+                                    <div className="col-xs-6">
+                                        <Option name={name}/>
+                                        <OptionError name={name}/>
+                                    </div>
+                                </div>
+                            )
+                        }
                     </div>
                 </div>
 
@@ -52,7 +69,7 @@ class PureOptionModal extends Component {
 
 export default connect(
     state => ({
-        options: state.options
+        options: Object.keys(state.options)
     }),
     {
         hideModal: modalAction.hideModal,
-- 
cgit v1.2.3


From 183079f7312dc812d7b70a01e490ef3827b2890c Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Mon, 17 Jul 2017 21:13:24 +0200
Subject: [web] options: add some styling, minor fixes

---
 web/src/js/components/Modal/OptionModal.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'web/src/js/components/Modal/OptionModal.jsx')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index d16c2afc..9b1b6a8b 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -4,7 +4,7 @@ import * as modalAction from "../../ducks/ui/modal"
 import Option from "./Option"
 
 function PureOptionHelp({help}){
-    return <div className="small text-muted">{help}</div>;
+    return <div className="help-block small">{help}</div>;
 }
 const OptionHelp = connect((state, {name}) => ({
     help: state.options[name].help,
@@ -42,12 +42,12 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
-                    <div className="container-fluid">
+                    <div className="form-horizontal">
                         {
                             options.map(name =>
-                                <div key={name} className="row">
+                                <div key={name} className="form-group">
                                     <div className="col-xs-6">
-                                        {name}
+                                        <label htmlFor={name}>{name}</label>
                                         <OptionHelp name={name}/>
                                     </div>
                                     <div className="col-xs-6">
-- 
cgit v1.2.3