mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-01-29 19:37:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Display a spinner when files are being uploaded

Browse Source
This commit is contained in:
Giuseppe Criscione 2020-11-05 00:04:56 +01:00
parent e387126ffc
commit 5e710de74f
5 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/assets/css/admin.css
View File

@ -726,7 +726,7 @@ label {
padding: 0.5rem;
background-color: #f7f7f7; }
.file-input-label span {
.file-input-label > span {
display: block;
padding: 1.5rem 1rem;
border: 2px dashed #c9c9c9;
@ -734,7 +734,7 @@ label {
text-align: center;
transition: background-color 300ms; }
.file-input-label.drag span {
.file-input-label.drag > span {
background-color: #fff; }
.toggle-group {

2
admin/assets/css/admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
admin/assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
admin/assets/js/src/components/fileinput.js
View File

@ -2,11 +2,16 @@ import Utils from './utils';
export default function FileInput(input) {
var label = $('label[for="' + input.id + '"]');
var span = $('span', label);
input.setAttribute('data-label', $('label[for="' + input.id + '"] span').innerHTML);
input.addEventListener('change', updateLabel);
input.addEventListener('input', updateLabel);
input.form.addEventListener('submit', function () {
span.innerHTML += ' <span class="spinner"></span>';
});
label.addEventListener('drag', preventDefault);
label.addEventListener('dragstart', preventDefault);
label.addEventListener('dragend', preventDefault);
@ -22,7 +27,6 @@ export default function FileInput(input) {
});
function updateLabel() {
var span = $('label[for="' + this.id + '"] span');
if (this.files.length > 0) {
span.innerHTML = this.files[0].name;
} else {

4
admin/assets/scss/components/_forms-custom.scss
View File

@ -166,7 +166,7 @@
background-color: $color-gray-xxlight;
}
.file-input-label span {
.file-input-label > span {
display: block;
padding: $file-input-label-inner-padding-v $file-input-label-inner-padding-h;
border: $file-input-label-inner-border-width dashed $color-gray;
@ -175,7 +175,7 @@
transition: background-color $transition-time-m;
}
.file-input-label.drag span {
.file-input-label.drag > span {
background-color: #fff;
}