diff --git a/js/components/ascribe_collapsible/collapsible_paragraph.js b/js/components/ascribe_collapsible/collapsible_paragraph.js index 84e795dd..02d12c75 100644 --- a/js/components/ascribe_collapsible/collapsible_paragraph.js +++ b/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({ diff --git a/js/components/ascribe_forms/property_collapsible.js b/js/components/ascribe_forms/property_collapsible.js new file mode 100644 index 00000000..f3a61f65 --- /dev/null +++ b/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 (
+ {this.props.children} +
); + } else { + return null; + } + }, + + render() { + let tooltip = ; + if (this.props.tooltip){ + tooltip = ( + + {this.props.tooltip} + ); + } + + let style = this.state.show ? {} : {paddingBottom: 0}; + + return ( +
+ +
+ + {/* PLEASE LEAVE THE SPACE BETWEEN LABEL and this.props.label */} + {this.props.checkboxLabel} +
+
+ {this.renderChildren()} +
+ ); + } +}); + +export default PropertyCollapsile; \ No newline at end of file diff --git a/js/components/register_piece.js b/js/components/register_piece.js index f7432207..87429bd3 100644 --- a/js/components/register_piece.js +++ b/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/> + + {getLangText('Editions')} + + {this.getLicenses()} diff --git a/js/constants/languages.js b/js/constants/languages.js index 4bc7dcd6..4d8caeb1 100644 --- a/js/constants/languages.js +++ b/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' } }; diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index 42587654..7c655547 100644 --- a/sass/ascribe_settings.scss +++ b/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); + } } \ No newline at end of file