From 6652e3a36902f09148320b83954ff31a794852e6 Mon Sep 17 00:00:00 2001
From: Clemens Brunner <cle1000.cb@gmail.com>
Date: Mon, 30 May 2016 08:34:30 +0200
Subject: start of developing server side for options (#1155)

* added UI for options menu

* update UI for options menu

* update UI for options v2

* update UI for options v2

* added new btn class

* little changes

* little changes

* merge

* deleted branch

* change menu button class

* added option route + added very incomplete handler class

* moved options to settings

* added toggleinputbutton

* changed options menu

* added option for stream large bodies, but no working

* added option for stream large bodies, but no working
---
 web/src/js/components/common.js | 56 +++++++++++++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 7 deletions(-)

(limited to 'web/src/js/components/common.js')

diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index b257b82c..87c34ffc 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import {Key} from "../utils.js";
 import _ from "lodash"
 
 export var Splitter = React.createClass({
@@ -107,14 +108,55 @@ export var Splitter = React.createClass({
     }
 });
 
-export const ToggleComponent = (props) =>
-    <div
-      className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
-      onClick={props.onToggleChanged}>
-      <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span>
-    </div>
+export const ToggleButton = (props) =>
+    <div className="input-group toggle-btn">
+        <div
+        className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
+        onClick={props.onToggleChanged}>
+        <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}>&nbsp;{props.name}</span>
+        </div>
+    </div>;
 
-ToggleComponent.propTypes = {
+ToggleButton.propTypes = {
     name: React.PropTypes.string.isRequired,
     onToggleChanged: React.PropTypes.func.isRequired
+};
+
+export class ToggleInputButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {txt: props.txt};
+    }
+
+    render() {
+        return (
+            <div className="input-group toggle-input-btn">
+                <span
+                    className="input-group-btn"
+                    onClick={() => this.props.onToggleChanged(this.state.txt)}>
+                    <div className={"btn  " + (this.props.checked ? "btn-primary" : "btn-default")}>
+                        <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/>
+                        &nbsp;{this.props.name}
+                    </div>
+                </span>
+                <input
+                    className="form-control"
+                    placeholder={this.props.placeholder}
+                    disabled={this.props.checked}
+                    value={this.state.txt}
+                    type={this.props.inputType}
+                    onChange={e => this.setState({txt: e.target.value})}
+                    onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/>
+            </div>
+        );
+    }
 }
+
+ToggleInputButton.propTypes = {
+    name: React.PropTypes.string.isRequired,
+    txt: React.PropTypes.string.isRequired,
+    onToggleChanged: React.PropTypes.func.isRequired
+};
+
+
+
-- 
cgit v1.2.3