1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

made edition registration optional

This commit is contained in:
Tim Daubenschütz 2015-07-09 11:56:54 +02:00
parent e9f0af3e72
commit 35a287b8a1
5 changed files with 177 additions and 14 deletions

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -128,8 +128,67 @@
} }
} }
.ascribe-property-footer{ .ascribe-property-footer {
font-size: 0.8em; font-size: 0.8em;
margin-top: 10px; margin-top: 10px;
width: 100%; 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);
}
}