From 57fafd3281af7a35f8e650fa9fb2cf5af70995f0 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 16 Aug 2016 11:57:12 +0200 Subject: refactor header_options --- web/src/js/components/common/ToggleInputButton.jsx | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx index 25d620ae..b019dfa3 100644 --- a/web/src/js/components/common/ToggleInputButton.jsx +++ b/web/src/js/components/common/ToggleInputButton.jsx @@ -7,7 +7,10 @@ export default class ToggleInputButton extends Component { static propTypes = { name: PropTypes.string.isRequired, txt: PropTypes.string.isRequired, - onToggleChanged: PropTypes.func.isRequired + onToggleChanged: PropTypes.func.isRequired, + checked: PropTypes.bool.isRequired, + placeholder: PropTypes.string.isRequired, + inputType: PropTypes.string } constructor(props) { @@ -15,10 +18,6 @@ export default class ToggleInputButton extends Component { this.state = { txt: props.txt } } - onChange(e) { - this.setState({ txt: e.target.value }) - } - onKeyDown(e) { e.stopPropagation() if (e.keyCode === Key.ENTER) { @@ -27,23 +26,24 @@ export default class ToggleInputButton extends Component { } render() { + const {checked, onToggleChanged, name, inputType, placeholder} = this.props return (
this.props.onToggleChanged(this.state.txt)}> -
- + onClick={() => onToggleChanged(this.state.txt)}> +
+   - {this.props.name} + {name}
this.onChange(e)} + placeholder={placeholder} + disabled={checked} + value={this.state.txt || ''} + type={inputType || 'text'} + onChange={e => this.setState({ txt: e.target.value })} onKeyDown={e => this.onKeyDown(e)} />
-- cgit v1.2.3 From 779e5e84e37278b8f3255a1061f2137f5b6a3a7d Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 16 Aug 2016 12:37:35 +0200 Subject: refactor file up and download --- web/src/js/components/common/FileChooser.jsx | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 web/src/js/components/common/FileChooser.jsx (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx new file mode 100644 index 00000000..d8a80ad7 --- /dev/null +++ b/web/src/js/components/common/FileChooser.jsx @@ -0,0 +1,27 @@ +import React, { PropTypes } from 'react' + +FileChooser.propTypes = { + icon: PropTypes.string, + text: PropTypes.string, + className: PropTypes.string, + title: PropTypes.string, + onOpenFile: PropTypes.func.isRequired +} + +export default function FileChooser({ icon, text, className, title, onOpenFile }) { + let fileInput; + return ( + fileInput.click()} + className={className} + title={title}> + + {text} + fileInput = ref} + className="hidden" + type="file" + onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}} + /> + + ) +} -- cgit v1.2.3 From 2236ed4ba5a01f899fb964e51b82e41028665a47 Mon Sep 17 00:00:00 2001 From: Clemens Date: Wed, 17 Aug 2016 11:07:56 +0200 Subject: fix deselection on delete, fix toggleInputButton props --- web/src/js/components/common/ToggleInputButton.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/ToggleInputButton.jsx b/web/src/js/components/common/ToggleInputButton.jsx index b019dfa3..5fa24c10 100644 --- a/web/src/js/components/common/ToggleInputButton.jsx +++ b/web/src/js/components/common/ToggleInputButton.jsx @@ -6,7 +6,7 @@ export default class ToggleInputButton extends Component { static propTypes = { name: PropTypes.string.isRequired, - txt: PropTypes.string.isRequired, + txt: PropTypes.string, onToggleChanged: PropTypes.func.isRequired, checked: PropTypes.bool.isRequired, placeholder: PropTypes.string.isRequired, @@ -15,7 +15,7 @@ export default class ToggleInputButton extends Component { constructor(props) { super(props) - this.state = { txt: props.txt } + this.state = { txt: props.txt || '' } } onKeyDown(e) { @@ -41,7 +41,7 @@ export default class ToggleInputButton extends Component { className="form-control" placeholder={placeholder} disabled={checked} - value={this.state.txt || ''} + value={this.state.txt} type={inputType || 'text'} onChange={e => this.setState({ txt: e.target.value })} onKeyDown={e => this.onKeyDown(e)} -- cgit v1.2.3 From a416732665aa7a0fb56e20f9888fd9488750a4df Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 18 Aug 2016 16:44:49 +0200 Subject: refactor dropdown menu, view selector --- web/src/js/components/common/Dropdown.jsx | 56 ++++++++++++++++++++++++++++ web/src/js/components/common/FileChooser.jsx | 2 +- 2 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 web/src/js/components/common/Dropdown.jsx (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx new file mode 100644 index 00000000..9180767f --- /dev/null +++ b/web/src/js/components/common/Dropdown.jsx @@ -0,0 +1,56 @@ +import React, { Component, PropTypes } from 'react' +import classnames from 'classnames' + +export default class Dropdown extends Component { + + static propTypes = { + dropup: PropTypes.bool, + className: PropTypes.string, + btnClass: PropTypes.string.isRequired + } + + static defaultProps = { + dropup: false + } + + constructor(props, context) { + super(props, context) + this.state = { open: false } + this.close = this.close.bind(this) + this.open = this.open.bind(this) + } + + close() { + this.setState({ open: false }) + document.removeEventListener('click', this.close) + } + + open(e){ + e.preventDefault() + if (this.state.open) { + return + } + this.setState({open: !this.state.open}) + document.addEventListener('click', this.close) + } + + render() { + const {dropup, className, btnClass, text, children} = this.props + return ( +
+ + {text} + +
    + {children.map(item => + item.name == "divider" ? +
  • + : +
  • {item}
    • + )} +
+
+ ) + } +} diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index d8a80ad7..d59d2d6d 100644 --- a/web/src/js/components/common/FileChooser.jsx +++ b/web/src/js/components/common/FileChooser.jsx @@ -11,7 +11,7 @@ FileChooser.propTypes = { export default function FileChooser({ icon, text, className, title, onOpenFile }) { let fileInput; return ( - fileInput.click()} + fileInput.click()} className={className} title={title}> -- cgit v1.2.3 From 66e9db3713d54c67be1cf2bef1b0633db084649c Mon Sep 17 00:00:00 2001 From: Clemens Date: Thu, 18 Aug 2016 18:05:38 +0200 Subject: refactor contentviews, dropdown, filemenu and footer --- web/src/js/components/common/Dropdown.jsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx index 9180767f..9db131d4 100644 --- a/web/src/js/components/common/Dropdown.jsx +++ b/web/src/js/components/common/Dropdown.jsx @@ -1,6 +1,8 @@ import React, { Component, PropTypes } from 'react' import classnames from 'classnames' +export function Divider () { return
} + export default class Dropdown extends Component { static propTypes = { @@ -43,12 +45,7 @@ export default class Dropdown extends Component { {text}
    - {children.map(item => - item.name == "divider" ? -
  • - : -
  • {item}
    • - )} + {children.map ( (item, i) =>
  • {item}
    • )}
) -- cgit v1.2.3 From d4b18eae8181051f5230b796046cc7ff56e94862 Mon Sep 17 00:00:00 2001 From: Clemens Date: Fri, 19 Aug 2016 09:23:41 +0200 Subject: refactoring --- web/src/js/components/common/Dropdown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/common') diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx index 9db131d4..cc95a6dc 100644 --- a/web/src/js/components/common/Dropdown.jsx +++ b/web/src/js/components/common/Dropdown.jsx @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react' import classnames from 'classnames' -export function Divider () { return
} +export const Divider = () =>
export default class Dropdown extends Component { -- cgit v1.2.3