ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

Add labeling functionality to UploadButton

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-12 13:08:23 +01:00
parent b6773549ee
commit 1a67cd66f5
5 changed files with 127 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -56,7 +56,7 @@ let ContractSettingsUpdateButton = React.createClass({
render() { render() {
return ( return (
<ReactS3FineUploader <ReactS3FineUploader
fileInputElement={UploadButton} fileInputElement={UploadButton()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract' fileClass: 'contract'

11
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -9,7 +9,8 @@ import { getLangText } from '../../../utils/lang_utils';
import { truncateTextAtCharIndex } from '../../../utils/general_utils'; import { truncateTextAtCharIndex } from '../../../utils/general_utils';
let UploadButton = React.createClass({ export default function UploadButton(label) {
return React.createClass({
propTypes: { propTypes: {
onDrop: React.PropTypes.func.isRequired, onDrop: React.PropTypes.func.isRequired,
filesToUpload: React.PropTypes.array, filesToUpload: React.PropTypes.array,
@ -99,6 +100,7 @@ let UploadButton = React.createClass({
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button` * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/ */
return ( return (
<div className="upload-button-wrapper">
<a <a
onClick={this.handleOnClick} onClick={this.handleOnClick}
className="btn btn-default btn-sm margin-left-2px" className="btn btn-default btn-sm margin-left-2px"
@ -116,8 +118,9 @@ let UploadButton = React.createClass({
onChange={this.handleDrop} onChange={this.handleDrop}
accept={allowedExtensions}/> accept={allowedExtensions}/>
</a> </a>
{label}
</div>
); );
} }
}); });
}
export default UploadButton;

31
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -54,6 +54,13 @@ const PRRegisterPieceForm = React.createClass({
submit() { submit() {
if(!this.validateForms()) { if(!this.validateForms()) {
return; return;
} else {
this.setState({
digitalWorkKeyReady: false,
thumbnailKeyReady: false,
supportingMaterialsReady: false,
proofOfPaymentReady: false
});
} }
const { currentUser } = this.props; const { currentUser } = this.props;
@ -219,10 +226,9 @@ const PRRegisterPieceForm = React.createClass({
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref="uploadersForm"> ref="uploadersForm">
<Property <Property
name="digitalWorkKey" name="digitalWorkKey">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Select the PDF with your work')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
createBlobRoutine={{ createBlobRoutine={{
@ -243,13 +249,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload the Portfolios') plural: getLangText('Upload the Portfolios')
}} }}
required/> required/>
<span>{getLangText('Select the PDF with your work')}</span>
</Property> </Property>
<Property <Property
name="thumbnailKey" name="thumbnailKey">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Featured Cover photo')}</span>)}
createBlobRoutine={{ createBlobRoutine={{
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
@ -270,13 +274,11 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload cover photos') plural: getLangText('Upload cover photos')
}} }}
required/> required/>
<span>{getLangText('Featured Cover photo')}</span>
</Property> </Property>
<Property <Property
name="supportingMaterials" name="supportingMaterials">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Supporting Materials (Optional)')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
@ -293,13 +295,11 @@ const PRRegisterPieceForm = React.createClass({
singular: getLangText('Upload supporting material'), singular: getLangText('Upload supporting material'),
plural: getLangText('Upload supporting materials') plural: getLangText('Upload supporting materials')
}}/> }}/>
<span>{getLangText('Supporting Materials (Optional)')}</span>
</Property> </Property>
<Property <Property
name="proofOfPayment" name="proofOfPayment">
className="input-upload-file-button-property">
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton} fileInputElement={UploadButton(<span>{getLangText('Proof of payment')}</span>)}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')} setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
@ -318,7 +318,6 @@ const PRRegisterPieceForm = React.createClass({
plural: getLangText('Upload Screenshots') plural: getLangText('Upload Screenshots')
}} }}
required/> required/>
<span>{getLangText('Proof of payment')}</span>
</Property> </Property>
</Form> </Form>
<Form <Form

13
sass/ascribe_property.scss
View File

@ -226,16 +226,3 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-top: 0; margin-top: 0;
} }
} }
.input-upload-file-button-property {
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}

12
sass/ascribe_uploader.scss
View File

@ -177,3 +177,15 @@
height: 12px; height: 12px;
} }
.upload-button-wrapper {
text-align: left;
.btn {
font-size: 1em;
margin-right: 1em;
}
span + .btn {
margin-left: 1em;
}
}