Merge remote-tracking branch 'remotes/origin/AD-551-work-on-burn-down-list' into AD-419-decouple-piece-registration-from-

js/components/ascribe_forms/input_checkbox.js

@@ -2,48 +2,43 @@
 
 import React from 'react';
 
-import AlertMixin from '../../mixins/alert_mixin';
+import { getLangText } from '../../utils/lang_utils';
 
 let InputCheckbox = React.createClass({
     propTypes: {
-        submitted: React.PropTypes.bool.isRequired,
         required: React.PropTypes.string.isRequired,
         label: React.PropTypes.string.isRequired
     },
 
-    mixins: [AlertMixin],
-
     getInitialState() {
         return {
-            value: null,
+            show: false
-            alerts: null // needed in AlertMixin
         };
     },
-    
+
-    handleChange(event) {
+    handleFocus() {
-        this.setState({value: event.target.value});
+        this.refs.checkbox.getDOMNode().checked = !this.refs.checkbox.getDOMNode().checked;
+        this.setState({
+            show: this.refs.checkbox.getDOMNode().checked
+        });
     },
 
     render() {
-        let alerts = (this.props.submitted) ? null : this.state.alerts;
         return (
-            <div className="form-group">
+            <span
-                {alerts}
+                onClick={this.handleFocus}
-                <div className="input-checkbox-ascribe">
+                onFocus={this.handleFocus}>
-                    <div className="checkbox">
+                <input type="checkbox" ref="checkbox"/>
-                        <label>
+                <span className="checkbox">
-                            <input
+                    <span>
-                                type="checkbox"
+                        {' ' + getLangText('I agree to the Terms of Service') + ' '}
-                                required={this.props.required}
+                        (<a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                onChange={this.handleChange}
+                            {getLangText('read')}
-                            />
+                        </a>)
-                            {this.props.label}
+                    </span>
-                        </label>
+                </span>
-                    </div>
+            </span>
-                </div>
-            </div>
         );
-
     }
 });
 

js/components/ascribe_forms/property.js

@@ -18,13 +18,22 @@ let Property = React.createClass({
         ]),
         footer: React.PropTypes.element,
         handleChange: React.PropTypes.func,
-        ignoreFocus: React.PropTypes.bool
+        ignoreFocus: React.PropTypes.bool,
+        className: React.PropTypes.string,
+        onClick: React.PropTypes.func,
+        onChange: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]),
+        style: React.PropTypes.object
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false
+            hidden: false,
+            className: ''
         };
     },
 
@@ -36,12 +45,14 @@ let Property = React.createClass({
             errors: null
         };
     },
+
     componentWillReceiveProps(){
         this.setState({
             initialValue: this.refs.input.getDOMNode().defaultValue,
             value: this.refs.input.getDOMNode().value
         });
     },
