made edition registration optional

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -6,8 +6,6 @@ import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 
 import classNames from 'classnames';
 
-import { getLangText } from '../../utils/lang_utils.js';
-
 
 const CollapsibleParagraph = React.createClass({
 

js/components/ascribe_forms/property_collapsible.js

@@ -0,0 +1,91 @@
+'use strict';
+
+import React from 'react';
+
+import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import classNames from 'classnames';
+
+
+let PropertyCollapsile = React.createClass({
+    propTypes: {
+        children: React.PropTypes.arrayOf(React.PropTypes.element),
+        checkboxLabel: React.PropTypes.string,
+        tooltip: React.PropTypes.string
+    },
+
+    mixins: [CollapsibleMixin],
+
+    getInitialState() {
+        return {
+            show: false
+        };
+    },
+
+    getCollapsibleDOMNode(){
+        return React.findDOMNode(this.refs.panel);
+    },
+
+    getCollapsibleDimensionValue(){
+        return React.findDOMNode(this.refs.panel).scrollHeight;
+    },
+
+    handleFocus() {
+        this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
+        this.setState({
+            show: this.refs.checkboxCollapsible.getDOMNode().checked
+        });
+    },
+
+    renderChildren() {
+        if(this.state.show) {
+            return (<div
+                        className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'}
+                        ref="panel">
+                            {this.props.children}
+                    </div>);
+        } else {
+            return null;
+        }
+    },
+
+    render() {
+        let tooltip = <span/>;
+        if (this.props.tooltip){
+            tooltip = (
+                <Tooltip>
+                    {this.props.tooltip}
+                </Tooltip>);
+        }
+
+        let style = this.state.show ? {} : {paddingBottom: 0};
+
+        return (
+            <div
+                className={'ascribe-settings-wrapper'}
+                style={style}>
+                <OverlayTrigger
+                    delay={500}
+                    placement="top"
+                    overlay={tooltip}>
+                    <div
+                        className="ascribe-settings-property-collapsible-toggle"
+                        onClick={this.handleFocus}
+                        onFocus={this.handleFocus}>
+                        <input
+                            id="checkboxCollapsible"
+                            type="checkbox"
+                            ref="checkboxCollapsible"/>
+                        {/* PLEASE LEAVE THE SPACE BETWEEN LABEL and this.props.label */}
+                        <span className="checkbox"> {this.props.checkboxLabel}</span>
+                    </div>
+                </OverlayTrigger>
+                {this.renderChildren()}
+            </div>
+        );
+    }
+});
+
+export default PropertyCollapsile;

js/components/register_piece.js

@@ -23,6 +23,7 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
+import PropertyCollapsible from './ascribe_forms/property_collapsible';
 import FormPropertyHeader from './ascribe_forms/form_property_header';
 
 import LoginContainer from './login_container';
@@ -221,6 +222,14 @@ let RegisterPiece = React.createClass( {
                                         min={0}
                                         required/>
                                 </Property>
+                                <PropertyCollapsible
+                                    checkboxLabel={getLangText('Specify editions')}>
+                                    <span>{getLangText('Editions')}</span>
+                                    <input
+                                        type="number"
+                                        placeholder="(e.g. 32)"
+                                        min={0}/>
+                                </PropertyCollapsible>
                                 {this.getLicenses()}
                             </Form>
                         </Col>

js/constants/languages.js

@@ -65,7 +65,7 @@ const languages = {
         'Account': 'Account',
         'Copyright license%s': 'Copyright license%s',
         'Files to upload': 'Files to upload',
-        'Lock down title': 'Lock down title',
+        'Register your work': 'Register your work',
         'Artist Name': 'Artist Name',
         'The name of the creator': 'The name of the creator',
         'Number of editions': 'Number of editions',
@@ -85,8 +85,8 @@ const languages = {
         'terms of service': 'terms of service',
         'privacy': 'privacy',
         'Search%s': 'Search%s',
-        'Hide all Editions' : 'Hide all Editions',
-        'Hide editions' : 'Hide editions',
+        'Hide all Editions': 'Hide all Editions',
+        'Hide editions': 'Hide editions',
         'Show all Editions': 'Show all Editions',
         'Show editions': 'Show editions',
         'Edition': 'Edition',
@@ -203,6 +203,8 @@ const languages = {
         'NEW WORK': 'NEW WORK',
         'Have someone else sell the artwork': 'Have someone else sell the artwork',
         'Loan History': 'Loan History',
+        'Title': 'Title',
+        'Specify editions': 'Specify editions'
     },
     'de': {
         'ID': 'ID',
@@ -268,7 +270,7 @@ const languages = {
         'Account': 'Account',
         'Copyright license%s': 'Copyright license%s',
         'Files to upload': 'Files to upload',
-        'Lock down title': 'Lock down title',
+        'Register your work': 'Register your work',
         'Artist Name': 'Artist Name',
         'The name of the creator': 'The name of the creator',
         'Number of editions': 'Number of editions',
@@ -288,8 +290,8 @@ const languages = {
         'terms of service': 'terms of service',
         'privacy': 'privacy',
         'Search%s': 'Search%s',
-        'Hide all Editions' : 'Hide all Editions',
-        'Hide editions' : 'Hide editions',
+        'Hide all Editions': 'Hide all Editions',
+        'Hide editions': 'Hide editions',
         'Show all Editions': 'Show all Editions',
         'Show editions': 'Show editions',
         'Edition': 'Edition',
@@ -406,6 +408,8 @@ const languages = {
         'NEW WORK': 'NEW WORK',
         'Have someone else sell the artwork': 'Have someone else sell the artwork',
         'Loan History': 'Loan History',
+        'Title': 'Titel',
+        'Specify editions': 'Specify editions'
     },
     'fr': {
         'ID': 'ID',
@@ -471,7 +475,7 @@ const languages = {
         'Account': 'Compte',
         'Copyright license%s': 'License de droit d\'auteur%s',
         'Files to upload': 'Fichiers à télécharger',
-        'Lock down title': 'Verrouillez le titre',
+        'Register your work': 'Verrouillez le titre',
         'Artist Name': 'Nom de l\'artiste',
         'The name of the creator': 'Le nom du créateur',
         'Number of editions': 'Nombre d\'éditions',
@@ -489,10 +493,10 @@ const languages = {
         'api': 'api',
         'impressum': 'impressum',
         'terms of service': 'conditions d\'utilisation',
-        'privacy':  'confidentialité',
+        'privacy': 'confidentialité',
         'Search%s': 'Rechercher%s',
-        'Hide all Editions' : 'Cacher toutes les Éditions',
-        'Hide editions' : 'Cacher les éditions',
+        'Hide all Editions': 'Cacher toutes les Éditions',
+        'Hide editions': 'Cacher les éditions',
         'Show all Editions': 'Montrer toutes les Éditions',
         'Show editions': 'Montrer les éditions',
         'Edition': 'Édition',
@@ -565,7 +569,7 @@ const languages = {
         'Loan start date': 'Date du commencement du prêt',
         'Loan end date': 'Date de la fin de prêt',
         'LOAN': 'PRÊT',
-        'I transfer ownership of': 'Je transfère la propriété de' ,
+        'I transfer ownership of': 'Je transfère la propriété de',
         'Transferee email': 'Courriel du cessionnaire',
         'TRANSFER': 'TRANSFÉRER',
         'Forgot your password': 'Oubliez votre mot de passe',
@@ -609,6 +613,8 @@ const languages = {
         'NEW WORK': 'NOUVEL OEUVRE',
         'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre',
         'Loan History': 'Historique de Prêts',
+        'Title': 'Title',
+        'Specify editions': 'Specify editions'
     }
 };
 

sass/ascribe_settings.scss

@@ -128,8 +128,67 @@
     }
 }
 
-.ascribe-property-footer{
+.ascribe-property-footer {
     font-size: 0.8em;
     margin-top: 10px;
     width: 100%;
+}
+
+.ascribe-settings-property-collapsible-toggle {
+    text-align: left;
+    display: inline-block;
+    width: 100%;
+    border-top: 1px solid rgba(0,0,0,.05);
+    
+    padding: .5em 1.5em .5em 1.5em;
+
+    cursor:pointer;
+
+    /* 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 {
+            position: relative;
+            top: 1px;
+            left: 5px;
+
+            &:hover {
+                color: rgba(2, 182, 163, 1);
+            }
+        }
+    }
+
+    input[type=checkbox] {
+        display:none; 
+    }
+
+    .checkbox:before {
+        content: "";
+        display: inline-block;
+        width: 17px;
+        height: 17px;
+        vertical-align:middle;
+        background-color: white;
+        color: #f3f3f3;
+        text-align: center;
+
+        border-radius: 1px;
+        border: 1px solid rgba(0, 0, 0, .5);
+    }
+
+    input[type=checkbox]:checked + .checkbox:before {
+        line-height: .8;
+
+        content: "\2713";
+        font-size: 20px;
+        color: rgba(2, 182, 163, 1);
+    }
 }