From 1a67cd66f54cf003830fd07572cf7f1ccc147de5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 12 Nov 2015 13:08:23 +0100 Subject: [PATCH] Add labeling functionality to UploadButton --- .../contract_settings_update_button.js | 2 +- .../ascribe_upload_button/upload_button.js | 195 +++++++++--------- .../pr_forms/pr_register_piece_form.js | 31 ++- sass/ascribe_property.scss | 13 -- sass/ascribe_uploader.scss | 12 ++ 5 files changed, 127 insertions(+), 126 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js index 265e6548..831a6455 100644 --- a/js/components/ascribe_settings/contract_settings_update_button.js +++ b/js/components/ascribe_settings/contract_settings_update_button.js @@ -56,7 +56,7 @@ let ContractSettingsUpdateButton = React.createClass({ render() { return ( file.status === 'uploading'); - }, + getUploadingFiles() { + return this.props.filesToUpload.filter((file) => file.status === 'uploading'); + }, - getUploadedFile() { - return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0]; - }, + getUploadedFile() { + return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0]; + }, - handleOnClick() { - let uploadingFiles = this.getUploadingFiles(); + handleOnClick() { + let uploadingFiles = this.getUploadingFiles(); - // We only want the button to be clickable if there are no files currently uploading - if(uploadingFiles.length === 0) { - // Firefox only recognizes the simulated mouse click if bubbles is set to true, - // but since Google Chrome propagates the event much further than needed, we - // need to stop propagation as soon as the event is created - var evt = new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true - }); + // We only want the button to be clickable if there are no files currently uploading + if(uploadingFiles.length === 0) { + // Firefox only recognizes the simulated mouse click if bubbles is set to true, + // but since Google Chrome propagates the event much further than needed, we + // need to stop propagation as soon as the event is created + var evt = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); - evt.stopPropagation(); - this.refs.fileinput.getDOMNode().dispatchEvent(evt); - } - }, + evt.stopPropagation(); + this.refs.fileinput.getDOMNode().dispatchEvent(evt); + } + }, - getButtonLabel() { - const uploadedFile = this.getUploadedFile(); - let { filesToUpload, fileClassToUpload } = this.props; + getButtonLabel() { + const uploadedFile = this.getUploadedFile(); + let { filesToUpload, fileClassToUpload } = this.props; - // filter invalid files that might have been deleted or canceled... - filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter); + // filter invalid files that might have been deleted or canceled... + filesToUpload = filesToUpload.filter(displayValidProgressFilesFilter); - // Depending on whether there is an upload going on or not we - // display the progress or the successfully uploaded file's name - if(uploadedFile) { + // Depending on whether there is an upload going on or not we + // display the progress or the successfully uploaded file's name + if(uploadedFile) { + return ( + + + {' ' + truncateTextAtCharIndex(uploadedFile.name, 20)} + + ); + } else if(filesToUpload.length > 0) { + return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%'; + } else { + return fileClassToUpload.singular; + } + }, + + render() { + let { + multiple, + allowedExtensions + } = this.props; + + /* + * We do not want a button that submits here. + * As UploadButton could be used in forms that want to be submitted independent + * of clicking the selector. + * Therefore the wrapping component needs to be an `anchor` tag instead of a `button` + */ return ( - - - {' ' + truncateTextAtCharIndex(uploadedFile.name, 20)} - +
+ + {this.getButtonLabel()} + + + {label} +
); - } else if(filesToUpload.length > 0) { - return getLangText('Upload progress') + ': ' + Math.ceil(filesToUpload[0].progress) + '%'; - } else { - return fileClassToUpload.singular; } - }, - - render() { - let { - multiple, - allowedExtensions - } = this.props; - - /* - * We do not want a button that submits here. - * As UploadButton could be used in forms that want to be submitted independent - * of clicking the selector. - * Therefore the wrapping component needs to be an `anchor` tag instead of a `button` - */ - return ( - - {this.getButtonLabel()} - - - ); - } -}); - -export default UploadButton; \ No newline at end of file + }); +} \ No newline at end of file diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js index 25bbcfc3..98a5f2f8 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js @@ -54,6 +54,13 @@ const PRRegisterPieceForm = React.createClass({ submit() { if(!this.validateForms()) { return; + } else { + this.setState({ + digitalWorkKeyReady: false, + thumbnailKeyReady: false, + supportingMaterialsReady: false, + proofOfPaymentReady: false + }); } const { currentUser } = this.props; @@ -219,10 +226,9 @@ const PRRegisterPieceForm = React.createClass({ className="ascribe-form-bordered" ref="uploadersForm"> + name="digitalWorkKey"> {getLangText('Select the PDF with your work')})} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')} createBlobRoutine={{ @@ -243,13 +249,11 @@ const PRRegisterPieceForm = React.createClass({ plural: getLangText('Upload the Portfolios') }} required/> - {getLangText('Select the PDF with your work')} + name="thumbnailKey"> {getLangText('Featured Cover photo')})} createBlobRoutine={{ url: ApiUrls.blob_thumbnails }} @@ -270,13 +274,11 @@ const PRRegisterPieceForm = React.createClass({ plural: getLangText('Upload cover photos') }} required/> - {getLangText('Featured Cover photo')} + name="supportingMaterials"> {getLangText('Supporting Materials (Optional)')})} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')} createBlobRoutine={this.getCreateBlobRoutine()} @@ -293,13 +295,11 @@ const PRRegisterPieceForm = React.createClass({ singular: getLangText('Upload supporting material'), plural: getLangText('Upload supporting materials') }}/> - {getLangText('Supporting Materials (Optional)')} + name="proofOfPayment"> {getLangText('Proof of payment')})} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')} createBlobRoutine={this.getCreateBlobRoutine()} @@ -318,7 +318,6 @@ const PRRegisterPieceForm = React.createClass({ plural: getLangText('Upload Screenshots') }} required/> - {getLangText('Proof of payment')}
span > span { margin-top: 0; } -} - -.input-upload-file-button-property { - text-align: left; - - .btn { - font-size: 1em; - margin-right: 1em; - } - - span + .btn { - margin-left: 1em; - } } \ No newline at end of file diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 7819eda0..49bc70e9 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -177,3 +177,15 @@ height: 12px; } +.upload-button-wrapper { + text-align: left; + + .btn { + font-size: 1em; + margin-right: 1em; + } + + span + .btn { + margin-left: 1em; + } +} \ No newline at end of file