Fix debug log submission loading UX
This flow broke a bit with transition to modal debug log. Restructure such that the loading class can be applied to an appropriate element inside the modal. Ensure that the input elements are hidden when submit is clicked, the result elements are shown when the log upload is completed. // FREEBIE
This commit is contained in:
parent
7f8c76faca
commit
a962d97bfb
4 changed files with 13 additions and 11 deletions
|
@ -321,8 +321,8 @@
|
|||
<button class='close'>{{ cancel }}</button>
|
||||
</div>
|
||||
<div class='result'>
|
||||
<a target='_blank'></a>
|
||||
<div><button class='close'>{{ close }}</button></div>
|
||||
<a class='hide' target='_blank'></a>
|
||||
<div class='hide'><button class='close'>{{ close }}</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
@ -30,12 +30,13 @@
|
|||
submit: function(e) {
|
||||
e.preventDefault();
|
||||
console.post(this.$('textarea').val()).then(function(url) {
|
||||
this.$el.removeClass('loading');
|
||||
var link = this.$('.result').show().find('a');
|
||||
this.$('.loading').removeClass('loading');
|
||||
var link = this.$('.result').find('a');
|
||||
link.attr('href', url).text(url);
|
||||
this.$('.result .hide').removeClass('hide');
|
||||
}.bind(this));
|
||||
this.$('form').remove();
|
||||
this.$el.addClass('loading');
|
||||
this.$('.buttons, textarea').remove();
|
||||
this.$('.result').addClass('loading');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -451,9 +451,10 @@ $avatar-size: 44px;
|
|||
}
|
||||
|
||||
.result {
|
||||
display: none;
|
||||
text-align: center;
|
||||
-webkit-user-select: text;
|
||||
a {
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal {
|
||||
|
|
|
@ -353,9 +353,9 @@ img.emoji {
|
|||
color: black;
|
||||
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
|
||||
.debug-log .result {
|
||||
display: none;
|
||||
text-align: center;
|
||||
-webkit-user-select: text; }
|
||||
text-align: center; }
|
||||
.debug-log .result a {
|
||||
-webkit-user-select: text; }
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
|
|
Loading…
Reference in a new issue