ElixirForge/dnsmasq-webui
1
0
Fork 0
mirror of https://github.com/alexhopeoconnor/dnsmasq-webui.git synced 2026-10-03 22:12:00 +10:00
Code Releases 10 Activity

Effective config: use switch styling for flag and do-0x20-encode checkboxes

Browse Source 
- Add shared .ec-effective-switch styles in app.css for consistent switch look
- Wrap flag and do-0x20-encode checkboxes in form-check form-switch
- Add aria-label and title for accessibility
- Matches existing KeyOnlyOrValueDisplay (use-stale-cache, add-mac, etc.)
This commit is contained in:
alex
2026-03-09 00:29:45 +10:00
parent 9e42a4e2df
commit de8afed68c
3 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/Do0x20EncodeDisplay.razor
+10 -2
View File
@@ -3,11 +3,19 @@
@using DnsmasqWebUI.Models.Dnsmasq.EffectiveConfig
@inherits EffectiveConfigValueDisplayBase
@* do-0x20-encode / no-0x20-encode: tri-state. Checkbox shows Enabled vs not-Enabled; uncheck maps back to Default when that was the value at activation, else Disabled. *@
@* do-0x20-encode / no-0x20-encode: tri-state. Switch shows Enabled vs not-Enabled; uncheck maps back to Default when that was the value at activation, else Disabled. *@
@if (IsActiveEditor && Descriptor.GetSource()?.IsReadOnly != true)
{
var isOn = GetState() == ExplicitToggleState.Enabled;
<input type="checkbox" class="form-check-input" checked="@isOn" @onchange="OnCheckedChange" @onfocusout="OnCommitRequested" />
<div class="form-check form-switch ec-effective-switch">
<input type="checkbox"
class="form-check-input"
checked="@isOn"
aria-label="Enable @Descriptor.OptionName"
title="Set @Descriptor.OptionName"
@onchange="OnCheckedChange"
@onfocusout="OnCommitRequested" />
</div>
}
else
{
src/DnsmasqWebUI/Components/EffectiveConfig/CustomDisplays/FlagValueDisplay.razor
+10 -2
View File
@@ -2,11 +2,19 @@
@using DnsmasqWebUI.Models.Dnsmasq
@inherits EffectiveConfigValueDisplayBase
@* Reusable value-only display for boolean/flag options. When active editor: checkbox (unless readonly); View: "Enabled" / "Disabled". Pending value shown until save. *@
@* Reusable value-only display for boolean/flag options. When active editor: switch (unless readonly); View: "Enabled" / "Disabled". Pending value shown until save. *@
@if (IsActiveEditor && Descriptor.GetSource()?.IsReadOnly != true)
{
var isSet = GetEffectiveDisplayValue() is bool b && b;
<input type="checkbox" class="form-check-input" checked="@isSet" @onchange="OnCheckedChange" @onfocusout="OnCommitRequested" />
<div class="form-check form-switch ec-effective-switch">
<input type="checkbox"
class="form-check-input"
checked="@isSet"
aria-label="Enable @Descriptor.OptionName"
title="Set @Descriptor.OptionName"
@onchange="OnCheckedChange"
@onfocusout="OnCommitRequested" />
</div>
}
else
{
src/DnsmasqWebUI/wwwroot/app.css
+18
View File
@@ -79,6 +79,24 @@ a:hover, .btn-link:hover {
outline: 0;
}
/* Effective-config switch: shared styling for flag, do-0x20-encode, and key-only-or-value displays */
.ec-effective-switch {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-height: 1.25rem;
padding-left: 0;
margin-bottom: 0;
}
.ec-effective-switch .form-check-input {
float: none;
margin: 0;
cursor: pointer;
position: relative;
top: 2px;
}
.content {
padding-top: var(--app-spacing-lg);
padding-bottom: var(--app-spacing-2xl);