ui: Drop use of badge-* utility classes for newer replacements

- Keep the badge-{severity} classes as they are meant for convenience of mapping
severity to style.

- Match bootstrap colors to maintain consistency and contrast.

Tests:

- Visually confirm that all the changes effective.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2024-11-13 12:57:13 -08:00 committed by Veiko Aasa
parent 65165f4b42
commit 4d71e80b1e
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
13 changed files with 43 additions and 51 deletions

View File

@ -18,13 +18,13 @@
<td>{{ result.translated_description }}</td>
<td class="diagnostics-result">
{% if result.result == 'passed' %}
<span class="badge badge-success">{% trans result.result %}</span>
<span class="badge text-bg-success">{% trans result.result %}</span>
{% elif result.result == 'failed' %}
<span class="badge badge-danger">{% trans result.result %}</span>
<span class="badge text-bg-danger">{% trans result.result %}</span>
{% elif result.result == 'error' or result.result == 'warning' %}
<span class="badge badge-warning">{% trans result.result %}</span>
<span class="badge text-bg-warning">{% trans result.result %}</span>
{% elif result.result == 'skipped' %}
<span class="badge badge-secondary">{% trans result.result %}</span>
<span class="badge text-bg-secondary">{% trans result.result %}</span>
{% else %}
{{ result.result }}
{% endif %}

View File

@ -28,11 +28,11 @@
<td>{{ domain.timestamp|timesince }}</td>
<td>
{% if domain.result %}
<span class="badge badge-success">
<span class="badge text-bg-success">
{% trans "Success" %}
</span>
{% else %}
<span class="badge badge-warning">
<span class="badge text-bg-warning">
{% trans "Failed" %}
</span>
{% endif %}

View File

@ -36,10 +36,10 @@
</td>
<td class="app-status">
{% if component.is_enabled %}
<span class='badge badge-success'>
<span class='badge text-bg-success'>
{% trans "Enabled" %}</span>
{% else %}
<span class='badge badge-warning'>
<span class='badge text-bg-warning'>
{% trans "Disabled" %}</span>
{% endif %}
</td>
@ -54,16 +54,16 @@
</td>
<td class="service-status">
{% if port.name in internal_enabled_ports and port.name in external_enabled_ports %}
<span class='badge badge-success'>
<span class='badge text-bg-success'>
{% trans "Permitted" %}</span>
{% elif port.name in internal_enabled_ports %}
<span class='badge badge-warning'>
<span class='badge text-bg-warning'>
{% trans "Permitted (internal only)" %}</span>
{% elif port.name in external_enabled_ports %}
<span class='badge badge-warning'>
<span class='badge text-bg-warning'>
{% trans "Permitted (external only)" %}</span>
{% else %}
<span class='badge badge-danger'>
<span class='badge text-bg-danger'>
{% trans "Blocked" %}</span>
{% endif %}
</td>

View File

@ -33,13 +33,13 @@
<td>{{ domain }}</td>
<td>
{% if domain_status.certificate_available and domain_status.validity == "valid" %}
<span class="badge badge-success">
<span class="badge text-bg-success">
{% blocktrans trimmed with expiry_date=domain_status.expiry_date %}
Valid, expires on {{ expiry_date }}
{% endblocktrans %}
</span>
{% elif domain_status.certificate_available and not domain_status.validity == "valid" %}
<span class="badge badge-warning">
<span class="badge text-bg-warning">
{% if "revoked" in domain_status.validity %}
{% blocktrans trimmed %}
Revoked
@ -59,16 +59,16 @@
{% endif %}
</span>
{% else %}
<span class="badge badge-warning">
<span class="badge text-bg-warning">
{% trans "No certificate" %}
</span>
{% endif %}
</td>
<td>
{% if domain_status.web_enabled %}
<span class="badge badge-success">{% trans "Enabled" %}</span>
<span class="badge text-bg-success">{% trans "Enabled" %}</span>
{% else %}
<span class="badge badge-warning">{% trans "Disabled" %}</span>
<span class="badge text-bg-warning">{% trans "Disabled" %}</span>
{% endif %}
</td>
<td class="operations">

View File

@ -62,7 +62,7 @@
{% if connection.primary %}
<div class="list-group-item">
<span class="primary">{% trans "Primary connection" %}</span>
<span class="badge badge-success secondary">
<span class="badge text-bg-success secondary">
{% trans "yes" %}
</span>
</div>
@ -113,10 +113,10 @@
<div class="list-group-item">
<span class="primary">{% trans "Link state" %}</span>
{% if device.ethernet.carrier %}
<span class='badge badge-success secondary'>
<span class='badge text-bg-success secondary'>
{% trans "cable is connected" %}</span>
{% else %}
<span class='badge badge-warning secondary'>
<span class='badge text-bg-warning secondary'>
{% trans "please check cable" %}</span>
{% endif %}
</div>
@ -152,7 +152,7 @@
{% if access_point.strength %}
<div class="list-group-item">
<span class="primary">{% trans "Signal strength" %}</span>
<span class="badge badge-secondary secondary">
<span class="badge text-bg-secondary secondary">
{{ access_point.strength }}%
</span>
</div>
@ -273,7 +273,7 @@
<div class="list-group list-group-two-column">
<div class="list-group-item">
<span class="primary">{% trans "Firewall zone" %}</span>
<span class="badge badge-success secondary">
<span class="badge text-bg-success secondary">
{{ connection.zone_string }}
</span>
</div>
@ -293,7 +293,7 @@
<div class="list-group list-group-two-column">
<div class="list-group-item">
<span class="primary">{% trans "Firewall zone" %}</span>
<span class="badge badge-warning secondary">
<span class="badge text-bg-warning secondary">
{{ connection.zone_string }}
</span>
</div>
@ -312,7 +312,7 @@
<div class="list-group list-group-two-column">
<div class="list-group-item">
<span class="primary">{% trans "Firewall zone" %}</span>
<span class="badge badge-danger secondary">
<span class="badge text-bg-danger secondary">
{% trans "External" %}
</span>
</div>

View File

@ -27,11 +27,11 @@
<tr>
<td class="connection-status-cell">
{% if connection.is_active %}
<span class="badge badge-success connection-status-label">
<span class="badge text-bg-success connection-status-label">
{% trans "Active" %}
</span>
{% else %}
<span class="badge badge-warning connection-status-label">
<span class="badge text-bg-warning connection-status-label">
{% trans "Inactive" %}
</span>
{% endif %}

View File

@ -43,7 +43,7 @@
</a>
</span>
<span class="badge badge-secondary secondary">
<span class="badge text-bg-secondary secondary">
{{ access_point.strength }}%
</span>
</div>

View File

@ -36,12 +36,12 @@
<td>
{{ snapshot.number }}
{% if snapshot.is_default %}
<span class="badge badge-secondary">
<span class="badge text-bg-secondary">
{% trans "will be used at next boot" %}
</span>
{% endif %}
{% if snapshot.is_active %}
<span class="badge badge-success">
<span class="badge text-bg-success">
{% trans "in use" %}
</span>
{% endif %}

View File

@ -54,8 +54,8 @@
{% if app_info.tags %}
<div>
{% for tag in app_info.tags %}
<a href="{% url 'apps' %}?tag={{ tag|urlencode }}"
class="badge badge-pill badge-light">
<a href="{% url 'apps' %}?tag={{ tag|urlencode }}"
class="badge rounded-pill text-bg-light">
{% trans tag %}
</a>
{% endfor %}

View File

@ -15,7 +15,7 @@
<div class="tag-input">
<div id="selected-tags">
{% for tag in tags %}
<span class="badge badge-light badge-pill tag-badge"
<span class="badge rounded-pill text-bg-light tag-badge"
data-tag="{{ tag }}">
{% trans tag %}
<button class="btn btn-sm btn-light remove-tag">

View File

@ -13,7 +13,14 @@
role="button" aria-expanded="false" aria-haspopup="true"
data-target=".notifications">
<span class="fa fa-bell nav-icon"></span>
<span class="badge badge-pill badge-{{ notifications_max_severity }}">
<span class="badge rounded-pill
{% if notifications_max_severity == 'exception' or notifications_max_severity == 'error' %}
text-bg-danger
{% elif notifications_max_severity == 'warning' %}
text-bg-warning
{% else %}
text-bg-info
{% endif %}">
{{ notifications|length }}
</span>
</a>

View File

@ -628,7 +628,7 @@ def networks_set_firewall_zone(browser, zone):
device = browser.find_by_xpath(
'//span[contains(@class, "connection-type-label") and '
'contains(., "Ethernet") ]/../..'
'//span[contains(@class, "badge-success") '
'//span[contains(@class, "text-bg-success") '
'and contains(@class, "connection-status-label")]/following::a').first
network_id = device['href'].split('/')[-3]
device.click()
@ -794,12 +794,12 @@ class BaseAppTests:
session_browser.find_by_id('id_extra_actions_button').click()
submit(session_browser, form_class='form-diagnostics-button')
warning_results = session_browser.find_by_css('.badge-warning')
warning_results = session_browser.find_by_css('.text-bg-warning')
if warning_results:
warnings.warn(
f'Diagnostics warnings for {self.app_name}: {warning_results}')
failure_results = session_browser.find_by_css('.badge-danger')
failure_results = session_browser.find_by_css('.text-bg-danger')
assert not failure_results
@pytest.mark.backups

View File

@ -79,7 +79,6 @@ h1, h2, h3, h4, h5, h6 {
}
/* Warning colors from bootstrap 3 */
.badge-warning,
.bg-warning,
.btn-warning {
background-color: #f0ad4e !important;
@ -926,20 +925,6 @@ img.notification-icon {
.notifications-dropdown .badge {
padding: 0.125rem 0.3125rem;
margin-left: -0.75rem;
color: #fff;
}
/* TODO: match with or use bootstrap 4 colors */
.badge-exception, .badge-error {
background-color: var(--error-color);
}
.badge-warning {
background-color: var(--warning-color);
}
.badge-info, .badge-debug {
background-color: var(--info-color);
}
.notification-exception, .notification-error {