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

style progress bar

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-09-09 15:15:54 +02:00
parent 801227cfee
commit 8255c8dc6f
5 changed files with 65 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -169,14 +169,16 @@ let FileDragAndDrop = React.createClass({
if(this.props.hashingProgress !== -2) {
return (
<div className={className}>
<p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
<p>
<a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
</p>
<ProgressBar
now={Math.ceil(this.props.hashingProgress)}
label="%(percent)s%"
className="ascribe-progress-bar"/>
<div className="file-drag-and-drop-hashing-dialog">
<p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
<p>
<a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
</p>
<ProgressBar
now={Math.ceil(this.props.hashingProgress)}
label="%(percent)s%"
className="ascribe-progress-bar"/>
</div>
</div>
);
} else {

12
js/components/ascribe_uploader/file_drag_and_drop_dialog.js
View File

@ -32,7 +32,7 @@ let FileDragAndDropDialog = React.createClass({
queryParamsUpload.method = 'upload';
return (
<span className="file-drag-and-drop-dialog present-options">
<div className="file-drag-and-drop-dialog present-options">
<p>{getLangText('Would you rather')}</p>
<Link
to={this.getPath()}
@ -51,12 +51,12 @@ let FileDragAndDropDialog = React.createClass({
{getLangText('Upload and hash your work')}
</span>
</Link>
</span>
</div>
);
} else {
if(this.props.multipleFiles) {
return (
<span className="file-drag-and-drop-dialog">
<div className="file-drag-and-drop-dialog">
<p>{getLangText('Drag files here')}</p>
<p>{getLangText('or')}</p>
<span
@ -64,13 +64,13 @@ let FileDragAndDropDialog = React.createClass({
onClick={this.props.onClick}>
{getLangText('choose files to upload')}
</span>
</span>
</div>
);
} else {
let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
return (
<span className="file-drag-and-drop-dialog">
<div className="file-drag-and-drop-dialog">
<p>{getLangText('Drag a file here')}</p>
<p>{getLangText('or')}</p>
<span
@ -78,7 +78,7 @@ let FileDragAndDropDialog = React.createClass({
onClick={this.props.onClick}>
{dialog}
</span>
</span>
</div>
);
}
}

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

@ -18,29 +18,41 @@ let FileDragAndDropPreviewIterator = React.createClass({
},
render() {
if(this.props.files && this.props.files.length > 0) {
let {
files,
handleDeleteFile,
handleCancelFile,
handlePauseFile,
handleResumeFile,
areAssetsDownloadable,
areAssetsEditable
} = this.props;
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if(files && files.length > 0) {
return (
<div className="file-drag-and-drop-preview-iterator">
<div>
{this.props.files.map((file, i) => {
<div className="file-drag-and-drop-preview-iterator-spacing">
{files.map((file, i) => {
if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
return (
<FileDragAndDropPreview
key={i}
file={file}
handleDeleteFile={this.props.handleDeleteFile}
handleCancelFile={this.props.handleCancelFile}
handlePauseFile={this.props.handlePauseFile}
handleResumeFile={this.props.handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable}
areAssetsEditable={this.props.areAssetsEditable}/>
handleDeleteFile={handleDeleteFile}
handleCancelFile={handleCancelFile}
handlePauseFile={handlePauseFile}
handleResumeFile={handleResumeFile}
areAssetsDownloadable={areAssetsDownloadable}
areAssetsEditable={areAssetsEditable}/>
);
} else {
return null;
}
})}
</div>
<FileDragAndDropPreviewProgress files={this.props.files} />
<FileDragAndDropPreviewProgress files={files} />
</div>
);
} else {

23
js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
View File

@ -22,23 +22,28 @@ let FileDragAndDropPreviewProgress = React.createClass({
overallProgress += files[i].size / sizeOfAllFiles * files[i].progress;
}
return overallProgress;
},
render() {
let overallProgress = this.calcOverallProgress();
let style = {
visibility: 'hidden'
};
if(overallProgress !== 0) {
return (
<ProgressBar
now={Math.ceil(overallProgress)}
label="Overall progress: %(percent)s%"
className="ascribe-progress-bar" />
);
} else {
return null;
style.visibility = 'visible';
}
console.log(overallProgress, style);
return (
<ProgressBar
now={Math.ceil(overallProgress)}
label="Overall progress: %(percent)s%"
className="ascribe-progress-bar"
style={style} />
);
}
});

14
sass/ascribe_uploader.scss
View File

@ -10,7 +10,6 @@
cursor: default !important;
padding: 1.5em 0 1.5em 0;
}
.inactive-dropzone {
@ -30,6 +29,7 @@
}
.file-drag-and-drop-preview-iterator {
margin: 2.5em 0 0 0;
text-align: right;
> div:first-child {
@ -37,6 +37,18 @@
}
}
.file-drag-and-drop-preview-iterator-spacing {
margin-bottom: 1em;
}
.file-drag-and-drop-dialog {
margin: 1.5em 0 1.5em 0;
}
.file-drag-and-drop-hashing-dialog {
margin: 1.5em 0 0 0;
}
.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
font-size: 1.5em !important;