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];
},
clearSelection() {
this.refs.fileSelector.getDOMNode().value = '';
},
handleOnClick() {
const uploadingFiles = this.getUploadingFiles();
let evt;
const uploadingFile = this.getUploadingFiles();
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,
// but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', {
if(uploadingFile.length) {
this.clearSelection();
this.props.handleCancelFile(uploadingFile[0].id);
} else if(uploadedFile) {
this.props.handleDeleteFile(uploadedFile.id);
}
try {
evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
} catch(e) {
// For browsers that do not support the new MouseEvent syntax
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() {
@ -129,7 +136,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
ref="fileSelector"
type="file"
style={{
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%);
}
// uploader
.ascribe-progress-bar > .progress-bar {
background-color: lighten($ascribe--button-default-color, 20%);
}
.action-file {
text-shadow: -1px 0 black,
0 1px black,

9
sass/ascribe_uploader.scss
View File

@ -120,7 +120,7 @@
&.icon-ascribe-ok, &.icon-ascribe-ok:hover {
cursor: default;
color: lighten($ascribe--button-default-color, 20%);
color: $ascribe-dark-blue;
font-size: 4.2em;
top: .2em;
}
@ -176,9 +176,12 @@
}
span {
font-size: 1.25em;
font-size: 1.2em;
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;
}
}