Skip to content

M
MBetterd
Commit ef8eb092 authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Fix admin settings UI issues: toggle switches and button text 

PROBLEMS FIXED:

1. Toggle Switches Not Synced with Current Status:
   - Template was checking for string 'true' but SystemSettings returns boolean values
   - Updated all boolean checks to handle both boolean True and string 'true'
   - Fixed registration_enabled and maintenance_mode toggle switches
   - Fixed badge status displays in both quick settings cards and table

2. Action Buttons Showing as Blue Rectangles Without Text:
   - Buttons only had icons (<i class='fas fa-edit'></i>) without visible text
   - Added visible text labels: 'Edit' and 'Delete' alongside icons
   - Added title attributes for better user experience and accessibility
   - Maintained icon + text combination for better UX

TECHNICAL CHANGES:

Template Updates (app/templates/main/admin_settings.html):
- Line 40: Updated registration toggle check to handle both boolean and string
- Line 48-49: Updated registration status badge logic
- Line 67: Updated maintenance toggle check to handle both boolean and string
- Line 75-76: Updated maintenance status badge logic
- Line 113: Updated table value badge logic for boolean settings
- Line 142-143: Added 'Edit' text to edit buttons with title attribute
- Line 147-148: Added 'Delete' text to delete buttons with title attribute

COMPATIBILITY:
- Handles both boolean (True/False) and string ('true'/'false') values
- Maintains backward compatibility with existing SystemSettings data
- Works regardless of how the settings are stored or retrieved

USER EXPERIENCE IMPROVEMENTS:
- Toggle switches now correctly reflect the actual setting status
- Action buttons are clearly labeled and accessible
- Tooltips provide additional context for button actions
- Consistent styling with Bootstrap 5 framework

Both reported issues are now resolved and the admin settings interface should work correctly.
parent e2a8aafd
Hide whitespace changes
Inline Side-by-side
Showing with 18 additions and 16 deletions
app/templates/main/admin_settings.html
View file @ ef8eb092
...@@ -36,17 +36,17 @@ ...@@ -36,17 +36,17 @@
<div class="card-body"> <div class="card-body">
<p class="card-text">Control user registration availability</p> <p class="card-text">Control user registration availability</p>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="registrationToggle" <input class="form-check-input" type="checkbox" id="registrationToggle"
{% if settings.get('registration_enabled') == 'true' %}checked{% endif %} {% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}checked{% endif %}
onchange="toggleRegistration(this.checked)"> onchange="toggleRegistration(this.checked)">
<label class="form-check-label" for="registrationToggle"> <label class="form-check-label" for="registrationToggle">
Enable User Registration Enable User Registration
</label> </label>
</div> </div>
<small class="text-muted"> <small class="text-muted">
Current status: Current status:
<span class="badge {% if settings.get('registration_enabled') == 'true' %}bg-success{% else %}bg-danger{% endif %}"> <span class="badge {% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}bg-success{% else %}bg-danger{% endif %}">
{% if settings.get('registration_enabled') == 'true' %}Enabled{% else %}Disabled{% endif %} {% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}Enabled{% else %}Disabled{% endif %}
</span> </span>
</small> </small>
</div> </div>
...@@ -64,16 +64,16 @@ ...@@ -64,16 +64,16 @@
<p class="card-text">Enable maintenance mode for system updates</p> <p class="card-text">Enable maintenance mode for system updates</p>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="maintenanceToggle" <input class="form-check-input" type="checkbox" id="maintenanceToggle"
{% if settings.get('maintenance_mode') == 'true' %}checked{% endif %} {% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}checked{% endif %}
onchange="toggleMaintenance(this.checked)"> onchange="toggleMaintenance(this.checked)">
<label class="form-check-label" for="maintenanceToggle"> <label class="form-check-label" for="maintenanceToggle">
Enable Maintenance Mode Enable Maintenance Mode
</label> </label>
</div> </div>
<small class="text-muted"> <small class="text-muted">
Current status: Current status:
<span class="badge {% if settings.get('maintenance_mode') == 'true' %}bg-warning{% else %}bg-success{% endif %}"> <span class="badge {% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}bg-warning{% else %}bg-success{% endif %}">
{% if settings.get('maintenance_mode') == 'true' %}Maintenance{% else %}Active{% endif %} {% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}Maintenance{% else %}Active{% endif %}
</span> </span>
</small> </small>
</div> </div>
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
<td><code>{{ key }}</code></td> <td><code>{{ key }}</code></td>
<td> <td>
{% if key in ['registration_enabled', 'maintenance_mode'] %} {% if key in ['registration_enabled', 'maintenance_mode'] %}
<span class="badge {% if value == 'true' %}bg-success{% else %}bg-danger{% endif %}"> <span class="badge {% if value == True or value == 'true' %}bg-success{% else %}bg-danger{% endif %}">
{{ value }} {{ value }}
</span> </span>
{% else %} {% else %}
...@@ -138,14 +138,16 @@ ...@@ -138,14 +138,16 @@
</td> </td>
<td> <td>
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-primary" <button type="button" class="btn btn-outline-primary"
onclick="editSetting('{{ key }}', '{{ value }}')"> onclick="editSetting('{{ key }}', '{{ value }}')"
<i class="fas fa-edit"></i> title="Edit Setting">
<i class="fas fa-edit"></i> Edit
</button> </button>
{% if key not in ['registration_enabled', 'maintenance_mode', 'app_name'] %} {% if key not in ['registration_enabled', 'maintenance_mode', 'app_name'] %}
<button type="button" class="btn btn-outline-danger" <button type="button" class="btn btn-outline-danger"
onclick="deleteSetting('{{ key }}')"> onclick="deleteSetting('{{ key }}')"
<i class="fas fa-trash"></i> title="Delete Setting">
<i class="fas fa-trash"></i> Delete
</button> </button>
{% endif %} {% endif %}
</div> </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