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

Various small changes for FileDragAndDrop

Browse Source 
Changed:
  - If only one file submitted: hide file-specific progress bar + filename extension
  - Fix bug for when uploaded file is deleteable (avoid error)
  - Add checkmark for when file was actually submitted
This commit is contained in:
Tim Daubenschütz 2015-11-20 14:30:24 +01:00
parent e4479dc95b
commit 1cf8ac2f31
5 changed files with 88 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
View File

@ -41,14 +41,21 @@ const FileDragAndDropPreview = React.createClass({
},
handleDeleteFile() {
// handleDeleteFile is optional, so if its not submitted,
// don't run it
// On the other hand, if the files progress is not yet at a 100%,
// just run fineuploader.cancel
if(this.props.handleDeleteFile && this.props.file.progress === 100) {
this.props.handleDeleteFile(this.props.file.id);
} else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
this.props.handleCancelFile(this.props.file.id);
const { handleDeleteFile,
handleCancelFile,
file } = this.props;
// `handleDeleteFile` is optional, so if its not submitted, don't run it
//
// For delete though, we only want to trigger it, when we're sure that
// the file has *completely* been uploaded to S3 and call now also be
// deleted using an HTTP DELETE request.
if (handleDeleteFile &&
file.progress === 100 &&
(file.status === 'upload successful' || file.status === 'online') &&
file.s3UrlSafe) {
handleDeleteFile(file.id);
} else if(handleCancelFile) {
handleCancelFile(file.id);
}
},
@ -107,7 +114,8 @@ const FileDragAndDropPreview = React.createClass({
url={file.url}
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={areAssetsDownloadable}
downloadUrl={file.s3UrlSafe}/>
downloadUrl={file.s3UrlSafe}
showProgress={numberOfDisplayedFiles > 1} />
);
} else {
previewElement = (
@ -117,7 +125,8 @@ const FileDragAndDropPreview = React.createClass({
type={file.type.split('/')[1]}
toggleUploadProcess={this.toggleUploadProcess}
areAssetsDownloadable={areAssetsDownloadable}
downloadUrl={file.s3UrlSafe}/>
downloadUrl={file.s3UrlSafe}
showProgress={numberOfDisplayedFiles > 1} />
);
}

45
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
View File

@ -3,6 +3,7 @@
import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AclProxy from '../../acl_proxy';
import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils';
@ -15,7 +16,8 @@ const FileDragAndDropPreviewImage = React.createClass({
url: string,
toggleUploadProcess: func,
downloadUrl: string,
areAssetsDownloadable: bool
areAssetsDownloadable: bool,
showProgress: bool
},
getInitialState() {
@ -36,40 +38,45 @@ const FileDragAndDropPreviewImage = React.createClass({
},
render() {
let imageStyle = {
backgroundImage: 'url("' + this.props.url + '")',
const { url,
progress,
areAssetsDownloadable,
downloadUrl,
showProgress } = this.props;
const imageStyle = {
backgroundImage: 'url("' + url + '")',
backgroundSize: 'cover'
};
let actionSymbol;
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
}
} else {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(progress === 100 && areAssetsDownloadable) {
actionSymbol = <a href={downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
} else if(progress >= 0 && progress < 100) {
actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
} else {
actionSymbol = (
<span
className="glyphicon glyphicon-ok action-file" />
);
}
return (
<div
className="file-drag-and-drop-preview-image"
style={imageStyle}>
<ProgressBar
now={Math.ceil(this.props.progress)}
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
<AclProxy
show={showProgress}>
<ProgressBar
now={Math.ceil(progress)}
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
</AclProxy>
{actionSymbol}
</div>
);

47
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
View File

@ -3,6 +3,7 @@
import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AclProxy from '../../acl_proxy';
import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils';
@ -15,7 +16,8 @@ const FileDragAndDropPreviewOther = React.createClass({
progress: number,
areAssetsDownloadable: bool,
toggleUploadProcess: func,
downloadUrl: string
downloadUrl: string,
showProgress: bool
},
getInitialState() {
@ -36,39 +38,50 @@ const FileDragAndDropPreviewOther = React.createClass({
},
render() {
const { progress,
areAssetsDownloadable,
downloadUrl,
type,
showProgress } = this.props;
const style = !showProgress ? { visibility: 'hidden' }: null;
let actionSymbol;
if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
} else if(this.props.progress === 100) {
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(this.props.areAssetsDownloadable) {
actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
}
} else {
// only if assets are actually downloadable, there should be a
// download icon if the process is already at 100%.
// If not, no actionSymbol should be displayed
if (progress === 100 && areAssetsDownloadable) {
actionSymbol = (
<a
href={downloadUrl}
target="_blank"
className="glyphicon glyphicon-download action-file"
aria-hidden="true"
title={getLangText('Download file')}/>
);
} else if(progress >= 0 && progress < 100) {
actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
} else {
actionSymbol = (
<span
className="glyphicon glyphicon-ok action-file" />
);
}
return (
<div
className="file-drag-and-drop-preview">
<ProgressBar
now={Math.ceil(this.props.progress)}
now={Math.ceil(progress)}
style={style}
className="ascribe-progress-bar ascribe-progress-bar-xs"/>
<div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other">
{actionSymbol}
<p>{'.' + this.props.type}</p>
<p style={style}>{'.' + type}</p>
</div>
</div>
</div>

4
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
View File

@ -40,6 +40,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
},
render() {
const files = this.props.files.filter(displayValidProgressFilesFilter);
let overallProgress = this.calcOverallProgress();
let overallFileSize = this.calcOverallFileSize();
let style = {
@ -48,7 +49,8 @@ let FileDragAndDropPreviewProgress = React.createClass({
// only visible if overallProgress is over zero
// or the overallFileSize is greater than 10MB
if(overallProgress !== 0 && overallFileSize > 10000000) {
// or the user is only uploading one file
if(overallProgress !== 0 && overallFileSize > 10000000 || files.length === 1) {
style.visibility = 'visible';
}

10
sass/ascribe_uploader.scss
View File

@ -111,6 +111,7 @@
cursor: default;
overflow: hidden;
}
.action-file {
color: white;
cursor: pointer;
@ -129,6 +130,11 @@
&:hover {
color: #d9534f;
}
&.glyphicon-ok, &.glyphicon-ok:hover {
cursor: default;
color: lighten($ascribe--button-default-color, 20%);
}
}
.spinner-file {
@ -144,6 +150,10 @@
width: 104px;
.action-file, .spinner-file {
margin-top: .8em;
}
.ascribe-progress-bar + .action-file, .ascribe-progress-bar + .spinner-file {
margin-top: .6em;
}
}