diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 2b956a7e..eac91d42 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -33,6 +33,9 @@ let Form = React.createClass({ React.PropTypes.arrayOf(React.PropTypes.element) ]), + // Can be used to freeze the whole form + disabled: React.PropTypes.bool, + // You can use the form for inline requests, like the submit click on a button. // For the form to then not display the error on top, you need to enable this option. // It will make use of the GlobalNotification @@ -203,7 +206,8 @@ let Form = React.createClass({ if (child) { return ReactAddons.addons.cloneWithProps(child, { handleChange: this.handleChangeChild, - ref: child.props.name + ref: child.props.name, + editable: !this.props.disabled }); } }); diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js index 6545007c..a47ab00e 100644 --- a/js/components/ascribe_forms/form_register_piece.js +++ b/js/components/ascribe_forms/form_register_piece.js @@ -86,6 +86,7 @@ let RegisterPieceForm = React.createClass({ enableLocalHashing = enableLocalHashing && this.props.enableLocalHashing; return (
@@ -83,7 +105,9 @@ let InputCheckbox = React.createClass({ onChange={this.onChange} checked={this.state.value} defaultChecked={this.props.defaultChecked}/> - + {this.props.children} diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 5a72270c..acb38234 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -6,6 +6,8 @@ import ReactAddons from 'react/addons'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import Tooltip from 'react-bootstrap/lib/Tooltip'; +import { mergeOptions } from '../../utils/general_utils'; + let Property = React.createClass({ propTypes: { hidden: React.PropTypes.bool, @@ -167,9 +169,10 @@ let Property = React.createClass({ } }, - renderChildren() { + renderChildren(style) { return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.addons.cloneWithProps(child, { + style, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, @@ -181,25 +184,32 @@ let Property = React.createClass({ render() { let tooltip = ; - if (this.props.tooltip){ + let style = this.props.style ? mergeOptions({}, this.props.style) : {}; + + if(this.props.tooltip){ tooltip = ( {this.props.tooltip} ); } let footer = null; - if (this.props.footer){ + if(this.props.footer){ footer = (
{this.props.footer}
); } + + if(!this.props.editable) { + style.cursor = 'not-allowed'; + } + return (
+ style={style}> {this.state.errors} { this.props.label} - {this.renderChildren()} + {this.renderChildren(style)} {footer}
diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index e8a57832..ad498646 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -153,12 +153,10 @@ /* Taken from: http://www.htmllion.com/css3-checkbox.html */ .checkbox { display: inline-block; - cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-size: .9em; - color: rgba(0, 0, 0, .5); vertical-align:middle; > span {