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

2024-11-15 01:25:17 +01:00 · 2015-07-10 17:52:39 +02:00 · 2015-07-10 17:52:39 +02:00 · e282da8474
commit e282da8474
parent b58fe51722 e55bc239b4
7 changed files with 104 additions and 64 deletions
--- a/js/components/ascribe_forms/input_checkbox.js
+++ b/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,
-            alerts: null // needed in AlertMixin
+            show: false
        };
    },

-    handleChange(event) {
-        this.setState({value: event.target.value});
+    handleFocus() {
+        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">
-                {alerts}
-                <div className="input-checkbox-ascribe">
-                    <div className="checkbox">
-                        <label>
-                            <input
-                                type="checkbox"
-                                required={this.props.required}
-                                onChange={this.handleChange}
-                            />
-                            {this.props.label}
-                        </label>
-                    </div>
-                </div>
-            </div>
+            <span
+                onClick={this.handleFocus}
+                onFocus={this.handleFocus}>
+                <input type="checkbox" ref="checkbox"/>
+                <span className="checkbox">
+                    <span>
+                        {' ' + getLangText('I agree to the Terms of Service') + ' '}
+                        (<a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
+                            {getLangText('read')}
+                        </a>)
+                    </span>
+                </span>
+            </span>
        );
-
    }
 });

--- a/js/components/ascribe_forms/property.js
+++ b/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()}
--- a/js/components/signup_container.js
+++ b/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 />
-                <InputCheckbox
-                    name='terms'
-                    required="required"
-                    label={
-                        <div>
-                            <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>}/>
+                <Property
+                    name="terms"
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputCheckbox />
+                </Property>
            </Form>
        );
    }
--- a/js/constants/languages.js
+++ b/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',
    }
 };

--- a/sass/ascribe_accordion_list.scss
+++ b/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; }
-    ::-moz-selection { background: transparent; }
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+    
    &:hover {
        color: $ascribe-color-dark;
        cursor:pointer;
--- a/sass/ascribe_settings.scss
+++ b/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 {
-        span {
+    > div {
+        > 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 {
-                color: rgba(2, 182, 163, 1);
-            }
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -khtml-user-select: none;
+            -ms-user-select: none;
        }
    }

--- a/sass/main.scss
+++ b/sass/main.scss
@ -97,6 +97,11 @@ hr {
    padding-right:0;
 }

+.clear-margins {
+    margin-top:0;
+    margin-bottom:0;
+}
+
 .ascribe-color {
    color: $ascribe-color;
 }