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:
lilia 2016-02-22 12:43:05 -08:00
parent 7f8c76faca
commit a962d97bfb
4 changed files with 13 additions and 11 deletions

View file

@ -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>

View file

@ -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');
}
});

View file

@ -451,9 +451,10 @@ $avatar-size: 44px;
}
.result {
display: none;
text-align: center;
-webkit-user-select: text;
a {
-webkit-user-select: text;
}
}
}
.modal {

View file

@ -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;