+
     reset(){
         // maybe do reset by reload instead of frontend state?
         this.setState({value: this.state.initialValue});
@@ -62,26 +73,39 @@ let Property = React.createClass({
         }
         this.setState({value: event.target.value});
     },
+
     handleFocus() {
+        // if ignoreFocus (bool) is defined, then just ignore focusing on
+        // the property and input
         if(this.props.ignoreFocus) {
             return;
         }
+
+        // if onClick is defined from the outside,
+        // just call it
+        if(this.props.onClick) {
+            this.props.onClick();
+        }
+
         this.refs.input.getDOMNode().focus();
         this.setState({
             isFocused: true
         });
     },
+
     handleBlur() {
         this.setState({
             isFocused: false
         });
     },
+
     handleSuccess(){
         this.setState({
             isFocused: false,
             errors: null
         });
     },
+
     setErrors(errors){
         this.setState({
             errors: errors.map((error) => {
@@ -89,9 +113,11 @@ let Property = React.createClass({
             })
         });
     },
+
     clearErrors(){
         this.setState({errors: null});
     },
+
     getClassName() {
         if(this.props.hidden){
             return 'is-hidden';
@@ -108,6 +134,7 @@ let Property = React.createClass({
             return '';
         }
     },
+
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
@@ -120,6 +147,7 @@ let Property = React.createClass({
             });
         });
     },
+
     render() {
         let tooltip = <span/>;
         if (this.props.tooltip){
@@ -139,12 +167,13 @@ let Property = React.createClass({
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                onfocus={this.handleFocus}>
+                onFocus={this.handleFocus}
+                style={this.props.style}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"
                     overlay={tooltip}>
-                    <div className="ascribe-settings-property">
+                    <div className={'ascribe-settings-property ' + this.props.className}>
                         {this.state.errors}
                         <span>{ this.props.label}</span>
                         {this.renderChildren()}

js/components/signup_container.js

@@ -13,8 +13,10 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
+import FormPropertyHeader from './ascribe_forms/form_property_header';
 import InputCheckbox from './ascribe_forms/input_checkbox';
 
+
 import apiUrls from '../constants/api_urls';
 
 
@@ -66,9 +68,6 @@ let SignupContainer = React.createClass({
         return (
             <div className="ascribe-login-wrapper">
                 <br/>
-                <div className="ascribe-login-text ascribe-login-header">
-                    {getLangText('Welcome to')} ascribe...
-                </div>
                 <SignupForm handleSuccess={this.handleSuccess}/>
             </div>
         );
@@ -77,6 +76,10 @@ let SignupContainer = React.createClass({
 
 
 let SignupForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func
+    },
+
     mixins: [Router.Navigation],
 
     handleSuccess(response){
@@ -94,6 +97,7 @@ let SignupForm = React.createClass({
             getLangText('Store it in a safe place') + '!';
         return (
             <Form
+                className="ascribe-form-bordered"
                 ref='form'
                 url={apiUrls.users_signup}
                 handleSuccess={this.handleSuccess}
@@ -106,6 +110,9 @@ let SignupForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </button>
                     }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                </FormPropertyHeader>
                 <Property
                     name='email'
                     label={getLangText('Email')}>
@@ -142,16 +149,12 @@ let SignupForm = React.createClass({
                         type="text"
                         placeholder={getLangText('Enter a promocode here (Optional)')}/>
                 </Property>
-                <hr />
+                <Property
-                <InputCheckbox
+                    name="terms"
-                    name='terms'
+                    className="ascribe-settings-property-collapsible-toggle"
-                    required="required"
+                    style={{paddingBottom: 0}}>
-                    label={
+                    <InputCheckbox />
-                        <div>
+                </Property>
-                            <a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                {getLangText('I agree to the')}&nbsp;{getLangText('Terms of Service')}
-                            </a>
-                        </div>}/>
             </Form>
         );
     }

js/constants/languages.js

@@ -207,6 +207,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     },
     'de': {
         'ID': 'ID',
@@ -414,6 +416,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     },
     'fr': {
         'ID': 'ID',
@@ -621,6 +625,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     }
 };
 

sass/ascribe_accordion_list.scss

@@ -122,8 +122,11 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 }
 
 span.ascribe-accordion-list-table-toggle {
-    ::selection { background: transparent; }
+    -webkit-user-select: none;
-    ::-moz-selection { background: transparent; }
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+    
     &:hover {
         color: $ascribe-color-dark;
         cursor:pointer;

sass/ascribe_settings.scss

@@ -28,13 +28,13 @@
 .is-error {
     background-color: rgba(169, 68, 66, 0.05);
     border-left: 3px solid rgba(169, 68, 66, 1);
-    div {
+    > div {
-        span {
+        > span {
             color: rgba(169, 68, 66, 1);
             font-size: 0.9em;
             margin-right: 1em;
         }
-        input, textarea {
+        > input, > textarea {
             color: #666;
         }
     }
@@ -46,20 +46,18 @@
 
 .is-fixed {
     cursor: default;
-    div {
+    > div {
         cursor: default;
-        span {
+        > span {
             cursor: default;
         }
-        input, div, pre, textarea {
+        > input, > div, > pre, > textarea {
             cursor: default;
             color: #666;
         }
     }
 }
 
-
-
 .ascribe-settings-property {
     display: inline-block;
     width: 100%;
@@ -72,19 +70,19 @@
 
     cursor:pointer;
     
-    input, div, span:not(.glyphicon), pre, textarea, select {
+    > input, > div, > span:not(.glyphicon), > pre, > textarea, > select {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
    
-    span {
+    > span {
         font-weight: normal;
         font-size: 0.9em;
         color: rgba(0,0,0,.5);
     }
 
-    div {
+    > div {
         /* margin-top: 10px; */
-        div:not(.file-drag-and-drop div) {
+        > div:not(.file-drag-and-drop div) {
           padding-left: 0;
           font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
           font-weight: normal;
@@ -94,11 +92,11 @@
         }
     }
 
-    .progressbar-container, .progressbar-progress {
+    > .progressbar-container, .progressbar-progress {
         margin-top: 0 !important;
     }
 
-    input, pre, textarea, select {
+    > input, > pre, > textarea, > select {
         font-weight: 400;
         font-size: 1.1em;
         width:100%;
@@ -121,7 +119,7 @@
 
     }
 
-    textarea{
+    > textarea{
         color: #666;
         margin-top: 1em;
         padding: 0;
@@ -155,14 +153,15 @@
         color: rgba(0, 0, 0, .5);
         vertical-align:middle;
 
-        span {
+        > span {
             position: relative;
             top: 1px;
             left: 5px;
 
-            &:hover {
+            -webkit-user-select: none;
-                color: rgba(2, 182, 163, 1);
+            -moz-user-select: none;
-            }
+            -khtml-user-select: none;
+            -ms-user-select: none;
         }
     }
 

sass/main.scss

@@ -97,6 +97,11 @@ hr {
     padding-right:0;
 }
 
+.clear-margins {
+    margin-top:0;
+    margin-bottom:0;
+}
+
 .ascribe-color {
     color: $ascribe-color;
 }