ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +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) { if(this.props.hashingProgress !== -2) {
return ( return (
<div className={className}> <div className={className}>
<p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p> <div className="file-drag-and-drop-hashing-dialog">
<p> <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
<a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a> <p>
</p> <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
<ProgressBar </p>
now={Math.ceil(this.props.hashingProgress)} <ProgressBar
label="%(percent)s%" now={Math.ceil(this.props.hashingProgress)}
className="ascribe-progress-bar"/> label="%(percent)s%"
className="ascribe-progress-bar"/>
</div>
</div> </div>
); );
} else { } 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'; queryParamsUpload.method = 'upload';
return ( 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> <p>{getLangText('Would you rather')}</p>
<Link <Link
to={this.getPath()} to={this.getPath()}
@ -51,12 +51,12 @@ let FileDragAndDropDialog = React.createClass({
{getLangText('Upload and hash your work')} {getLangText('Upload and hash your work')}
</span> </span>
</Link> </Link>
</span> </div>
); );
} else { } else {
if(this.props.multipleFiles) { if(this.props.multipleFiles) {
return ( return (
<span className="file-drag-and-drop-dialog"> <div className="file-drag-and-drop-dialog">
<p>{getLangText('Drag files here')}</p> <p>{getLangText('Drag files here')}</p>
<p>{getLangText('or')}</p> <p>{getLangText('or')}</p>
<span <span
@ -64,13 +64,13 @@ let FileDragAndDropDialog = React.createClass({
onClick={this.props.onClick}> onClick={this.props.onClick}>
{getLangText('choose files to upload')} {getLangText('choose files to upload')}
</span> </span>
</span> </div>
); );
} else { } else {
let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload'); let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
return ( return (
<span className="file-drag-and-drop-dialog"> <div className="file-drag-and-drop-dialog">
<p>{getLangText('Drag a file here')}</p> <p>{getLangText('Drag a file here')}</p>
<p>{getLangText('or')}</p> <p>{getLangText('or')}</p>
<span <span
@ -78,7 +78,7 @@ let FileDragAndDropDialog = React.createClass({
onClick={this.props.onClick}> onClick={this.props.onClick}>
{dialog} {dialog}
</span> </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() { 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 ( return (
<div className="file-drag-and-drop-preview-iterator"> <div className="file-drag-and-drop-preview-iterator">
<div> <div className="file-drag-and-drop-preview-iterator-spacing">
{this.props.files.map((file, i) => { {files.map((file, i) => {
if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) { if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
return ( return (
<FileDragAndDropPreview <FileDragAndDropPreview
key={i} key={i}
file={file} file={file}
handleDeleteFile={this.props.handleDeleteFile} handleDeleteFile={handleDeleteFile}
handleCancelFile={this.props.handleCancelFile} handleCancelFile={handleCancelFile}
handlePauseFile={this.props.handlePauseFile} handlePauseFile={handlePauseFile}
handleResumeFile={this.props.handleResumeFile} handleResumeFile={handleResumeFile}
areAssetsDownloadable={this.props.areAssetsDownloadable} areAssetsDownloadable={areAssetsDownloadable}
areAssetsEditable={this.props.areAssetsEditable}/> areAssetsEditable={areAssetsEditable}/>
); );
} else { } else {
return null; return null;
} }
})} })}
</div> </div>
<FileDragAndDropPreviewProgress files={this.props.files} /> <FileDragAndDropPreviewProgress files={files} />
</div> </div>
); );
} else { } 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; overallProgress += files[i].size / sizeOfAllFiles * files[i].progress;
} }
return overallProgress; return overallProgress;
}, },
render() { render() {
let overallProgress = this.calcOverallProgress(); let overallProgress = this.calcOverallProgress();
let style = {
visibility: 'hidden'
};
if(overallProgress !== 0) { if(overallProgress !== 0) {
return ( style.visibility = 'visible';
<ProgressBar
now={Math.ceil(overallProgress)}
label="Overall progress: %(percent)s%"
className="ascribe-progress-bar" />
);
} else {
return null;
} }
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; cursor: default !important;
padding: 1.5em 0 1.5em 0;
} }
.inactive-dropzone { .inactive-dropzone {
@ -30,6 +29,7 @@
} }
.file-drag-and-drop-preview-iterator { .file-drag-and-drop-preview-iterator {
margin: 2.5em 0 0 0;
text-align: right; text-align: right;
> div:first-child { > 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 { .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
font-size: 1.5em !important; font-size: 1.5em !important;