From e6ac475ad594a0503fe49735dd0722d99b2eb418 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 30 Jun 2015 16:15:50 +0200 Subject: [PATCH 1/3] add download functionality to s3 fine uploader --- .../file_drag_and_drop_preview.js | 13 +++-- .../file_drag_and_drop_preview_image.js | 4 -- .../file_drag_and_drop_preview_other.js | 6 +-- .../react_s3_fine_uploader.js | 50 +++++++++---------- js/utils/general_utils.js | 2 +- 5 files changed, 34 insertions(+), 41 deletions(-) diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js index 66158f25..84853018 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js @@ -40,8 +40,11 @@ let FileDragAndDropPreview = React.createClass({ } }, - // implement a handle cancel action here that triggers fineuploaders cancel method - // to delete files that are currently uploading + handleDownloadFile() { + if(this.props.file.s3Url) { + open(this.props.file.s3Url); + } + }, render() { let previewElement; @@ -53,14 +56,16 @@ let FileDragAndDropPreview = React.createClass({ progress={this.props.file.progress} url={this.props.file.url} toggleUploadProcess={this.toggleUploadProcess} - areAssetsDownloadable={this.props.areAssetsDownloadable}/>); + areAssetsDownloadable={this.props.areAssetsDownloadable} + downloadFile={this.handleDownloadFile}/>); } else { previewElement = (); + areAssetsDownloadable={this.props.areAssetsDownloadable} + downloadFile={this.handleDownloadFile}/>); } return ( diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js index 82e87521..1cbf67e6 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js @@ -31,10 +31,6 @@ let FileDragAndDropPreviewImage = React.createClass({ this.props.toggleUploadProcess(); }, - downloadFile() { - console.log('implement this'); - }, - render() { let imageStyle = { backgroundImage: 'url("' + this.props.url + '")', diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js index af67b569..1fed702f 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js @@ -11,7 +11,7 @@ let FileDragAndDropPreviewOther = React.createClass({ progress: React.PropTypes.number, areAssetsDownloadable: React.PropTypes.bool, toggleUploadProcess: React.PropTypes.func, - downloadFile: React.PropTypes.func, + downloadFile: React.PropTypes.func }, getInitialState() { @@ -31,10 +31,6 @@ let FileDragAndDropPreviewOther = React.createClass({ this.props.toggleUploadProcess(); }, - downloadFile() { - console.log('implement this'); - }, - render() { let actionSymbol; diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index ec13c9f6..8e720f02 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -314,25 +314,6 @@ var ReactS3FineUploader = React.createClass({ } }, - onDeleteComplete(id, xhr, isError) { - if(isError) { - let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - } else { - this.removeFileWithIdFromFilesToUpload(id); - - let notification = new GlobalNotificationModel('File deleted', 'success', 5000); - GlobalNotificationActions.appendGlobalNotification(notification); - } - - if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) { - // if so, set uploadstatus to true - this.props.setIsUploadReady(true); - } else { - this.props.setIsUploadReady(false); - } - }, - onProgress(id, name, uploadedBytes, totalBytes) { let newState = React.addons.update(this.state, { filesToUpload: { [id]: { @@ -364,18 +345,37 @@ var ReactS3FineUploader = React.createClass({ let newState = React.addons.update(this.state, {filesToUpload: {$set: updatedFilesToUpload}}); this.setState(newState); } else { - let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'success', 5000); + let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'danger', 10000); GlobalNotificationActions.appendGlobalNotification(notification); throw new Error('The session request failed', response); } }, + onDeleteComplete(id, xhr, isError) { + if(isError) { + let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + } else { + this.removeFileWithIdFromFilesToUpload(id); + + let notification = new GlobalNotificationModel('File deleted', 'success', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + } + + if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) { + // if so, set uploadstatus to true + this.props.setIsUploadReady(true); + } else { + this.props.setIsUploadReady(false); + } + }, + handleDeleteFile(fileId) { // In some instances (when the file was already uploaded and is just displayed to the user) // fineuploader does not register an id on the file (we do, don't be confused by this!). // Since you can only delete a file by its id, we have to implement this method ourselves - // + // // So, if an id is not present, we delete the file manually // To check which files are already uploaded from previous sessions we check their status. // If they are, it is "online" @@ -390,12 +390,8 @@ var ReactS3FineUploader = React.createClass({ let fileToDelete = this.state.filesToUpload[fileId]; S3Fetcher .deleteFile(fileToDelete.s3Key, fileToDelete.s3Bucket) - .then((res) => { - console.log(res); - }) - .catch((err) => { - console.log(err); - }); + .then(() => this.onDeleteComplete(fileToDelete.id, null, false)) + .catch(() => this.onDeleteComplete(fileToDelete.id, null, true)); } }, diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index 98202725..ade2350b 100644 --- a/js/utils/general_utils.js +++ b/js/utils/general_utils.js @@ -100,4 +100,4 @@ function _mergeOptions(obj1, obj2){ } } return obj3; -} +} \ No newline at end of file From a4bf38085c4674178dcbc3d9a6555bed4869dbf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 30 Jun 2015 16:24:41 +0200 Subject: [PATCH 2/3] style pager buttons --- sass/ascribe_theme.scss | 5 +++++ sass/main.scss | 1 + sass/variables.scss | 14 +++++++------- 3 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 sass/ascribe_theme.scss diff --git a/sass/ascribe_theme.scss b/sass/ascribe_theme.scss new file mode 100644 index 00000000..9eb92a30 --- /dev/null +++ b/sass/ascribe_theme.scss @@ -0,0 +1,5 @@ +/* All bootstrap overwrites should take place in this file */ + +.pager li a { + color: white; +} \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss index 37000d4f..4b7230bb 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -7,6 +7,7 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'variables'; @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap'; @import '../node_modules/react-datepicker/dist/react-datepicker'; +@import 'ascribe_theme'; @import './ascribe-fonts/style'; @import './ascribe-fonts/ascribe-fonts'; @import 'ascribe_login'; diff --git a/sass/variables.scss b/sass/variables.scss index b46f509f..01377b7f 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -468,16 +468,16 @@ $pagination-disabled-border: #ddd !default; // //## -$pager-bg: $pagination-bg !default; -$pager-border: $pagination-border !default; -$pager-border-radius: 15px !default; +$pager-bg: $ascribe-color-full !default; +$pager-border: $ascribe-color-full !default; +$pager-border-radius: 0 !default; -$pager-hover-bg: $pagination-hover-bg !default; +$pager-hover-bg: darken($ascribe-color-full, 10%) !default; -$pager-active-bg: $pagination-active-bg !default; -$pager-active-color: $pagination-active-color !default; +$pager-active-bg: $ascribe-color-full !default; +$pager-active-color: $ascribe-color-full !default; -$pager-disabled-color: $pagination-disabled-color !default; +$pager-disabled-color: lighten($ascribe-color-full, 10%) !default; //== Jumbotron From 2a5bd9173e3b0cf1bacba9c6c6016bbd31bb9b88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 30 Jun 2015 16:53:22 +0200 Subject: [PATCH 3/3] fix image scaling --- .../ascribe_accordion_list/accordion_list_item.js | 2 +- .../accordion_list_item_table_editions.js | 1 - sass/ascribe_accordion_list.scss | 15 +++++++++++---- sass/ascribe_uploader.scss | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 57c16435..dfec501e 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -19,7 +19,7 @@ let AccordionListItem = React.createClass({
-
+

{this.props.content.title}

{getLangText('by %s', this.props.content.artist_name)}

{this.props.content.date_created.split('-')[0]}

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index ed717c57..370c4df9 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -4,7 +4,6 @@ import React from 'react'; import EditionListStore from '../../stores/edition_list_store'; import EditionListActions from '../../actions/edition_list_actions'; -import PieceListActions from '../../actions/piece_list_actions'; import AccordionListItemTable from './accordion_list_item_table'; import AccordionListItemTableToggle from './accordion_list_item_table_toggle'; diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index e3b37345..90af4bfb 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -21,12 +21,19 @@ $ascribe-accordion-list-font: 'Source Sans Pro'; height:100%; // ToDo: Include media queries for thumbnail .thumbnail-wrapper { - margin-left:0; - padding-left:0; + width: 110px; + height: 110px; + padding:0; img { - display:block; - height: $ascribe-accordion-list-item-height; + max-width: 100%; + max-height: 100%; } + &::before { + content: ' '; + display: inline-block; + vertical-align: middle; /* vertical alignment of the inline element */ + height: 100%; + } } h1 { margin-top: .3em; diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 892c6235..92205c30 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -29,7 +29,7 @@ margin-top: 1em; - &:before { + &::before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */