Unverified Commit db130037 by Christian Hoffmann Committed by GitHub

ui: clarify alert state toggle via checkbox icon (#7936)

The current meaning of the alert firing/pending/inactive
toggle seems ambiguouos as #7460 demonstrates.
This commit adds a checkbox icon to clarify the
active state of the button.
Signed-off-by: 's avatarChristian Hoffmann <mail@hoffmann-christian.info>
parent 68d65a8a
Pipeline #67083 passed with stages
in 6 minutes 47 seconds
......@@ -49,6 +49,11 @@ function init() {
$("#alertFilters :input").change(function() {
const target = $(this).attr("id");
var shouldHide = $(this).parent().hasClass("active");
var checkClass = shouldHide ? 'unchecked' : 'check';
$(this).parent().find('i.glyphicon')
.removeClass("glyphicon-check")
.removeClass("glyphicon-unchecked")
.addClass("glyphicon-" + checkClass);
if (target === "inactiveAlerts") {
localStorage.setItem("hideInactiveAlerts", shouldHide);
displayAlerts("alert-success", !shouldHide);
......
......@@ -8,13 +8,13 @@
<h1>Alerts</h1>
<div id="alertFilters" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> Inactive ({{ .Counts.Inactive }})
<input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Inactive ({{ .Counts.Inactive }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> Pending ({{ .Counts.Pending }})
<input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Pending ({{ .Counts.Pending }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> Firing ({{ .Counts.Firing }})
<input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Firing ({{ .Counts.Firing }})
</label>
</br>
</div>
......
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