ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-31 09:07:48 +01:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-504-revive-coa-for-new-frontend

Browse Source
This commit is contained in:
diminator 2015-06-26 11:52:59 +02:00
commit 2c2ccd7891
10 changed files with 75 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -99,7 +99,6 @@ var FileDragAndDrop = React.createClass({
},
render: function () {
console.log(this.props.dropzoneInactive);
let hasFiles = this.props.filesToUpload.length > 0;
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';

28
js/components/ascribe_uploader/file_drag_and_drop_preview.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
@ -6,7 +8,7 @@ import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
let FileDragAndDropPreview = React.createClass({
propsTypes: {
propTypes: {
file: React.PropTypes.shape({
url: React.PropTypes.string,
type: React.PropTypes.string
@ -25,24 +27,28 @@ let FileDragAndDropPreview = React.createClass({
}
},
// implement a handle cancel action here that triggers fineuploaders cancel method
// to delete files that are currently uploading
render() {
let previewElement;
// Decide wether an image or a placeholder picture should be displayed
// Decide whether an image or a placeholder picture should be displayed
if(this.props.file.type.split('/')[0] === 'image') {
previewElement = (<FileDragAndDropPreviewImage
progress={this.props.file.progress}
url={this.props.file.url}/>);
previewElement = (<FileDragAndDropPreviewImage
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
url={this.props.file.url}/>);
} else {
previewElement = (<FileDragAndDropPreviewOther
progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}/>);
previewElement = (<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile}
progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}/>);
}
return (
<div
className="file-drag-and-drop-position"
onClick={this.handleDeleteFile}>
<div
className="file-drag-and-drop-position">
{previewElement}
</div>
);

7
js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
View File

@ -1,10 +1,13 @@
'use strict';
import React from 'react';
import ProgressBar from 'react-progressbar';
let FileDragAndDropPreviewImage = React.createClass({
propTypes: {
progress: React.PropTypes.number,
url: React.PropTypes.string
url: React.PropTypes.string,
onClick: React.PropTypes.func
},
render() {
@ -15,9 +18,11 @@ let FileDragAndDropPreviewImage = React.createClass({
return (
<div
onClick={this.props.onClick}
className="file-drag-and-drop-preview-image"
style={imageStyle}>
<ProgressBar completed={this.props.progress} color="black"/>
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
</div>
);
}

4
js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react';
import FileDragAndDropPreview from './file_drag_and_drop_preview';
@ -14,7 +16,7 @@ let FileDragAndDropPreviewIterator = React.createClass({
<div>
{this.props.files.map((file, i) => {
return (
<FileDragAndDropPreview
<FileDragAndDropPreview
key={i}
file={file}
handleDeleteFile={this.props.handleDeleteFile}/>

11
js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
View File

@ -1,19 +1,24 @@
'use strict';
import React from 'react';
import ProgressBar from 'react-progressbar';
let FileDragAndDropPreviewOther = React.createClass({
propTypes: {
type: React.PropTypes.string,
progress: React.PropTypes.number
progress: React.PropTypes.number,
onClick: React.PropTypes.func
},
render() {
return(
<div
return (
<div
onClick={this.props.onClick}
className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other">
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
<span>{'.' + this.props.type}</span>
</div>
</div>

16
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -221,6 +221,7 @@ var ReactS3FineUploader = React.createClass({
onCancel() {
console.log('cancel');
// handle file removal here, for this.state.filesToUpload (same as in onDeleteComplete)
},
onSessionRequestComplete() {
@ -229,18 +230,23 @@ var ReactS3FineUploader = React.createClass({
onDeleteComplete(id, xhr, isError) {
if(isError) {
let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
} else {
// also, sync files from state with the ones from fineuploader
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
// splice because I can
filesToUpload.splice(id, 1);
// set state
this.setState({
filesToUpload: React.addons.update(this.state.filesToUpload, {$set: filesToUpload})
let newState = React.addons.update(this.state, {
filesToUpload: { $set: filesToUpload }
});
} else {
console.log(id);
// TODO: add global notification
this.setState(newState);
let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
}
},

2
js/components/register_piece.js
View File

@ -179,7 +179,7 @@ let FileUploader = React.createClass( {
}
return name;
}}
multiple={false}/>
multiple={true}/>
);
}
});

64
sass/ascribe_react_s3_fineuploader.scss
View File

@ -1,64 +0,0 @@
.file-drag-and-drop {
display: table-cell;
outline: 1px dashed #616161;
cursor: pointer;
vertical-align: middle;
text-align: center;
height:208px;
width: 672px;
background-color: #FAFAFA;
transition: .1s linear background-color;
}
.file-drag-and-drop:hover {
background-color: rgba(72, 218, 203, 0.2);
}
.file-drag-and-drop > span {
font-size: 1.5em;
}
.has-files {
text-align: left;
padding: 3em 0 0 0;
}
.file-drag-and-drop-position {
display: inline-block;
margin: 0 0 3em 3em;
float:left;
}
.file-drag-and-drop-preview-table-wrapper {
display: table;
height:94px;
width:104px;
}
.file-drag-and-drop-preview {
overflow:hidden;
cursor: default;
background-color: #EEEEEE;
border: 1px solid #616161;
}
.file-drag-and-drop-preview-image {
display: table;
height:104px;
width:104px;
overflow:hidden;
border: 1px solid #616161;
}
.file-drag-and-drop-preview-other {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.file-drag-and-drop-preview-other span {
font-size: 1.1em;
display: block;
margin-top: -10px;
}

32
sass/ascribe_uploader.scss
View File

@ -56,6 +56,33 @@
width:104px;
overflow:hidden;
border: 1px solid #616161;
text-align: center;
}
.file-drag-and-drop-preview-image .delete-file {
font-size: 3em;
margin-top: .5em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
&:hover {
color: #d9534f;
}
}
.file-drag-and-drop-preview-other .delete-file {
position: relative;
top: .45em;
margin-top: 0;
font-size: 3em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
&:hover {
color: #d9534f;
}
}
.file-drag-and-drop-preview-other {
@ -65,8 +92,7 @@
}
.file-drag-and-drop-preview-other span {
font-size: 1.1em;
.file-drag-and-drop-preview-other span:not(:first-child) {
display: block;
margin-top: -10px;
margin-top: 1.5em;
}

1
sass/main.scss
View File

@ -22,7 +22,6 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_piece_register';
@import 'offset_right';
@import 'ascribe_settings';
@import 'ascribe_react_s3_fineuploader';
body {
background-color: #FDFDFD;