Merge remote-tracking branch 'remotes/origin/master' into AD-419-decouple-piece-registration-from-

Conflicts:
	js/components/ascribe_detail/edition.js

js/components/ascribe_accordion_list/accordion_list.js

@@ -1,6 +1,8 @@
 'use strict';
 
 import React from 'react';
+import { getLangText } from '../../utils/lang_utils';
+
 
 let AccordionList = React.createClass({
     propTypes: {
@@ -20,8 +22,8 @@ let AccordionList = React.createClass({
         } else if(this.props.count === 0) {
             return (
                 <div>
-                    <p className="text-center">We could not find any works related to you...</p>
+                    <p className="text-center">{getLangText('We could not find any works related to you%s', '...')}</p>
-                    <p className="text-center">To register one, click <a href="register_piece">here</a>!</p>
+                    <p className="text-center">{getLangText('To register one, click')} <a href="register_piece">{getLangText('here')}</a>!</p>
                 </div>
             );
         } else {
@@ -34,4 +36,4 @@ let AccordionList = React.createClass({
     }
 });
 
-export default AccordionList;
+export default AccordionList;

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -29,7 +29,7 @@ let AccordionListItem = React.createClass({
         if (this.props.content.requestAction){
             return (
                 <OverlayTrigger delay={500} placement="left"
-                            overlay={<Tooltip>You have actions pending in one of your editions</Tooltip>}>
+                            overlay={<Tooltip>{getLangText('You have actions pending in one of your editions')}</Tooltip>}>
                         <Glyphicon glyph='bell' />
                 </OverlayTrigger>);
         }

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -146,10 +146,10 @@ let AccordionListItemTableEditions = React.createClass({
             new ColumnModel(
                 (item) => {
                     return {
-                        'content': item.edition_number + ' of ' + item.num_editions
+                        'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
                     }; },
                     'edition_number',
-                    'Edition',
+                    getLangText('Edition'),
                     TableItemText,
                     1,
                     false,
@@ -172,6 +172,7 @@ let AccordionListItemTableEditions = React.createClass({
                 (item) => {
                     let content = item.acl;
                     if (item.request_action){
+                        // TODO should request be translated?
                         content = [item.request_action + ' request'];
                     }
                     return {
@@ -193,7 +194,7 @@ let AccordionListItemTableEditions = React.createClass({
                 <AccordionListItemTableToggle
                     className="ascribe-accordion-list-table-toggle"
                     onClick={this.toggleTable}
-                    message={show && typeof editionsForPiece !== 'undefined' ? <span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span> Hide editions</span> : <span><span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span> Show editions {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}</span>} />
+                    message={show && typeof editionsForPiece !== 'undefined' ? <span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span> {getLangText('Hide editions')}</span> : <span><span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span> {getLangText('Show editions')} {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}</span>} />
                 <AccordionListItemTable
                     parentId={this.props.parentId}
                     itemList={editionsForPiece}
@@ -211,4 +212,4 @@ let AccordionListItemTableEditions = React.createClass({
     }
 });
 
-export default AccordionListItemTableEditions;
+export default AccordionListItemTableEditions;

js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+
 let AccordionListItemTableToggle = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
@@ -23,4 +24,4 @@ let AccordionListItemTableToggle = React.createClass({
     }
 });
 
-export default AccordionListItemTableToggle;
+export default AccordionListItemTableToggle;

js/components/ascribe_buttons/acl_button.js

@@ -13,6 +13,9 @@ import AppConstants from '../../constants/application_constants';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import { getLangText } from '../../utils/lang_utils.js'
+
+
 let AclButton = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
@@ -26,39 +29,39 @@ let AclButton = React.createClass({
     actionProperties(){
         if (this.props.action === 'consign'){
             return {
-                title: 'Consign artwork',
+                title: getLangText('Consign artwork'),
-                tooltip: 'Have someone else sell the artwork',
+                tooltip: getLangText('Have someone else sell the artwork'),
                 form: <ConsignForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
                 handleSuccess: this.showNotification
             };
         }
         if (this.props.action === 'unconsign'){
             return {
-                title: 'Unconsign artwork',
+                title: getLangText('Unconsign artwork'),
-                tooltip: 'Have the owner manage his sales again',
+                tooltip: getLangText('Have the owner manage his sales again'),
                 form: <UnConsignForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
                 handleSuccess: this.showNotification
             };
         }else if (this.props.action === 'transfer') {
             return {
-                title: 'Transfer artwork',
+                title: getLangText('Transfer artwork'),
-                tooltip: 'Transfer the ownership of the artwork',
+                tooltip: getLangText('Transfer the ownership of the artwork'),
                 form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
                 handleSuccess: this.showNotification
             };
         }
         else if (this.props.action === 'loan'){
             return {
-                title: 'Loan artwork',
+                title: getLangText('Loan artwork'),
-                tooltip: 'Loan your artwork for a limited period of time',
+                tooltip: getLangText('Loan your artwork for a limited period of time'),
                 form: <LoanForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
                 handleSuccess: this.showNotification
             };
         }
         else if (this.props.action === 'share'){
             return {
-                title: 'Share artwork',
+                title: getLangText('Share artwork'),
-                tooltip: 'Share the artwork',
+                tooltip: getLangText('Share the artwork'),
                 form: <ShareForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
                 handleSuccess: this.showNotification
             };

js/components/ascribe_buttons/button_submit_close.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let ButtonSubmitOrClose = React.createClass({
     propTypes: {
@@ -22,7 +23,7 @@ let ButtonSubmitOrClose = React.createClass({
         return (
             <div className="modal-footer">
                 <button type="submit" className="btn btn-ascribe-inv">{this.props.text}</button>
-                <button className="btn btn-ascribe-inv" onClick={this.props.onClose}>CLOSE</button>
+                <button className="btn btn-ascribe-inv" onClick={this.props.onClose}>{getLangText('CLOSE')}</button>
             </div>
         );
     }

js/components/ascribe_buttons/delete_button.js

@@ -13,6 +13,7 @@ import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import { getAvailableAcls } from '../../utils/acl_utils';
+import { getLangText } from '../../utils/lang_utils.js'
 
 import EditionListActions from '../../actions/edition_list_actions';
 
@@ -42,11 +43,11 @@ let DeleteButton = React.createClass({
 
         if (availableAcls.indexOf('delete') > -1) {
             content = <EditionDeleteForm editions={ this.props.editions }/>;
-            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">DELETE</Button>;
+            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('DELETE')}</Button>;
         }
         else if (availableAcls.indexOf('del_from_collection') > -1){
             content = <EditionRemoveFromCollectionForm editions={ this.props.editions }/>;
-            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">REMOVE FROM COLLECTION</Button>;
+            btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
         }
         else{
             return null;
@@ -55,8 +56,8 @@ let DeleteButton = React.createClass({
             <ModalWrapper
                 button={ btnDelete }
                 handleSuccess={ this.showNotification }
-                title='Remove Edition'
+                title={getLangText('Remove Edition')}
-                tooltip='Click to remove edition'>
+                tooltip={getLangText('Click to remove edition')}>
                 { content }
             </ModalWrapper>
         );

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -6,6 +6,8 @@ import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 
 import classNames from 'classnames';
 
+import { getLangText } from '../../utils/lang_utils.js'
+
 
 const CollapsibleParagraph = React.createClass({
 
@@ -41,7 +43,7 @@ const CollapsibleParagraph = React.createClass({
 
     render() {
         let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? '[hide]' : '[show]';
+        let text = this.isExpanded() ? '[' + getLangText('hide') + ']' : '[' + getLangText('show') + ']';
         if(this.props.show) {
             return (
                 <div className="ascribe-detail-header">

js/components/ascribe_detail/edition.js

@@ -68,7 +68,6 @@ let Edition = React.createClass({
     },
 
     render() {
-
         return (
             <Row>
                 <Col md={6}>
@@ -95,7 +94,7 @@ let Edition = React.createClass({
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Further Details"
+                        title={getLangText('Further Details')}
                         show={this.props.edition.acl.indexOf('edit') > -1
                             || Object.keys(this.props.edition.extra_data).length > 0
                             || this.props.edition.other_data !== null}>
@@ -108,35 +107,35 @@ let Edition = React.createClass({
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Certificate of Authenticity"
+                        title={getLangText('Certificate of Authenticity')}
                         show={this.props.edition.acl.indexOf('coa') > -1}>
                         <CoaDetails
                             edition={this.props.edition}/>
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Provenance/Ownership History"
+                        title={getLangText('Provenance/Ownership History')}
                         show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Consignment History"
+                        title={getLangText('Consignment History')}
                         show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Loan History"
+                        title={getLangText('Loan History')}
                         show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
                         <EditionDetailHistoryIterator
                             history={this.props.edition.loan_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="SPOOL Details">
+                        title={getLangText('SPOOL Details')}>
                         <SpoolDetails
                             edition={this.props.edition} />
                     </CollapsibleParagraph>
@@ -212,10 +211,10 @@ let EditionSummary = React.createClass({
     render() {
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty label="EDITION"
+                <EditionDetailProperty label={getLangText('EDITION')}
-                    value={this.props.edition.edition_number + ' of ' + this.props.edition.num_editions} />
+                    value={this.props.edition.edition_number + ' ' + getLangText('of') + ' ' + this.props.edition.num_editions} />
-                <EditionDetailProperty label="ID" value={ this.props.edition.bitcoin_id } />
+                <EditionDetailProperty label={getLangText('ID')} value={ this.props.edition.bitcoin_id } />
-                <EditionDetailProperty label="OWNER" value={ this.props.edition.owner } />
+                <EditionDetailProperty label={getLangText('OWNER')} value={ this.props.edition.owner } />
                 {this.getStatus()}
                 <br/>
                 {this.getActions()}
@@ -260,7 +259,7 @@ let EditionPersonalNote = React.createClass({
     },
     showNotification(){
         this.props.handleSuccess();
-        let notification = new GlobalNotificationModel('Private note saved', 'success');
+        let notification = new GlobalNotificationModel(getLangText('Private note saved'), 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -272,13 +271,13 @@ let EditionPersonalNote = React.createClass({
                     handleSuccess={this.showNotification}>
                     <Property
                         name='note'
-                        label='Personal note (private)'
+                        label={getLangText('Personal note (private)')}
                         editable={true}>
                         <InputTextAreaToggable
                             rows={3}
                             editable={true}
                             defaultValue={this.props.edition.note_from_user}
-                            placeholder='Enter a personal note...'
+                            placeholder={getLangText('Enter a personal note%s', '...')}
                             required/>
                     </Property>
                     <Property hidden={true} name='bitcoin_id'>
@@ -299,7 +298,7 @@ let EditionPublicEditionNote = React.createClass({
     },
     showNotification(){
         this.props.handleSuccess();
-        let notification = new GlobalNotificationModel('Public note saved', 'success');
+        let notification = new GlobalNotificationModel(getLangText('Public note saved'), 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
     render() {
@@ -311,13 +310,13 @@ let EditionPublicEditionNote = React.createClass({
                     handleSuccess={this.showNotification}>
                     <Property
                         name='note'
-                        label='Edition note (public)'
+                        label={getLangText('Edition note (public)')}
                         editable={isEditable}>
                         <InputTextAreaToggable
                             rows={3}
                             editable={isEditable}
                             defaultValue={this.props.edition.public_note}
-                            placeholder='Enter a public note for this edition...'
+                            placeholder={getLangText('Enter a public note for this edition%', '...')}
                             required/>
                     </Property>
                     <Property hidden={true} name='bitcoin_id'>
@@ -517,12 +516,12 @@ let CoaDetails = React.createClass({
                     <p className="text-center ascribe-button-list">
                         <a href={this.state.coa.url_safe} target="_blank">
                             <button className="btn btn-default btn-xs">
-                                Download <Glyphicon glyph="cloud-download"/>
+                                {getLangText('Download')} <Glyphicon glyph="cloud-download"/>
                             </button>
                         </a>
                         <Link to="coa_verify">
                             <button className="btn btn-default btn-xs">
-                                Verify <Glyphicon glyph="check"/>
+                                {getLangText('Verify')} <Glyphicon glyph="check"/>
                             </button>
                         </Link>
 
@@ -560,19 +559,19 @@ let SpoolDetails = React.createClass({
             <Form >
                 <Property
                     name='artwork_id'
-                    label="Artwork ID"
+                    label={getLangText('Artwork ID')}
                     editable={false}>
                     <pre className="ascribe-pre">{bitcoinIdValue}</pre>
                 </Property>
                 <Property
                     name='hash_of_artwork'
-                    label="Hash of Artwork, title, etc"
+                    label={getLangText('Hash of Artwork, title, etc')}
                     editable={false}>
                     <pre className="ascribe-pre">{hashOfArtwork}</pre>
                 </Property>
                 <Property
                     name='owner_address'
-                    label="Owned by SPOOL address"
+                    label={getLangText('Owned by SPOOL address')}
                     editable={false}>
                     <pre className="ascribe-pre">{ownerAddress}</pre>
                 </Property>

js/components/ascribe_detail/edition_container.js

@@ -17,6 +17,11 @@ let EditionContainer = React.createClass({
 
     onChange(state) {
         this.setState(state);
+        let isEncoding = state.edition.digital_work.isEncoding;
+        if (isEncoding !== undefined && isEncoding !== 100) {
+            let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
+            this.setState({timerId: timerId})
+        }
     },
 
     componentDidMount() {
@@ -30,7 +35,7 @@ let EditionContainer = React.createClass({
         // as it will otherwise display wrong/old data once the user loads
         // the edition detail a second time
         EditionActions.updateEdition({});
-        
+        window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
     },
 
@@ -48,6 +53,7 @@ let EditionContainer = React.createClass({
             );
         } else {
             return (
+                // TODO translate?
                 <p>Loading</p>
             );
         }

js/components/ascribe_forms/form_consign.js

@@ -7,6 +7,7 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let ConsignForm = React.createClass({
     mixins: [FormMixin],
@@ -29,12 +30,12 @@ let ConsignForm = React.createClass({
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I consign :
+${getLangText('I consign')} :
-${title}to you.
+${title}${getLangText('to you')}.
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         return (
@@ -43,7 +44,7 @@ ${username}`;
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
                     ref="consignee"
-                    placeHolder="Consignee email"
+                    placeHolder={getLangText('Consignee email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}/>
@@ -54,12 +55,12 @@ ${username}`;
                     />
                 <InputText
                     ref="password"
-                    placeHolder="Password"
+                    placeHolder={getLangText('Password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                <ButtonSubmitOrClose
-                    text="CONSIGN"
+                    text={getLangText('CONSIGN')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_delete_edition.js

@@ -5,6 +5,7 @@ import React from 'react';
 import requests from '../../utils/requests';
 import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
+import { getLangText } from '../../utils/lang_utils';
 
 let EditionDeleteForm = React.createClass({
 
@@ -20,11 +21,11 @@ let EditionDeleteForm = React.createClass({
     renderForm () {
         return (
             <div className="modal-body">
-                <p>Are you sure you would like to permanently delete this edition&#63;</p>
+                <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
-                <p>This is an irrevocable action.</p>
+                <p>{getLangText('This is an irrevocable action%s', '.')}</p>
                 <div className="modal-footer">
-                    <button type="submit" className="btn btn-ascribe-inv" onClick={this.submit}>YES, DELETE</button>
+                    <button type="submit" className="btn btn-ascribe-inv" onClick={this.submit}>{getLangText('YES, DELETE')}</button>
-                    <button className="btn btn-ascribe" onClick={this.props.onRequestHide}>CLOSE</button>
+                    <button className="btn btn-ascribe" onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
                 </div>
             </div>
         );

js/components/ascribe_forms/form_loan.js

@@ -13,6 +13,8 @@ import InputTextArea from './input_textarea';
 import OwnershipFetcher from '../../fetchers/ownership_fetcher';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
+import { getLangText } from '../../utils/lang_utils.js'
+
 let LoanForm = React.createClass({
     
     getInitialState() {
@@ -74,20 +76,20 @@ let LoanForm = React.createClass({
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I loan :
+${getLangText('I loan')} :
-${title}to you.
+${title}${getLangText('to you')}.
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         let contract = <InputHidden ref="terms" value="True"/>;
         if (this.state.loaneeHasContract){
             let label = (<div>
-                            I agree to the&nbsp;
+                            {getLangText('I agree to the')}&nbsp;
                             <a href={this.state.contract_url} target="_blank">
-                                terms of {this.refs.loanee.state.value}
+                                {getLangText('terms of')} {this.refs.loanee.state.value}
                             </a>
                         </div>);
             contract = (<InputCheckbox
@@ -103,14 +105,14 @@ ${username}`;
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
                     ref="loanee"
-                    placeHolder="Loanee email"
+                    placeHolder={getLangText('Loanee email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}
                     onBlur={this.handleLoanEmailBlur}/>
                 <InputText
                     ref="gallery_name"
-                    placeHolder="Gallery/exhibition (optional)"
+                    placeHolder={getLangText('Gallery/exhibition (optional)')}
                     required=""
                     type="text"
                     submitted={this.state.submitted}/>
@@ -118,12 +120,12 @@ ${username}`;
                     <div className="col-xs-6">
                         <InputDate
                             ref="startdate"
-                            placeholderText="Loan start date" />
+                            placeholderText={getLangText('Loan start date')} />
                     </div>
                     <div className="col-xs-6 form-group">
                         <InputDate
                             ref="enddate"
-                            placeholderText="Loan end date" />
+                            placeholderText={getLangText('Loan end date')} />
                     </div>
                 </div>
                 <InputTextArea
@@ -133,13 +135,13 @@ ${username}`;
                     />
                 <InputText
                     ref="password"
-                    placeHolder="Password"
+                    placeHolder={getLangText('Password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 {contract}
                 <ButtonSubmitOrClose
-                    text="LOAN"
+                    text={getLangText('LOAN')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_login.js

@@ -9,6 +9,7 @@ import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 import SignupModal from '../ascribe_modal/modal_signup';
 import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let LoginForm = React.createClass({
     mixins: [FormMixin],
@@ -31,28 +32,28 @@ let LoginForm = React.createClass({
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
                     ref="email"
-                    placeHolder="Email"
+                    placeHolder={getLangText('Email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}/>
                 <InputText
                     ref="password"
-                    placeHolder="Password"
+                    placeHolder={getLangText('Password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 <div>
-                    Forgot your password&#63;
+                    {getLangText('Forgot your password')}&#63;
                     <PasswordResetRequestModal
-                        button={<a className="button" href="#"> Reset password</a>}/>
+                        button={<a className="button" href="#"> {getLangText('Reset password')}</a>}/>
                 </div>
                 <div>
-                    Not a member yet&#63;
+                    {getLangText('Not a member yet')}&#63;
                     <SignupModal
-                        button={<a className="button" href="#"> Sign up</a>}/>
+                        button={<a className="button" href="#"> {getLangText('Sign up')}</a>}/>
                 </div>
                 <ButtonSubmitOrClose
-                    text="LOGIN"
+                    text={getLangText('LOGIN')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>
@@ -60,4 +61,4 @@ let LoginForm = React.createClass({
     }
 });
 
-export default LoginForm;
+export default LoginForm;

js/components/ascribe_forms/form_password_reset.js

@@ -6,6 +6,7 @@ import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import ButtonSubmit from '../ascribe_buttons/button_submit';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PasswordResetForm = React.createClass({
     mixins: [FormMixin],
@@ -29,18 +30,18 @@ let PasswordResetForm = React.createClass({
                 <div>Reset the password for {this.props.email}:</div>
                 <InputText
                     ref="password"
-                    placeHolder="Choose a password"
+                    placeHolder={getLangText('Choose a password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 <InputText
                     ref="password_confirm"
-                    placeHolder="Confirm password"
+                    placeHolder={getLangText('Confirm password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 <ButtonSubmit
-                    text="RESET PASSWORD"
+                    text={getLangText('RESET PASSWORD')}
                     submitted={this.state.submitted} />
             </form>
         );

js/components/ascribe_forms/form_password_reset_request.js

@@ -6,6 +6,7 @@ import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PasswordResetRequestForm = React.createClass({
     mixins: [FormMixin],
@@ -25,12 +26,12 @@ let PasswordResetRequestForm = React.createClass({
             <form id="request_reset_password_modal_content" role="form" onSubmit={this.submit}>
                 <InputText
                     ref="email"
-                    placeHolder="Email"
+                    placeHolder={getLangText('Email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}/>
                 <ButtonSubmitOrClose
-                    text="RESET PASSWORD"
+                    text={getLangText('RESET PASSWORD')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>
@@ -38,4 +39,4 @@ let PasswordResetRequestForm = React.createClass({
     }
 });
 
-export default PasswordResetRequestForm;
+export default PasswordResetRequestForm;

js/components/ascribe_forms/form_piece_extradata.js

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import requests from '../../utils/requests';
+import { getLangText } from '../../utils/lang_utils.js'
 
 import apiUrls from '../../constants/api_urls';
 
@@ -47,7 +48,7 @@ let PieceExtraDataForm = React.createClass({
                         rows={1}
                         editable={this.props.editable}
                         defaultValue={defaultValue}
-                        placeholder={'Fill in ' + this.props.title}
+                        placeholder={getLangText('Fill in%s', ' ') + this.props.title}
                         required/>
                 </Property>
                 <hr />

js/components/ascribe_forms/form_remove_editions_from_collection.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+import { getLangText } from '../../utils/lang_utils.js'
 import requests from '../../utils/requests';
 import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
@@ -20,11 +21,11 @@ let EditionRemoveFromCollectionForm = React.createClass({
     renderForm () {
         return (
             <div className="modal-body">
-                <p>Are you sure you would like to remove these editions from your collection&#63;</p>
+                <p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p>
-                <p>This is an irrevocable action.</p>
+                <p>{getLangText('This is an irrevocable action%s', '.')}</p>
                 <div className="modal-footer">
-                    <button type="submit" className="btn btn-ascribe-inv" onClick={this.submit}>YES, REMOVE</button>
+                    <button type="submit" className="btn btn-ascribe-inv" onClick={this.submit}>{getLangText('YES, REMOVE')}</button>
-                    <button className="btn btn-ascribe" onClick={this.props.onRequestHide}>CLOSE</button>
+                    <button className="btn btn-ascribe" onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
                 </div>
             </div>
         );

js/components/ascribe_forms/form_request_action.js

@@ -8,6 +8,7 @@ import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 
 import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let RequestActionForm = React.createClass({
     mixins: [FormMixin],
@@ -54,10 +55,10 @@ let RequestActionForm = React.createClass({
         let buttons = (
                 <span>
                     <span>
-                        <div id="request_accept" onClick={this.handleRequest} className='btn btn-default btn-sm ascribe-margin-1px'>ACCEPT</div>
+                        <div id="request_accept" onClick={this.handleRequest} className='btn btn-default btn-sm ascribe-margin-1px'>{getLangText('ACCEPT')}</div>
                     </span>
                     <span>
-                        <div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>REJECT</div>
+                        <div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>{getLangText('REJECT')}</div>
                     </span>
                 </span>
         );
@@ -71,7 +72,7 @@ let RequestActionForm = React.createClass({
         return (
             <Alert bsStyle='warning'>
                 <div style={{textAlign: 'center'}}>
-                <div>{ edition.owner } requests you { edition.request_action } this edition.&nbsp;&nbsp;</div>
+                <div>{ edition.owner } {getFormData('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
                 {buttons}
                 </div>
             </Alert>

js/components/ascribe_forms/form_share_email.js

@@ -7,6 +7,8 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
+
 
 let ShareForm = React.createClass({
     mixins: [FormMixin],
@@ -27,19 +29,19 @@ let ShareForm = React.createClass({
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I am sharing :
+${getLangText('I am sharing')} :
-${title}with you.
+${title}${getLangText('with you')}.
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         return (
             <form id="share_modal_content" role="form" key="share_modal_content" onSubmit={this.submit}>
                 <InputText
                     ref="share_emails"
-                    placeHolder="Comma separated emails"
+                    placeHolder={getLangText('Comma separated emails')}
                     required="required"
                     type="text"
                     submitted={this.state.submitted}/>
@@ -49,7 +51,7 @@ ${username}`;
                     required=""
                     />
                 <ButtonSubmitOrClose
-                    text="SHARE"
+                    text={getLangText('SHARE')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_signup.js

@@ -7,6 +7,7 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputCheckbox from './input_checkbox';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let SignupForm = React.createClass({
     mixins: [FormMixin],
@@ -32,43 +33,43 @@ let SignupForm = React.createClass({
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
                     ref="email"
-                    placeHolder="Email"
+                    placeHolder={getLangText('Email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}/>
                 <InputText
                     ref="password"
-                    placeHolder="Choose a password"
+                    placeHolder={getLangText('Choose a password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 <InputText
                     ref="password_confirm"
-                    placeHolder="Confirm password"
+                    placeHolder={getLangText('Confirm password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
                 <div>
-                    Your password must be at least 10 characters.
+                    {getLangText('Your password must be at least 10 characters')}.
-                    This password is securing your digital property like a bank account.
+                    {getLangText('This password is securing your digital property like a bank account')}.
-                    Store it in a safe place!
+                    {getLangText('Store it in a safe place')}!
                 </div>
                 <InputCheckbox
                     ref="terms"
                     required="required"
                     label={
                         <div>
-                            I agree to the&nbsp;
+                            {getLangText('I agree to the')}&nbsp;
-                            <a href="/terms" target="_blank"> Terms of Service</a>
+                            <a href="/terms" target="_blank"> {getLangText('Terms of Service')}</a>
                         </div>}/>
                 <InputText
                     ref="promo_code"
-                    placeHolder="Promocode (Optional)"
+                    placeHolder={getLangText('Promocode (Optional)')}
                     required=""
                     type="text"
                     submitted={this.state.submitted}/>
                 <ButtonSubmitOrClose
-                    text="JOIN US"
+                    text={getLangText('JOIN US')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_transfer.js

@@ -7,7 +7,7 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
-
+import { getLangText } from '../../utils/lang_utils.js'
 
 let TransferForm = React.createClass({
     mixins: [FormMixin],
@@ -29,12 +29,12 @@ let TransferForm = React.createClass({
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I transfer ownership of :
+${getLangText('I transfer ownership of')} :
-${title}to you.
+${title}${getLangText('to you')}.
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         return (
@@ -43,7 +43,7 @@ ${username}`;
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
                     ref="transferee"
-                    placeHolder="Transferee email"
+                    placeHolder={getLangText('Transferee email')}
                     required="required"
                     type="email"
                     submitted={this.state.submitted}/>
@@ -54,7 +54,7 @@ ${username}`;
                     />
                 <InputText
                     ref="password"
-                    placeHolder="Password"
+                    placeHolder={getLangText('Password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
@@ -63,7 +63,7 @@ ${username}`;
                     They cannot be edited after the transfer.
                 </div>
                <ButtonSubmitOrClose
-                    text="TRANSFER"
+                    text={getLangText('TRANSFER')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_unconsign.js

@@ -7,6 +7,7 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputTextArea from './input_textarea';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let UnConsignForm = React.createClass({
     mixins: [FormMixin],
@@ -27,12 +28,12 @@ let UnConsignForm = React.createClass({
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I un-consign:
+${getLangText('I un-consign')}:
-${title}from you.
+${title}${getLangText('from you')}.
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         return (
@@ -45,12 +46,12 @@ ${username}`;
                     required="" />
                 <InputText
                     ref="password"
-                    placeHolder="Password"
+                    placeHolder={getLangText('Password')}
                     required="required"
                     type="password"
                     submitted={this.state.submitted} />
                <ButtonSubmitOrClose
-                    text="UNCONSIGN"
+                    text={getLangText('UNCONSIGN')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/form_unconsign_request.js

@@ -6,6 +6,7 @@ import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputTextArea from './input_textarea';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let UnConsignRequestForm = React.createClass({
     mixins: [FormMixin],
@@ -25,11 +26,11 @@ let UnConsignRequestForm = React.createClass({
         let title = this.props.edition.title;
         let username = this.props.currentUser.username;
         let message =
-`Hi,
+`${getLangText('Hi')},
 
-I request you to un-consign \" ${title} \".
+${getLangText('I request you to un-consign')} \" ${title} \".
 
-Truly yours,
+${getLangText('Truly yours')},
 ${username}`;
 
         return (
@@ -39,7 +40,7 @@ ${username}`;
                     defaultValue={message}
                     required="" />
                 <ButtonSubmitOrClose
-                    text="UNCONSIGN REQUEST"
+                    text={getLangText('UNCONSIGN REQUEST')}
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>

js/components/ascribe_forms/property.js

@@ -17,13 +17,14 @@ let Property = React.createClass({
             React.PropTypes.element
         ]),
         footer: React.PropTypes.element,
-        handleChange: React.PropTypes.func
+        handleChange: React.PropTypes.func,
+        ignoreFocus: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false,
+            hidden: false
         };
     },
 
@@ -62,6 +63,9 @@ let Property = React.createClass({
         this.setState({value: event.target.value});
     },
     handleFocus() {
+        if(this.props.ignoreFocus) {
+            return;
+        }
         this.refs.input.getDOMNode().focus();
         this.setState({
             isFocused: true
@@ -134,7 +138,8 @@ let Property = React.createClass({
         return (
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
-                onClick={this.handleFocus} onfocus={this.handleFocus}>
+                onClick={this.handleFocus}
+                onfocus={this.handleFocus}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"

js/components/ascribe_media/media_player.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
 import Panel from 'react-bootstrap/lib/Panel';
+import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 import AppConstants from '../../constants/application_constants.js';
 
 /**
@@ -72,7 +73,7 @@ let Audio = React.createClass({
 
     ready() {
         window.audiojs.events.ready(function() {
-            var as = audiojs.createAll();
+            window.audiojs.createAll();
         });
     },
 
@@ -87,7 +88,8 @@ let Video = React.createClass({
     propTypes: {
         preview: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
-        extraData: React.PropTypes.array.isRequired
+        extraData: React.PropTypes.array.isRequired,
+        encodingStatus: React.PropTypes.number
     },
 
     mixins: [InjectInHeadMixin],
@@ -132,6 +134,24 @@ let Video = React.createClass({
 });
 
 
+let EncodingStatus = React.createClass({
+    propTypes: {
+        encodingStatus: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <video ref="video" className="video-js vjs-default-skin" poster={this.props.preview}
+                   controls preload="none" width="auto" height="auto">
+                {this.props.extraData.map((data, i) =>
+                <source key={i} type={'video/' + data.type} src={data.url} />
+                )}
+            </video>
+        );
+    }
+});
+
+
 let resourceMap = {
     'image': Image,
     'video': Video,
@@ -144,19 +164,30 @@ let MediaPlayer = React.createClass({
         mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
         preview: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
-        extraData: React.PropTypes.array
+        extraData: React.PropTypes.array,
+        encodingStatus: React.PropTypes.number
     },
 
     render() {
-        let Component = resourceMap[this.props.mimetype] || Other;
+        if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
-
+            return (
-        return (
+                <div className="ascribe-detail-header ascribe-media-player">
-            <div className="ascribe-media-player">
+                    <p><em>Please be patient, the video is been encoded</em></p>
-                <Component preview={this.props.preview}
+                    <ProgressBar now={this.props.encodingStatus}
-                           url={this.props.url}
+                        label='%(percent)s%' />
-                           extraData={this.props.extraData} />
+                </div>
-            </div>
+            );
-        );
+        } else {
+            let Component = resourceMap[this.props.mimetype] || Other;
+            return (
+                <div className="ascribe-media-player">
+                    <Component preview={this.props.preview}
+                               url={this.props.url}
+                               extraData={this.props.extraData}
+                               encodingStatus={this.props.encodingStatus} />
+                </div>
+            );
+        }
     }
 });
 

js/components/ascribe_modal/modal_login.js

@@ -7,11 +7,12 @@ import LoginForm from '../ascribe_forms/form_login';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let LoginModal = React.createClass({
     handleLoginSuccess(){
         this.props.handleSuccess();
-        let notificationText = 'Login successful';
+        let notificationText = getLangText('Login successful');
         let notification = new GlobalNotificationModel(notificationText, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
@@ -20,9 +21,9 @@ let LoginModal = React.createClass({
         return (
             <ModalWrapper
                 button={this.props.button}
-                title='Log in to ascribe'
+                title={getLangText('Log in to ascribe')}
                 handleSuccess={this.handleLoginSuccess}
-                tooltip='Log in to ascribe'>
+                tooltip={getLangText('Log in to ascribe')}>
                 <LoginForm />
             </ModalWrapper>
         );

js/components/ascribe_modal/modal_password_request_reset.js

@@ -7,10 +7,11 @@ import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_reque
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PasswordResetRequestModal = React.createClass({
     handleResetSuccess(){
-        let notificationText = 'Request succesfully sent, check your email';
+        let notificationText = getLangText('Request successfully sent, check your email');
         let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
@@ -18,9 +19,9 @@ let PasswordResetRequestModal = React.createClass({
         return (
             <ModalWrapper
                 button={this.props.button}
-                title='Reset your password'
+                title={getLangText('Reset your password')}
                 handleSuccess={this.handleResetSuccess}
-                tooltip='Reset your password'>
+                tooltip={getLangText('Reset your password')}>
                 <PasswordResetRequestForm />
             </ModalWrapper>
         );

js/components/ascribe_modal/modal_signup.js

@@ -7,10 +7,11 @@ import SignupForm from '../ascribe_forms/form_signup';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let SignupModal = React.createClass({
     handleSignupSuccess(response){
-        let notificationText = 'We sent an email to your address ' + response.user.email + ', please confirm.';
+        let notificationText = getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.';
         let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
@@ -19,9 +20,9 @@ let SignupModal = React.createClass({
         return (
             <ModalWrapper
                 button={this.props.button}
-                title='Create an account'
+                title={getLangText('Create an account')}
                 handleSuccess={this.handleSignupSuccess}
-                tooltip='Sign up to ascribe'>
+                tooltip={getLangText('Sign up to ascribe')}>
                 <SignupForm />
             </ModalWrapper>
         );

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -15,7 +15,7 @@ import AclButtonList from '../ascribe_buttons/acl_button_list';
 
 
 import { getAvailableAcls } from '../../utils/acl_utils';
-
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PieceListBulkModal = React.createClass({
     propTypes: {
@@ -97,7 +97,7 @@ let PieceListBulkModal = React.createClass({
                                                  
                                     <span
                                         className="piece-list-bulk-modal-clear-all"
-                                        onClick={this.clearAllSelections}>clear all</span>
+                                        onClick={this.clearAllSelections}>{getLangText('clear all')}</span>
                                 </div>
                             </div>
                             <p></p>

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PieceListBulkModalSelectedEditionsWidget = React.createClass({
     propTypes: {
@@ -9,8 +10,8 @@ let PieceListBulkModalSelectedEditionsWidget = React.createClass({
 
     render() {
         return (
-            <span className={this.props.numberOfSelectedEditions < 1 ? 'hidden' : ''}>
+            <span className={this.props.numberOfSelectedEditions < 1 ? getLangText('hidden') : ''}>
-                {this.props.numberOfSelectedEditions} Editions selected
+                {this.props.numberOfSelectedEditions} {getLangText('Editions selected')}
             </span>
         );
     }

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -7,6 +7,7 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import { getLangText } from '../../utils/lang_utils';
 
 let PieceListToolbar = React.createClass({
 
@@ -32,7 +33,7 @@ let PieceListToolbar = React.createClass({
                                 <Input
                                     type='text'
                                     ref="search"
-                                    placeholder="Search..."
+                                    placeholder={getLangText('Search%s', '...')}
                                     onChange={this.searchFor}
                                     addonAfter={searchIcon} />
                             </span>
@@ -44,4 +45,4 @@ let PieceListToolbar = React.createClass({
     }
 });
 
-export default PieceListToolbar;
+export default PieceListToolbar;

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -5,6 +5,7 @@ import React from 'react';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let PieceListToolbarFilterWidgetFilter = React.createClass({
     render() {
@@ -13,16 +14,16 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
         return (
             <DropdownButton title={filterIcon}>
                 <li style={{'textAlign': 'center'}}>
-                    <em>Show Pieces that:</em>
+                    <em>{getLangText('Show Pieces that')}:</em>
                 </li>
                 <MenuItem eventKey='1'>
                     <div className="checkbox">
-                        I can transfer <input type="checkbox" />
+                        {getLangText('I can transfer')} <input type="checkbox" />
                     </div>
                 </MenuItem>
                 <MenuItem eventKey='2'>
                     <div className="checkbox">
-                        I can consign <input type="checkbox" />
+                        {getLangText('I can consign')} <input type="checkbox" />
                     </div>
                 </MenuItem>
             </DropdownButton>

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -1,6 +1,8 @@
 'use strict';
 
 import React from 'react';
+
+import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 
@@ -140,7 +142,6 @@ let FileDragAndDrop = React.createClass({
         return (
             <div
                 className={className}
-                onClick={this.handleOnClick}
                 onDragStart={this.handleDragStart}
                 onDrag={this.handleDrop}
                 onDragEnter={this.handleDragEnter}
@@ -148,7 +149,10 @@ let FileDragAndDrop = React.createClass({
                 onDragOver={this.handleDragOver}
                 onDrop={this.handleDrop}
                 onDragEnd={this.handleDragEnd}>
-                    {hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">Click or drag to add a file</span>}
+                    <FileDragAndDropDialog
+                        multipleFiles={this.props.multiple}
+                        hasFiles={hasFiles}
+                        onClick={this.handleOnClick}/>
                     <FileDragAndDropPreviewIterator
                         files={this.props.filesToUpload}
                         handleDeleteFile={this.handleDeleteFile}
@@ -172,4 +176,4 @@ let FileDragAndDrop = React.createClass({
     }
 });
 
-export default FileDragAndDrop;
+export default FileDragAndDrop;

js/components/ascribe_uploader/file_drag_and_drop_dialog.js

@@ -0,0 +1,37 @@
+'use strict';
+
+import React from 'react';
+
+let FileDragAndDropDialog = React.createClass({
+    propTypes: {
+        hasFiles: React.PropTypes.bool,
+        multipleFiles: React.PropTypes.bool,
+        onClick: React.PropTypes.func
+    },
+
+    render() {
+        if(this.props.hasFiles) {
+            return null;
+        } else {
+            if(this.props.multipleFiles) {
+                return (
+                    <span className="file-drag-and-drop-dialog">Click or drag to add files</span>
+                );
+            } else {
+                return (
+                    <span className="file-drag-and-drop-dialog">
+                        <p>Drag a file here</p>
+                        <p>or</p>
+                        <button
+                            className="btn btn-default"
+                            onClick={this.props.onClick}>
+                                choose a file to upload
+                        </button>
+                    </span>
+                );
+            }
+        }
+    }
+});
+
+export default FileDragAndDropDialog;

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
 import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
-
+import { getLangText } from '../../utils/lang_utils.js'
 
 let FileDragAndDropPreview = React.createClass({
 
@@ -72,7 +72,11 @@ let FileDragAndDropPreview = React.createClass({
 
         if(this.props.areAssetsEditable) {
            removeBtn = (<div className="delete-file">
-                            <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
+                            <span 
+                                className="glyphicon glyphicon-remove text-center"
+                                aria-hidden="true"
+                                title={getLangText('Remove file')}
+                                onClick={this.handleDeleteFile}/>
                         </div>);
         }
 
@@ -86,4 +90,4 @@ let FileDragAndDropPreview = React.createClass({
     }
 });
 
-export default FileDragAndDropPreview;
+export default FileDragAndDropPreview;

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -4,6 +4,7 @@ import React from 'react';
 import ProgressBar from 'react-progressbar';
 
 import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let FileDragAndDropPreviewImage = React.createClass({
     propTypes: {
@@ -40,15 +41,15 @@ let FileDragAndDropPreviewImage = React.createClass({
         let actionSymbol;
         
         if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
+            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
         } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
+            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
         } else if(this.props.progress === 100) {
 
             // only if assets are actually downloadable, there should be a download icon if the process is already at
             // 100%. If not, no actionSymbol should be displayed
             if(this.props.areAssetsDownloadable) {
-                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file"/>;
+                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
             }
 
         } else {
@@ -66,4 +67,4 @@ let FileDragAndDropPreviewImage = React.createClass({
     }
 });
 
-export default FileDragAndDropPreviewImage;
+export default FileDragAndDropPreviewImage;

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -4,6 +4,7 @@ import React from 'react';
 import ProgressBar from 'react-progressbar';
 
 import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js'
 
 let FileDragAndDropPreviewOther = React.createClass({
     propTypes: {
@@ -36,15 +37,15 @@ let FileDragAndDropPreviewOther = React.createClass({
         let actionSymbol;
         
         if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title="Pause upload" onClick={this.toggleUploadProcess}/>;
+            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
         } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title="Resume uploading" onClick={this.toggleUploadProcess}/>;
+            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
         } else if(this.props.progress === 100) {
 
             // only if assets are actually downloadable, there should be a download icon if the process is already at
             // 100%. If not, no actionSymbol should be displayed
             if(this.props.areAssetsDownloadable) {
-                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file"/>;
+                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
             }
 
         } else {
@@ -66,4 +67,4 @@ let FileDragAndDropPreviewOther = React.createClass({
     }
 });
 
-export default FileDragAndDropPreviewOther;
+export default FileDragAndDropPreviewOther;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -6,9 +6,10 @@ import promise from 'es6-promise';
 promise.polyfill();
 
 import fetch from 'isomorphic-fetch';
-import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
+import { getLangText } from '../../utils/lang_utils';
+
 import S3Fetcher from '../../fetchers/s3_fetcher';
 
 import fineUploader from 'fineUploader';
@@ -144,9 +145,9 @@ var ReactS3FineUploader = React.createClass({
     },
 
     // since the csrf header is defined in this component's props,
-    // everytime the csrf cookie is changed we'll need to reinitalize 
+    // everytime the csrf cookie is changed we'll need to reinitalize
     // fineuploader and update the actual csrf token
-    componentWillUpdate(nextProps, nextState) {
+    componentWillUpdate() {
         let potentiallyNewCSRFToken = getCookie('csrftoken');
         if(this.state.csrfToken !== potentiallyNewCSRFToken) {
             this.setState({
@@ -376,12 +377,12 @@ var ReactS3FineUploader = React.createClass({
 
     onDeleteComplete(id, xhr, isError) {
         if(isError) {
-            let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
+            let notification = new GlobalNotificationModel(getLangText('Couldn\'t delete file'), 'danger', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         } else {
             this.removeFileWithIdFromFilesToUpload(id);
 
-            let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
+            let notification = new GlobalNotificationModel(getLangText('File deleted'), 'success', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
 
@@ -463,8 +464,8 @@ var ReactS3FineUploader = React.createClass({
 
             // replace filelist with first-element file list
             files = tempFilesList;
-
+            // TOOD translate?
-            let notification = new GlobalNotificationModel('Only one file allowed (took first one)', 'danger', 10000);
+            let notification = new GlobalNotificationModel(getLangText('Only one file allowed (took first one)'), 'danger', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
 

js/components/coa_verify_container.js

@@ -22,13 +22,13 @@ let CoaVerifyContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <br/>
                 <div className="ascribe-login-text ascribe-login-header">
-                    Verify your Certificate of Authenticity
+                    {getLangText('Verify your Certificate of Authenticity')}
                 </div>
 
                 <CoaVerifyForm />
                 <br />
                 <br />
-                ascribe is using the following public key for verification:
+                    {getLangText('ascribe is using the following public key for verification')}:
                 <br />
                 <pre>
                 -----BEGIN PUBLIC KEY-----
@@ -49,8 +49,8 @@ let CoaVerifyForm = React.createClass({
 
     handleSuccess(response){
         let notification = null;
-        if (response.verdict){
+        if (response.verdict) {
-            notification = new GlobalNotificationModel('Certificate of Authenticity successfully verified', 'success');
+            notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
@@ -65,7 +65,7 @@ let CoaVerifyForm = React.createClass({
                         <button
                             type="submit"
                             className="btn ascribe-btn ascribe-btn-login">
-                            Verify your Certificate of Authenticity
+                            {getLangText('Verify your Certificate of Authenticity')}
                         </button>}
                     spinner={
                         <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
@@ -74,10 +74,10 @@ let CoaVerifyForm = React.createClass({
                         }>
                     <Property
                         name='message'
-                        label="Message">
+                        label={getLangText('Message')}>
                         <input
                             type="text"
-                            placeholder="Copy paste the message on the bottom of your Certificate of Authenticity"
+                            placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
                             autoComplete="on"
                             name="username"
                             required/>
@@ -88,7 +88,7 @@ let CoaVerifyForm = React.createClass({
                         <InputTextAreaToggable
                             rows={3}
                             editable={true}
-                            placeholder="Copy paste the signature on the bottom of your Certificate of Authenticity"
+                            placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
                             required/>
                     </Property>
                     <hr />
@@ -99,4 +99,4 @@ let CoaVerifyForm = React.createClass({
 });
 
 
-export default CoaVerifyContainer;
+export default CoaVerifyContainer;

js/components/footer.js

@@ -13,8 +13,8 @@ let Footer = React.createClass({
                   <br />
                   <a href="https://github.com/ascribe/REST-main/" target="_blank">api</a> |
                   <a href="https://www.ascribe.io/impressum" target="_blank"> impressum</a> |
-                  <a href="https://www.ascribe.io/terms" target="_blank"> terms of service</a> |
+                  <a href="https://www.ascribe.io/terms" target="_blank"> {getLangText('terms of service')}</a> |
-                  <a href="https://www.ascribe.io/privacy" target="_blank"> privacy</a>
+                  <a href="https://www.ascribe.io/privacy" target="_blank"> {getLangText('privacy')}</a>
                 </p>
                 <p className="social-icons-wrapper">
                     <a href="https://twitter.com/ascribeIO" className="social social-twitter" target="_blank"></a>

js/components/header.js

@@ -65,7 +65,7 @@ let Header = React.createClass({
             return (
                 <div className="row no-margin ascribe-subheader">
                     <a className="pull-right" href="https://www.ascribe.io/" target="_blank">
-                        <span id="powered">powered by </span>
+                        <span id="powered">{getLangText('powered by')} </span>
                         <span>ascribe </span>
                         <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
                     </a>
@@ -90,8 +90,8 @@ let Header = React.createClass({
                     <MenuItem eventKey="3" onClick={this.handleLogout}>{getLangText('Log out')}</MenuItem>
                   </DropdownButton>
             );
-            collection = <NavItemLink to="pieces">COLLECTION</NavItemLink>;
+            collection = <NavItemLink to="pieces">{getLangText('COLLECTION')}</NavItemLink>;
-            addNewWork = <NavItemLink to="register_piece">+ NEW WORK</NavItemLink>;
+            addNewWork = <NavItemLink to="register_piece">+ {getLangText('NEW WORK')}</NavItemLink>;
         }
         else {
             account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>;

js/components/login_modal_handler.js

@@ -5,6 +5,7 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import Modal from 'react-bootstrap/lib/Modal';
 import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
+import { getLangText } from '../utils/lang_utils.js'
 
 let LoginModalHandler = React.createClass({
   mixins: [OverlayMixin],
@@ -32,7 +33,7 @@ let LoginModalHandler = React.createClass({
           This modal is controlled by our custom trigger component.
         </div>
         <div className='modal-footer'>
-          <Button onClick={this.handleToggle}>Close</Button>
+          <Button onClick={this.handleToggle}>{getLangText('Close')}</Button>
         </div>
       </Modal>
     );

js/components/register_piece.js

@@ -33,6 +33,7 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 
 import { mergeOptions } from '../utils/general_utils';
 import { getCookie } from '../utils/fetch_api_utils';
+import { getLangText } from '../utils/lang_utils';
 
 let RegisterPiece = React.createClass( {
     mixins: [Router.Navigation],
@@ -132,11 +133,11 @@ let RegisterPiece = React.createClass( {
             return (
                 <Property
                     name='license'
-                    label="Copyright license..."
+                    label={getLangText('Copyright license%s', '...')}
                     onChange={this.onLicenseChange}
                     footer={
                         <a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">
-                            Learn more
+			{getLangText('Learn more')}
                         </a>}>
                     <select name="license">
                         {this.state.licenses.map((license, i) => {
@@ -170,19 +171,8 @@ let RegisterPiece = React.createClass( {
                     onClick={this.changeSlide}
                     onFocus={this.changeSlide}>
                     <Row className="no-margin">
-                        <Col sm={4}>
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
-                            <div style={{'marginTop': 0, 'marginLeft': '1em'}}>
+                            <h3 style={{'marginTop': 0, 'marginLeft': '1em'}}>{getLangText('Register your work')}</h3>
-                                <FileUploader
-                                    submitKey={this.submitKey}
-                                    setIsUploadReady={this.setIsUploadReady}
-                                    isReadyForFormSubmission={this.isReadyForFormSubmission}
-                                    editable={this.state.isFineUploaderEditable}/>
-                            </div>
-                            <br />
-                            <br />
-                        </Col>
-                        <Col sm={8}>
-                            <h3 style={{'marginTop': 0, 'marginLeft': '1em'}} onClick={this.changePage}>Lock down title</h3>
                             <Form
                                 ref='form'
                                 url={apiUrls.pieces_list}
@@ -192,17 +182,24 @@ let RegisterPiece = React.createClass( {
                                             type="submit"
                                             className="btn ascribe-btn ascribe-btn-login"
                                             disabled={!this.state.isUploadReady}>
-                                            Register work
+                                            {getLangText('Register work')}
                                         </button>}
                                 spinner={
                                     <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                                     </button>
                                     }>
-
+                                <Property
+                                    ignoreFocus={true}>
+                                    <FileUploader
+                                        submitKey={this.submitKey}
+                                        setIsUploadReady={this.setIsUploadReady}
+                                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                                        editable={this.state.isFineUploaderEditable}/>
+                                </Property>
                                 <Property
                                     name='artist_name'
-                                    label="Artist Name">
+                                    label={getLangText('Artist Name')}>
                                     <input
                                         type="text"
                                         placeholder="(e.g. Andy Warhol)"
@@ -210,7 +207,7 @@ let RegisterPiece = React.createClass( {
                                 </Property>
                                 <Property
                                     name='title'
-                                    label="Title">
+                                    label={getLangText('Title')}>
                                     <input
                                         type="text"
                                         placeholder="(e.g. 32 Campbell's Soup Cans)"
@@ -218,7 +215,7 @@ let RegisterPiece = React.createClass( {
                                 </Property>
                                 <Property
                                     name='date_created'
-                                    label="Year Created">
+                                    label={getLangText('Year Created')}>
                                     <input
                                         type="number"
                                         placeholder="(e.g. 1962)"
@@ -233,7 +230,7 @@ let RegisterPiece = React.createClass( {
                 </div>
                 <div>
                     <LoginContainer
-                        message="Please login before ascribing your work..."
+                        message={getLangText('Please login before ascribing your work%s', '...')}
                         redirectOnLoggedIn={false}
                         redirectOnLoginSuccess={false}/>
                 </div>

js/constants/languages.js

@@ -33,6 +33,7 @@ const languages = {
         'I agree to the': 'I agree to the',
         'Confirm Password': 'Confirm Password',
         'Promocode': 'Promocode',
+        'Promocode (Optional)': 'Promocode (Optional)',
         'Sign up successful': 'Sign up successful',
         'We sent an email to your address': 'We sent an email to your address',
         'please confirm': 'please confirm',
@@ -61,7 +62,147 @@ const languages = {
         'API Integration': 'API Integration',
         'Application Name': 'Application Name',
         'Enter the name of your app': 'Enter the name of your app',
-        'Account': 'Account'
+        'Account': 'Account',
+        'Copyright license%s': 'Copyright license%s',
+        'Files to upload': 'Files to upload',
+        'Lock down title': 'Lock down title',
+        'Artist Name': 'Artist Name',
+        'The name of the creator': 'The name of the creator',
+        'Number of editions': 'Number of editions',
+        'Artwork title': 'Artwork title',
+        'The title of the artwork': 'The title of the artwork',
+        'Year Created': 'Year Created',
+        'Year Created (e.g. 2015)': 'Year Created (e.g. 2015)',
+        'Specify the number of unique editions for this artwork': 'Specify the number of unique editions for this artwork',
+        'Please login before ascribing your work%s': 'Please login before ascribing your work%s',
+        'Click or drag to add files': 'Click or drag to add files',
+        'Click or drag to add a file': 'Click or drag to add a file',
+        'Register your artwork': 'Register your artwork',
+        'Register work': 'Register work',
+        'Learn more': 'Learn more',
+        'api': 'api',
+        'impressum': 'impressum',
+        'terms of service': 'terms of service',
+        'privacy': 'privacy',
+        'Search%s': 'Search%s',
+        'Hide all Editions' : 'Hide all Editions',
+        'Hide editions' : 'Hide editions',
+        'Show all Editions': 'Show all Editions',
+        'Show editions': 'Show editions',
+        'Edition': 'Edition',
+        'Work': 'Work',
+        'You don\'t have any works yet%s': 'You don\'t have any works yet%s',
+        'To register one, click': 'To register one, click',
+        'here': 'here',
+        'Consign artwork': 'Consign artwork',
+        'Unconsign artwork': 'Unconsign artwork',
+        'Have the owner manage his sales again': 'Have the owner manage his sales again',
+        'Transfer artwork': 'Transfer artwork',
+        'Transfer the ownership of the artwork': 'Transfer the ownership of the artwork',
+        'Loan artwork': 'Loan artwork',
+        'Loan your artwork for a limited period of time': 'Loan your artwork for a limited period of time',
+        'Share artwork': 'Share artwork',
+        'Share the artwork': 'Share the artwork',
+        'Remove Edition': 'Remove Edition',
+        'Click to remove edition': 'Click to remove edition',
+        'hide': 'hide',
+        'show': 'show',
+        'Hi': 'Hi',
+        'I am sharing': 'I am sharing',
+        'with you': 'with you',
+        'Truly yours': 'Truly yours',
+        'Comma separated emails': 'Comma separated emails',
+        'SHARE': 'SHARE',
+        'I consign': 'I consign',
+        'to you': 'to you',
+        'Consignee email': 'Consignee email',
+        'CONSIGN': 'CONSIGN',
+        'REMOVE FROM COLLECTION': 'REMOVE FROM COLLECTION',
+        'Further Details': 'Further Details',
+        'Certificate of Authenticity': 'Certificate of Authenticity',
+        'Provenance/Ownership History': 'Provenance/Ownership History',
+        'Consignment History': 'Consignment History',
+        'SPOOL Details': 'SPOOL Details',
+        'Download': 'Download',
+        'invisible': 'invisible',
+        'TITLE': 'TITLE',
+        'BY': 'BY',
+        'DATE': 'DATE',
+        'STATUS': 'STATUS',
+        'EDITION': 'EDITION',
+        'of': 'of',
+        'OWNER': 'OWNER',
+        'Private note saved': 'Private note saved',
+        'Personal note (private)': 'Personal note (private)',
+        'Enter a personal note%s': 'Enter a personal note%s',
+        'Public note saved': 'Public note saved',
+        'Edition note (public)': 'Edition note (public)',
+        'Enter a public note for this edition%s': 'Enter a public note for this edition%s',
+        'Details updated': 'Details updated',
+        'Artist Contact Info': 'Artist Contact Info',
+        'Display Instructions': 'Display Instructions',
+        'Technology Details': 'Technology Details',
+        'Additional files': 'Additional files',
+        'Verify': 'Verify',
+        'Artwork ID': 'Artwork ID',
+        'Hash of Artwork, title, etc': 'Hash of Artwork, title, etc',
+        'Owned by SPOOL address': 'Owned by SPOOL address',
+        'Are you sure you would like to permanently delete this edition%s': 'Are you sure you would like to permanently delete this edition%s',
+        'This is an irrevocable action%s': 'This is an irrevocable action%s',
+        'DELETE': 'DELETE',
+        'YES, DELETE': 'YES, DELETE',
+        'CLOSE': 'CLOSE',
+        'I loan': 'I loan',
+        'terms of': 'terms of',
+        'Loanee email': 'Loanee email',
+        'Gallery/exhibition (optional)': 'Gallery/exhibition (optional)',
+        'Loan start date': 'Loan start date',
+        'Loan end date': 'Loan end date',
+        'LOAN': 'LOAN',
+        'I transfer ownership of': 'I transfer ownership of',
+        'Transferee email': 'Transferee email',
+        'TRANSFER': 'TRANSFER',
+        'Forgot your password': 'Forgot your password',
+        'Reset password': 'Reset password',
+        'Not a member yet': 'Not a member yet',
+        'Fill in%s': 'Fill in%s',
+        'ACCEPT': 'ACCEPT',
+        'REJECT': 'REJECT',
+        'this edition%s': 'this edition%s',
+        'RESET PASSWORD': 'RESET PASSWORD',
+        'Choose a password': 'Choose a password',
+        'I un-consign': 'I un-consign',
+        'from you': 'from you',
+        'UNCONSIGN': 'UNCONSIGN',
+        'I request you to un-consign': 'I request you to un-consign',
+        'UNCONSIGN REQUEST': 'UNCONSIGN REQUEST',
+        'You have actions pending in one of your editions': 'You have actions pending in one of your editions',
+        'Login successful': 'Login successful',
+        'Log in to ascribe': 'Log in to ascribe',
+        'Create an account': 'Create an account',
+        'clear all': 'clear all',
+        'hidden': 'hidden',
+        'Editions selected': 'Editions selected',
+        'Show Pieces that': 'Show Pieces that',
+        'I can transfer': 'I can transfer',
+        'I can consign': 'I can consign',
+        'Remove file': 'Remove file',
+        'Pause upload': 'Pause upload',
+        'Resume uploading': 'Resume uploading',
+        'Download file': 'Download file',
+        'Verify your Certificate of Authenticity': 'Verify your Certificate of Authenticity',
+        'ascribe is using the following public key for verification': 'ascribe is using the following public key for verification',
+        'Message': 'Message',
+        'Copy paste the message on the bottom of your Certificate of Authenticity': 'Copy paste the message on the bottom of your Certificate of Authenticity',
+        'Copy paste the signature on the bottom of your Certificate of Authenticity': 'Copy paste the signature on the bottom of your Certificate of Authenticity',
+        'WITHDRAW': 'WITHDRAW',
+        'powered by': 'powered by',
+        'COLLECTION': 'COLLECTION',
+        'edition': 'edition',
+        'Enter': 'Enter',
+        'NEW WORK': 'NEW WORK',
+        'Have someone else sell the artwork': 'Have someone else sell the artwork',
+        'Loan History': 'Loan History',
     },
     'de': {
         'ID': 'ID',
@@ -95,6 +236,7 @@ const languages = {
         'I agree to the': 'I agree to the',
         'Confirm Password': 'Confirm Password',
         'Promocode': 'Promocode',
+        'Promocode (Optional)': 'Promocode (Optional)',
         'Sign up successful': 'Sign up successful',
         'We sent an email to your address': 'We sent an email to your address',
         'please confirm': 'please confirm',
@@ -123,7 +265,147 @@ const languages = {
         'API Integration': 'API Integration',
         'Application Name': 'Application Name',
         'Enter the name of your app': 'Enter the name of your app',
-        'Account': 'Account'
+        'Account': 'Account',
+        'Copyright license%s': 'Copyright license%s',
+        'Files to upload': 'Files to upload',
+        'Lock down title': 'Lock down title',
+        'Artist Name': 'Artist Name',
+        'The name of the creator': 'The name of the creator',
+        'Number of editions': 'Number of editions',
+        'Artwork title': 'Artwork title',
+        'The title of the artwork': 'The title of the artwork',
+        'Year Created': 'Year Created',
+        'Year Created (e.g. 2015)': 'Year Created (e.g. 2015)',
+        'Specify the number of unique editions for this artwork': 'Specify the number of unique editions for this artwork',
+        'Please login before ascribing your work%s': 'Please login before ascribing your work%s',
+        'Click or drag to add files': 'Click or drag to add files',
+        'Click or drag to add a file': 'Click or drag to add a file',
+        'Register your artwork': 'Register your artwork',
+        'Register work': 'Register work',
+        'Learn more': 'Learn more',
+        'api': 'api',
+        'impressum': 'impressum',
+        'terms of service': 'terms of service',
+        'privacy': 'privacy',
+        'Search%s': 'Search%s',
+        'Hide all Editions' : 'Hide all Editions',
+        'Hide editions' : 'Hide editions',
+        'Show all Editions': 'Show all Editions',
+        'Show editions': 'Show editions',
+        'Edition': 'Edition',
+        'Work': 'Work',
+        'You don\'t have any works yet%s': 'You don\'t have any works yet%s',
+        'To register one, click': 'To register one, click',
+        'here': 'here',
+        'Consign artwork': 'Consign artwork',
+        'Unconsign artwork': 'Unconsign artwork',
+        'Have the owner manage his sales again': 'Have the owner manage his sales again',
+        'Transfer artwork': 'Transfer artwork',
+        'Transfer the ownership of the artwork': 'Transfer the ownership of the artwork',
+        'Loan artwork': 'Loan artwork',
+        'Loan your artwork for a limited period of time': 'Loan your artwork for a limited period of time',
+        'Share artwork': 'Share artwork',
+        'Share the artwork': 'Share the artwork',
+        'Remove Edition': 'Remove Edition',
+        'Click to remove edition': 'Click to remove edition',
+        'hide': 'hide',
+        'show': 'show',
+        'Hi': 'Hi',
+        'I am sharing': 'I am sharing',
+        'with you': 'with you',
+        'Truly yours': 'Truly yours',
+        'Comma separated emails': 'Comma separated emails',
+        'SHARE': 'SHARE',
+        'I consign': 'I consign',
+        'to you': 'to you',
+        'Consignee email': 'Consignee email',
+        'CONSIGN': 'CONSIGN',
+        'REMOVE FROM COLLECTION': 'REMOVE FROM COLLECTION',
+        'Further Details': 'Further Details',
+        'Certificate of Authenticity': 'Certificate of Authenticity',
+        'Provenance/Ownership History': 'Provenance/Ownership History',
+        'Consignment History': 'Consignment History',
+        'SPOOL Details': 'SPOOL Details',
+        'Download': 'Download',
+        'invisible': 'invisible',
+        'TITLE': 'TITLE',
+        'BY': 'BY',
+        'DATE': 'DATE',
+        'STATUS': 'STATUS',
+        'EDITION': 'EDITION',
+        'of': 'of',
+        'OWNER': 'OWNER',
+        'Private note saved': 'Private note saved',
+        'Personal note (private)': 'Personal note (private)',
+        'Enter a personal note%s': 'Enter a personal note%s',
+        'Public note saved': 'Public note saved',
+        'Edition note (public)': 'Edition note (public)',
+        'Enter a public note for this edition%s': 'Enter a public note for this edition%s',
+        'Details updated': 'Details updated',
+        'Artist Contact Info': 'Artist Contact Info',
+        'Display Instructions': 'Display Instructions',
+        'Technology Details': 'Technology Details',
+        'Additional files': 'Additional files',
+        'Verify': 'Verify',
+        'Artwork ID': 'Artwork ID',
+        'Hash of Artwork, title, etc': 'Hash of Artwork, title, etc',
+        'Owned by SPOOL address': 'Owned by SPOOL address',
+        'Are you sure you would like to permanently delete this edition%s': 'Are you sure you would like to permanently delete this edition%s',
+        'This is an irrevocable action%s': 'This is an irrevocable action%s',
+        'DELETE': 'DELETE',
+        'YES, DELETE': 'YES, DELETE',
+        'CLOSE': 'CLOSE',
+        'I loan': 'I loan',
+        'terms of': 'terms of',
+        'Loanee email': 'Loanee email',
+        'Gallery/exhibition (optional)': 'Gallery/exhibition (optional)',
+        'Loan start date': 'Loan start date',
+        'Loan end date': 'Loan end date',
+        'LOAN': 'LOAN',
+        'I transfer ownership of': 'I transfer ownership of',
+        'Transferee email': 'Transferee email',
+        'TRANSFER': 'TRANSFER',
+        'Forgot your password': 'Forgot your password',
+        'Reset password': 'Reset password',
+        'Not a member yet': 'Not a member yet',
+        'Fill in%s': 'Fill in%s',
+        'ACCEPT': 'ACCEPT',
+        'REJECT': 'REJECT',
+        'this edition%s': 'this edition%s',
+        'RESET PASSWORD': 'RESET PASSWORD',
+        'Choose a password': 'Choose a password',
+        'I un-consign': 'I un-consign',
+        'from you': 'from you',
+        'UNCONSIGN': 'UNCONSIGN',
+        'I request you to un-consign': 'I request you to un-consign',
+        'UNCONSIGN REQUEST': 'UNCONSIGN REQUEST',
+        'You have actions pending in one of your editions': 'You have actions pending in one of your editions',
+        'Login successful': 'Login successful',
+        'Log in to ascribe': 'Log in to ascribe',
+        'Create an account': 'Create an account',
+        'clear all': 'clear all',
+        'hidden': 'hidden',
+        'Editions selected': 'Editions selected',
+        'Show Pieces that': 'Show Pieces that',
+        'I can transfer': 'I can transfer',
+        'I can consign': 'I can consign',
+        'Remove file': 'Remove file',
+        'Pause upload': 'Pause upload',
+        'Resume uploading': 'Resume uploading',
+        'Download file': 'Download file',
+        'Verify your Certificate of Authenticity': 'Verify your Certificate of Authenticity',
+        'ascribe is using the following public key for verification': 'ascribe is using the following public key for verification',
+        'Message': 'Message',
+        'Copy paste the message on the bottom of your Certificate of Authenticity': 'Copy paste the message on the bottom of your Certificate of Authenticity',
+        'Copy paste the signature on the bottom of your Certificate of Authenticity': 'Copy paste the signature on the bottom of your Certificate of Authenticity',
+        'WITHDRAW': 'WITHDRAW',
+        'powered by': 'powered by',
+        'COLLECTION': 'COLLECTION',
+        'edition': 'edition',
+        'Enter': 'Enter',
+        'NEW WORK': 'NEW WORK',
+        'Have someone else sell the artwork': 'Have someone else sell the artwork',
+        'Loan History': 'Loan History',
     },
     'fr': {
         'ID': 'ID',
@@ -141,7 +423,7 @@ const languages = {
         '%s license': '%s license',
         'Log into': 'Se connecter à',
         'Email': 'E-mail',
-        'Enter your email': 'Entrez votre e-mail',
+        'Enter your email': 'Entrez votre courriel',
         'Password': 'Mot de passe',
         'Enter your password': 'Entrez votre mot de passe',
         'Not an ascribe user': 'Pas un utilisateur d\'ascribe',
@@ -157,18 +439,19 @@ const languages = {
         'I agree to the': 'Je suis d\'accrod avec les',
         'Confirm Password': 'Confirmez le mot de passe',
         'Promocode': 'Code promotionnel',
+        'Promocode (Optional)': 'Code promotionnel (Facultatif)',
         'Sign up successful': 'Inscription réussie',
-        'We sent an email to your address': 'Nous avons envoyé un e-mail à votre adresse',
+        'We sent an email to your address': 'Nous avons envoyé un courriel à votre adresse',
         'please confirm': 'veuillez confirmer',
         'Your password must be at least 10 characters': 'Votre mot de passe doit être composé d\'au moins 10 caractères',
         'This password is securing your digital property like a bank account': 'Ce mot de passe sécurise votre propriété numérique tel un compte bancaire',
         'Store it in a safe place': 'Conservez-le dans un endroit sécuritaire',
         'Reset the password for': 'Réinitialiser le mot de passe pour',
         'Reset your ascribe password': 'Réinitialiser votre mot de passe ascribe',
-        'An email has been sent to': 'Un e-mail a été envoyé à',
+        'An email has been sent to': 'Un courriel a été envoyé à',
         'Request successfully sent, check your email': 'Requête envoyée avec succès, veuillez consultez votre courrier électronique',
         'Reset your password': 'Réinitialiser votre mot de passe',
-        'Enter your email and we\'ll send a link': 'Entrez votre e-mail et nous vous enverrons un lien',
+        'Enter your email and we\'ll send a link': 'Entrez votre courriel et nous vous enverrons un lien',
         'password successfully updated': 'mise à jour du mot de passe réussie',
         'Enter a new password': 'Entrez un nouveau mot de passe',
         'Something went wrong, please try again later': 'Quelque chose ne fonctionne pas, veuillez réessayer plus tard',
@@ -185,8 +468,148 @@ const languages = {
         'API Integration': 'Intégration de l\'API',
         'Application Name': 'Nom de l\'Application',
         'Enter the name of your app': 'Entrez le nom de votre application',
-        'Account': 'Compte'
+        'Account': 'Compte',
+        'Copyright license%s': 'License de droit d\'auteur%s',
+        'Files to upload': 'Fichiers à télécharger',
+        'Lock down title': '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',
+        'Artwork title': 'Titre de l\'oeuvre',
+        'The title of the artwork': 'Le titre de l\'oeuvre',
+        'Year Created': 'Année de la création',
+        'Year Created (e.g. 2015)': 'Année de la création (e.g. 2015)',
+        'Specify the number of unique editions for this artwork': 'Spécifiez le nombre d\'éditions uniques pour cette oeuvre',
+        'Please login before ascribing your work%s': 'S\'il vous plaît vous identifier avant d\'attribuer votre oeuvre%s',
+        'Click or drag to add files': 'Cliquez ou faites glisser pour ajouter des fichiers',
+        'Click or drag to add a file': 'Cliquez ou faites glisser pour ajouter un fichier',
+        'Register your artwork': 'Enregistrer votre oeuvre',
+        'Register work': 'Enregistrer l\'oeuvre',
+        'Learn more': 'En savoir plus',
+        'api': 'api',
+        'impressum': 'impressum',
+        'terms of service': 'conditions d\'utilisation',
+        'privacy':  'confidentialité',
+        'Search%s': 'Rechercher%s',
+        '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',
+        'Work': 'Oeuvre',
+        'You don\'t have any works yet%s': 'Vous n\'avez pas encore d\'oeuvres%s',
+        'To register one, click': 'Pour en inscrire une, cliquez',
+        'here': 'ici',
+        'Consign artwork': 'Consigner l\'oeuvre',
+        'Unconsign artwork': 'Déconsigner l\'oeuvre',
+        'Have the owner manage his sales again': 'Demandez au propriétaire de gérer à nouveau ses ventes',
+        'Transfer artwork': 'Transférez l\'oeuvre',
+        'Transfer the ownership of the artwork': 'Transférez la propriété de l\'oeuvre',
+        'Loan artwork': 'Prêtez l\'oeuvre',
+        'Loan your artwork for a limited period of time': 'Prêtez votre oeuvre pour un temps limité',
+        'Share artwork': 'Partagez l\'oeuvre',
+        'Share the artwork': 'Partagez l\'oeuvre',
+        'Remove Edition': 'Retirer l\'Édition',
+        'Click to remove edition': 'Cliquez pour retirer l\'édition',
+        'hide': 'cacher',
+        'show': 'afficher',
+        'Hi': 'Bonjour',
+        'I am sharing': 'Je partage',
+        'with you': 'avec vous',
+        'Truly yours': 'Sincèrement',
+        'Comma separated emails': 'courriel séparés par des virgules',
+        'SHARE': 'PARTAGER',
+        'I consign': 'Je consigne',
+        'to you': 'pour vous',
+        'Consignee email': 'Courriel du destinataire',
+        'CONSIGN': 'CONSIGNER',
+        'REMOVE FROM COLLECTION': 'RETIRER DE LA COLLECTION',
+        'Further Details': 'Détails Supplémentaires',
+        'Certificate of Authenticity': 'Certificat d\'Authenticité',
+        'Provenance/Ownership History': 'Provenance / Historique de Possession',	// TODO review
+        'Consignment History': 'Historique de consignation', 	// TODO review
+        'SPOOL Details': 'Détails de spool',	// TODO review
+        'Download': 'Télécharger',
+        'invisible': 'invisible',
+        'TITLE': 'TITRE',
+        'BY': 'PAR',	// TODO review
+        'DATE': 'DATE',
+        'STATUS': 'STATUT',
+        'EDITION': 'ÉDITION',
+        'of': 'de',
+        'OWNER': 'PROPRIÉTAIRE',
+        'Private note saved': 'Note privée sauvegardée',
+        'Personal note (private)': 'Note personnelle (privée)',
+        'Enter a personal note%s': 'Entrez une note personnelle%s',
+        'Public note saved': 'Note publique sauvegardée',
+        'Edition note (public)': 'Note d\'Édition (publique)',
+        'Enter a public note for this edition%s': 'Entrez une note publique pour cette édition%s',
+        'Details updated': 'Détails mis à jour',
+        'Artist Contact Info': 'Coordonnées de l\'artiste',
+        'Display Instructions': 'Afficher les Instructions',
+        'Technology Details': 'Détails technologique',
+        'Additional files': 'fichiers supplémentaires',
+        'Verify': 'Vérifiez',
+        'Artwork ID': 'ID de l\'Oeuvre',
+        'Hash of Artwork, title, etc': 'Valeur de hachage de l\'Oeuvre, titre, etc',
+        'Owned by SPOOL address': 'Appartient via l\'adresse SPOOL',
+        'Are you sure you would like to permanently delete this edition': 'Êtes-vous vraiment certaine de vouloir définitivement supprimer cette édition',
+        'This is an irrevocable action%s': 'Ceci est une action irrévocable%s',
+        'DELETE': 'SUPPRIMER',
+        'YES, DELETE': 'OUI, SUPPRIMER',
+        'CLOSE': 'FERMER',
+        'I loan': 'Je prête',
+        'terms of': 'conditions de',
+        'Loanee email':	'courriel de l\'emprunteur',
+        'Gallery/exhibition (optional)': 'Galerie/exposition (facultatif)',
+        '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' ,
+        'Transferee email': 'Courriel du cessionnaire',
+        'TRANSFER': 'TRANSFÉRER',
+        'Forgot your password': 'Oubliez votre mot de passe',
+        'Reset password': 'Réinitialiser le mot de passe',
+        'Not a member yet': 'Pas encore membre',
+        'Fill in%s': 'Remplir%s',
+        'ACCEPT': 'ACCEPTER',
+        'REJECT': 'REJETER',
+        'this edition%s': 'cette édition%s',
+        'RESET PASSWORD': 'RÉINITIALISER LE MOT DE PASSE',
+        'Choose a password': 'Choisir un mot de passe',
+        'I un-consign': 'Je déconsigne',
+        'from you': 'de vous',
+        'UNCONSIGN': 'DÉCONSIGNER',
+        'I request you to un-consign': 'Je vous demande de déconsigner',
+        'UNCONSIGN REQUEST': 'DEMANDE DE DÉCONSIGNATION',
+        'You have actions pending in one of your editions': 'Vous avez des actions en cours dans l\'une de vos éditions',
+        'Login successful': 'Connexion réussie',
+        'Log in to ascribe': 'Connectez-vous à ascribe',
+        'Create an account': 'Créer un compte',
+        'clear all': 'tout effacer',
+        'hidden': 'hidden',
+        'Editions selected': 'Éditions sélectionnées',
+        'Show Pieces that': 'Afficher les oeuvres qui',
+        'I can transfer': 'Je peux transférerr',
+        'I can consign': 'Je peux consigner',
+        'Remove file': 'Retirer le fichier',
+        'Pause upload': 'Mettre en pause le téléchargement',
+        'Resume uploading': 'Reprendre le téléchargement',
+        'Download file': 'Télécharger le fichier',
+        'Verify your Certificate of Authenticity': 'Vérifiez votre certificat d\'authenticité',
+        'ascribe is using the following public key for verification': 'ascribe utilise la clé publique suivante pour à des fins de vérification',
+        'Message': 'Message',
+        'Copy paste the message on the bottom of your Certificate of Authenticity': 'Copier coller le message qui se trouve sur le bas de votre certificat d\'authenticité',
+        'Copy paste the signature on the bottom of your Certificate of Authenticity': 'Copier coller la signature qui se trouve sur le bas de votre certificat d\'authenticité',
+        'WITHDRAW': 'RETIRER',
+        'powered by': 'alimenté par',   // TODO review
+        'COLLECTION': 'COLLECTION',
+        'edition': 'édition',
+        'Enter': 'Entrez',
+        'NEW WORK': 'NOUVEL OEUVRE',
+        'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre',
+        'Loan History': 'Historique de Prêts',
     }
 };
 
-export default languages;
+export default languages;

js/mixins/form_mixin.js

@@ -4,6 +4,7 @@ import requests from '../utils/requests';
 import React from 'react';
 
 import AlertDismissable from '../components/ascribe_forms/alert';
+import { getLangText } from '../utils/lang_utils.js'
 
 export const FormMixin = {
     propTypes: {
@@ -68,6 +69,7 @@ export const FormMixin = {
             }
         }
         else {
+            // TODO translate?
             this.setState({errors: ['Something went wrong, please try again later']});
         }
         this.setState({submitted: false});
@@ -81,7 +83,7 @@ export const FormMixin = {
     
     getTitlesString(){
         return this.props.editions.map(function(edition){
-            return '- \"' + edition.title + ', edition ' + edition.edition_number + '\"\n';
+            return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
         });
     },
 

js/utils/lang_utils.js

@@ -13,7 +13,7 @@ import { formatText } from './general_utils';
 export function getLangText(s, ...args) {
     let lang = navigator.language || navigator.userLanguage;
     // this is just for testing, as changing the navigator.language wasn't possible
-    //lang = 'de';
+    //ang = 'de';
     try {
         if(lang in languages) {
             return formatText(languages[lang][s], args);
@@ -30,4 +30,4 @@ export function getLangText(s, ...args) {
         }
         
     }
-}
+}

sass/ascribe_login.scss

@@ -23,6 +23,10 @@ $break-small: 764px;
     background-color: rgba(2, 182, 163, 0.6);
     border: none;
   }
+
+  &[disabled] {
+    opacity: .3;
+  }
 }
 
 .ascribe-btn-login-spinner{

sass/ascribe_table.scss

@@ -32,7 +32,7 @@
 }
 
 .ascribe-table-item-column > span > input {
-    margin-top:14px;
+    margin-top:16px;
 }
 
 .ascribe-table-item-selected {

sass/ascribe_uploader.scss

@@ -1,7 +1,6 @@
 .file-drag-and-drop {
     display: block;
-    outline: 1px dashed #616161;
+    outline: 1px dashed #9E9E9E;
-    cursor: pointer;
     vertical-align: middle;
     text-align: center;
     height: auto;
@@ -9,44 +8,28 @@
     overflow: auto;
     margin-top: 1em;
 
-    padding: 3em;
+    cursor: default !important;
+
+    padding: 1.5em 1.5em 1.5em 0;
 }
 
 .inactive-dropzone {
     cursor: default !important;
+    background-color: rgba(0,0,0,0) !important;
+    outline: 0;
 }
 
-.inactive-dropzone:hover {
+.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
-    background-color: #FAFAFA !important;
+    font-size: 1.5em !important;
-}
 
-.file-drag-and-drop:hover {
+    margin-top: 0;
-    background-color: rgba(72, 218, 203, 0.2);
+    margin-bottom: 0;
-}
+    padding-bottom: 0;
-
-.file-drag-and-drop .file-drag-and-drop-dialog {
-    font-size: 1.25em !important;
-
-    margin-top: 1em;
-
-    &::before {
-        content: ' ';
-        display: inline-block;
-        vertical-align: middle; /* vertical alignment of the inline element */
-        height: 100%;
-    }
-}
-
-.has-files {
-    text-align: left;
-    padding: 4% 0 0 0;
 }
 
 .file-drag-and-drop-position {
     position: relative;
     display: inline-block;
-    margin: 0 0 4% 4%;
-    float:left;
 
     .delete-file {
         display: block;
@@ -64,14 +47,21 @@
 
         span {
             color: white;
+            top: 1;
+            left: 0;
+            font-size: .8em;
+
+            &:hover {
+                color: $brand-danger;
+            }
         }
     }
 }
 
 .file-drag-and-drop-preview-table-wrapper {
     display: table;
-    height:64px;
+    height:94px;
-    width:74px;
+    width:104px;
 }
 
 .file-drag-and-drop-preview {
@@ -83,8 +73,8 @@
 
 .file-drag-and-drop-preview-image {
     display: table;
-    height:74px;
+    height:104px;
-    width:74px;
+    width:104px;
     overflow:hidden;
     border: 1px solid #616161;
     text-align: center;