mirror of
https://github.com/ascribe/onion.git
synced 2024-11-15 01:25:17 +01:00
Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-368-harmonize-functionality-of-ascrib
Conflicts: js/components/ascribe_uploader/react_s3_fine_uploader.js
This commit is contained in:
commit
5ecd1368f0
@ -19,7 +19,7 @@ let AccordionListItem = React.createClass({
|
||||
<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4 thumbnail-wrapper">
|
||||
<img src={this.props.content.thumbnail} />
|
||||
</div>
|
||||
<div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
|
||||
<div className="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
|
||||
<h1>{this.props.content.title}</h1>
|
||||
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
|
||||
<h3>{this.props.content.date_created.split('-')[0]}</h3>
|
||||
|
@ -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';
|
||||
|
@ -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 = (<FileDragAndDropPreviewOther
|
||||
onClick={this.handleDeleteFile}
|
||||
progress={this.props.file.progress}
|
||||
type={this.props.file.type.split('/')[1]}
|
||||
toggleUploadProcess={this.toggleUploadProcess}
|
||||
areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
|
||||
areAssetsDownloadable={this.props.areAssetsDownloadable}
|
||||
downloadFile={this.handleDownloadFile}/>);
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -31,10 +31,6 @@ let FileDragAndDropPreviewImage = React.createClass({
|
||||
this.props.toggleUploadProcess();
|
||||
},
|
||||
|
||||
downloadFile() {
|
||||
console.log('implement this');
|
||||
},
|
||||
|
||||
render() {
|
||||
let imageStyle = {
|
||||
backgroundImage: 'url("' + this.props.url + '")',
|
||||
|
@ -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;
|
||||
|
@ -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,15 +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)', '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"
|
||||
@ -387,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));
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -100,4 +100,4 @@ function _mergeOptions(obj1, obj2){
|
||||
}
|
||||
}
|
||||
return obj3;
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
5
sass/ascribe_theme.scss
Normal file
5
sass/ascribe_theme.scss
Normal file
@ -0,0 +1,5 @@
|
||||
/* All bootstrap overwrites should take place in this file */
|
||||
|
||||
.pager li a {
|
||||
color: white;
|
||||
}
|
@ -29,7 +29,7 @@
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
|
@ -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';
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user