Verified Commit 272772f0 authored by Štěpán Henek's avatar Štěpán Henek 🌩

ui improvements: exchanges spinner, table fixes

parent 83ba5fcd
......@@ -48,7 +48,7 @@ var Foris = {
Foris.initialize = function () {
$(document).on("change", ".has-requirements", function () {
var input = $(this);
input.parent().append('<img src="' + Foris.scriptname + '/static/img/icon-loading.gif" class="field-loading" alt="' + Foris.messages.loading + '">');
input.parent().append(' <i class="fas fa-spinner rotate"></i>');
Foris.updateForm(input.closest("form"));
});
......
......@@ -75,22 +75,14 @@
.test-success, .test-fail, .test-loading
font-weight: bold
padding-left: 24px
.test-success
background: inline-image('../.inline-assets/icon-success.png') no-repeat left 50%
border-color: $info-color
color: $info-color
.test-fail
background: inline-image('../.inline-assets/icon-fail.png') no-repeat left 50%
border-color: $error-color
color: $error-color
.test-loading
background: inline-image('../.inline-assets/icon-refresh.png') no-repeat left 50%
border-color: $loading-color
color: $loading-color
#connectivity-retest
......@@ -196,10 +188,6 @@
line-height: 2em
height: 2em
#ntp-loading
height: 2em
display: none
#ntp-error
display: none
......
......@@ -15,3 +15,5 @@ table
margin-bottom: 2px
tbody td
text-align: center
tbody tr td:first-child
text-align: left
......@@ -11,11 +11,11 @@
</tr>
</thead>
<tbody>
<tr><td>{% trans %}IPv4 connectivity{% endtrans %}</td><td class="result" data-result-type="ipv4-conn-test">???</td></tr>
<tr><td>{% trans %}IPv4 gateway connectivity{% endtrans %}</td><td class="result" data-result-type="ipv4_gateway-conn-test">???</td></tr>
<tr><td>{% trans %}IPv4 connectivity{% endtrans %}</td><td class="result" data-result-type="ipv4-conn-test"><i class="fas fa-question-circle"></i></td></tr>
<tr><td>{% trans %}IPv4 gateway connectivity{% endtrans %}</td><td class="result" data-result-type="ipv4_gateway-conn-test"><i class="fas fa-question-circle"></i></td></tr>
{% if ipv6_test %}
<tr><td>{% trans %}IPv6 connectivity{% endtrans %}</td><td class="result" data-result-type="ipv6-conn-test">???</td></tr>
<tr><td>{% trans %}IPv6 gateway connectivity{% endtrans %}</td><td class="result" data-result-type="ipv6_gateway-conn-test">???</td></tr>
<tr><td>{% trans %}IPv6 connectivity{% endtrans %}</td><td class="result" data-result-type="ipv6-conn-test"><i class="fas fa-question-circle"></i></td></tr>
<tr><td>{% trans %}IPv6 gateway connectivity{% endtrans %}</td><td class="result" data-result-type="ipv6_gateway-conn-test"><i class="fas fa-question-circle"></i></td></tr>
{% endif %}
</tbody>
</table>
......@@ -26,9 +26,9 @@
var field = key + "-conn-test";
var resultBox = $("#test-results").find(".result[data-result-type=" + field + "]");
if (result) {
resultBox.removeClass("test-fail").removeClass("test-loading").addClass("test-success").text(Foris.messages.ok);
resultBox.removeClass("test-fail").removeClass("test-loading").addClass("test-success").html('<i class="fas fa-check-circle"></i>');
} else {
resultBox.removeClass("test-success").removeClass("test-loading").addClass("test-fail").text(Foris.messages.error);
resultBox.removeClass("test-success").removeClass("test-loading").addClass("test-fail").html('<i class="fas fa-exclamation-circle"></i>');
}
}
Foris.addWsHanlder("wan", (msg) => {
......@@ -67,7 +67,7 @@
self.attr("disabled", "disabled");
$.get('{{ url("config_ajax", page_name="wan") }}', {action: "check-connection", ipv6_type: {% if ipv6_test %}true{% else %}false{% endif %}})
.done(function(response) {
$("#test-results").find(".result").removeClass("test-success").removeClass("test-fail").addClass("test-loading").text(Foris.messages.loading);
$("#test-results").find(".result").removeClass("test-success").removeClass("test-fail").addClass("test-loading").html('<i class="fas fa-spinner rotate"></i>');
$("#test-connection").hide();
Foris.watched_test = response["test_id"];
})
......
......@@ -31,8 +31,8 @@
</tr>
</thead>
<tbody>
<tr><td>{% trans %}DNS{% endtrans %}</td><td class="result" data-result-type="dns-conn-test">???</td></tr>
<tr><td>{% trans %}DNSSEC{% endtrans %}</td><td class="result" data-result-type="dnssec-conn-test">???</td></tr>
<tr><td>{% trans %}DNS{% endtrans %}</td><td class="result" data-result-type="dns-conn-test"><i class="fas fa-question-circle"></i></td></tr>
<tr><td>{% trans %}DNSSEC{% endtrans %}</td><td class="result" data-result-type="dnssec-conn-test"><i class="fas fa-question-circle"></i></td></tr>
</tbody>
</table>
<a href="#" id="test-connection" class="button" {% if foris_info.guide.current == active_config_page_key %}disabled{% endif %}>{% trans %}Test connection{% endtrans %}</a>
......@@ -43,9 +43,9 @@
var field = key + "-conn-test";
var resultBox = $("#test-results").find(".result[data-result-type=" + field + "]");
if (result) {
resultBox.removeClass("test-fail").removeClass("test-loading").addClass("test-success").text(Foris.messages.ok);
resultBox.removeClass("test-fail").removeClass("test-loading").addClass("test-success").html('<i class="fas fa-check-circle"></i>');
} else {
resultBox.removeClass("test-success").removeClass("test-loading").addClass("test-fail").text(Foris.messages.error);
resultBox.removeClass("test-success").removeClass("test-loading").addClass("test-fail").html('<i class="fas fa-exclamation-circle"></i>');
}
}
Foris.addWsHanlder("wan", (msg) => {
......@@ -84,7 +84,7 @@
self.attr("disabled", "disabled");
$.get('{{ url("config_ajax", page_name="dns") }}', {action: "check-connection"})
.done(function(response) {
$("#test-results").find(".result").removeClass("test-success").removeClass("test-fail").addClass("test-loading").text(Foris.messages.loading);
$("#test-results").find(".result").removeClass("test-success").removeClass("test-fail").addClass("test-loading").html('<i class="fas fa-spinner rotate"></i>');
$("#test-connection").hide();
Foris.watched_test = response["test_id"];
})
......
......@@ -22,7 +22,7 @@
<p>
{% trans %}The CA necessary for the remote administration. The time required for generating CA may differ. Please try to reload this page later.{% endtrans %}
</p>
<center><img src="{{ static("img/loader.gif") }}" alt="{% trans %}Loading...{% endtrans %}"></center>
<center><h1 class="fas fa-spinner rotate"></h1></center>
<br/>
<center><form><button name="reload-page" type="submit">{% trans %}Reload page{% endtrans %}</button></form></center>
......
......@@ -39,7 +39,6 @@
<div class="row">
<label for="field-time" class="expand-on-mobiles"><a href="#" class="button label-button" id="start-ntpdate-button">{% trans %}Update time{% endtrans %}</a></label>
<input id="field-time" name="time" class="grayed" value="{{ time_field.field.get_value() }}" disabled="1"></input>
<img src="{{ static("img/icon-loading.gif") }}" class="field-loading" id="ntp-loading">
</div>
{% else %}
<div class="row">
......@@ -97,7 +96,7 @@
$.get('{{ url("config_ajax", page_name="time") }}', {action: "ntpdate-trigger"})
.done(function(response) {
Foris.watched_ntpdate = response.id;
$("#ntp-loading").show();
$("#field-time").parent().append(' <i class="fas fa-spinner rotate" id="ntp-loading"></i>');
})
.fail(function(xhr) {
if (xhr.responseJSON && xhr.responseJSON.loggedOut && xhr.responseJSON.loginUrl) {
......@@ -138,7 +137,7 @@
Foris.update_time(new Date(msg.data.time));
}
Foris.watched_ntpdate = null;
$("#ntp-loading").hide();
$("#ntp-loading").remove();
$("#start-ntpdate-button").toggleClass("grayed");
break;
}
......
......@@ -142,7 +142,7 @@
let disable = $('#field-enabled_0');
$('#field-enabled_1').prop("checked", false);
disable.prop("checked", true);
disable.parent().append('<img src="' + Foris.scriptname + '/static/img/icon-loading.gif" class="field-loading" alt="' + Foris.messages.loading + '">');
disable.parent().append(' <i class="fas fa-spinner rotate"></i>');
Foris.updateForm(disable.closest("form"));
} else {
$('#field-enabled_0').prop("checked", false);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment