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

Restyle progress bar and fix bug in fileSelector

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-25 10:54:29 +01:00
parent 809ca6f40a
commit 7d4d61e2e6
3 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -50,28 +50,35 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0]; return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
}, },
clearSelection() {
this.refs.fileSelector.getDOMNode().value = '';
},
handleOnClick() { handleOnClick() {
const uploadingFiles = this.getUploadingFiles(); let evt;
const uploadingFile = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile(); const uploadedFile = this.getUploadedFile();
if(uploadedFile) {
this.props.handleCancelFile(uploadedFile.id);
}
if(uploadingFiles.length === 0) {
// We only want the button to be clickable if there are no files currently uploading
// Firefox only recognizes the simulated mouse click if bubbles is set to true, if(uploadingFile.length) {
// but since Google Chrome propagates the event much further than needed, we this.clearSelection();
// need to stop propagation as soon as the event is created this.props.handleCancelFile(uploadingFile[0].id);
var evt = new MouseEvent('click', { } else if(uploadedFile) {
this.props.handleDeleteFile(uploadedFile.id);
}
try {
evt = new MouseEvent('click', {
view: window, view: window,
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });
} catch(e) {
evt.stopPropagation(); // For browsers that do not support the new MouseEvent syntax
this.refs.fileinput.getDOMNode().dispatchEvent(evt); evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
} }
evt.stopPropagation();
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
}, },
onClickRemove() { onClickRemove() {
@ -129,7 +136,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
{this.getButtonLabel()} {this.getButtonLabel()}
<input <input
multiple={multiple} multiple={multiple}
ref="fileinput" ref="fileSelector"
type="file" type="file"
style={{ style={{
display: 'none', display: 'none',

5
sass/ascribe_custom_style.scss
View File

@ -580,11 +580,6 @@ fieldset[disabled] .btn-secondary.active {
background-color: lighten($ascribe--button-default-color, 20%); background-color: lighten($ascribe--button-default-color, 20%);
} }
// uploader
.ascribe-progress-bar > .progress-bar {
background-color: lighten($ascribe--button-default-color, 20%);
}
.action-file { .action-file {
text-shadow: -1px 0 black, text-shadow: -1px 0 black,
0 1px black, 0 1px black,

9
sass/ascribe_uploader.scss
View File

@ -120,7 +120,7 @@
&.icon-ascribe-ok, &.icon-ascribe-ok:hover { &.icon-ascribe-ok, &.icon-ascribe-ok:hover {
cursor: default; cursor: default;
color: lighten($ascribe--button-default-color, 20%); color: $ascribe-dark-blue;
font-size: 4.2em; font-size: 4.2em;
top: .2em; top: .2em;
} }
@ -176,9 +176,12 @@
} }
span { span {
font-size: 1.25em; font-size: 1.2em;
color: white; color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; text-shadow: -1px 0 $ascribe--button-default-color,
0 1px $ascribe--button-default-color,
1px 0 $ascribe--button-default-color,
0 -1px $ascribe--button-default-color;
} }
} }