mirror of
https://github.com/alexhopeoconnor/dnsmasq-webui.git
synced 2026-10-04 04:18:13 +10:00
EffectiveConfig: single expand/collapse toolbar button
Replace separate Expand all / Collapse all buttons with one toggle button. Icon and label switch based on AllSectionsExpanded (expand when any section collapsed, collapse when all expanded).
This commit is contained in:
@@ -11,8 +11,13 @@
|
|||||||
<div class="ec-container" @onclick="DeactivateActiveFieldIfClicked">
|
<div class="ec-container" @onclick="DeactivateActiveFieldIfClicked">
|
||||||
<OptionHelpController @ref="_optionHelpControllerRef" Visible="@_showOptionHelp" HelpKey="@_optionHelpKey" AnchorId="@_optionHelpAnchorId" Title="@_optionHelpTitle" OnCloseRequested="CloseOptionHelp" />
|
<OptionHelpController @ref="_optionHelpControllerRef" Visible="@_showOptionHelp" HelpKey="@_optionHelpKey" AnchorId="@_optionHelpAnchorId" Title="@_optionHelpTitle" OnCloseRequested="CloseOptionHelp" />
|
||||||
<ReadonlyPopoverController @ref="_readonlyPopoverControllerRef" Visible="@_showReadonlyPopover" AnchorId="@_readonlyPopoverAnchorId" Source="@_readonlyPopoverSource" OptionName="@(_readonlyPopoverOptionName ?? "")" Value="@_readonlyPopoverValue" ManagedFilePath="@(Status?.ManagedFilePath)" OnCloseRequested="CloseReadonlyPopover" />
|
<ReadonlyPopoverController @ref="_readonlyPopoverControllerRef" Visible="@_showReadonlyPopover" AnchorId="@_readonlyPopoverAnchorId" Source="@_readonlyPopoverSource" OptionName="@(_readonlyPopoverOptionName ?? "")" Value="@_readonlyPopoverValue" ManagedFilePath="@(Status?.ManagedFilePath)" OnCloseRequested="CloseReadonlyPopover" />
|
||||||
|
@{
|
||||||
|
var _sectionViews = EffectiveConfigViews.GetViewsForContext(Context);
|
||||||
|
var _allSectionsExpanded = _sectionViews.Count > 0 && _sectionViews.All(v => _openPanels.Contains(v.SectionId));
|
||||||
|
}
|
||||||
<EffectiveConfigToolbar ShowSearchBox="@ShowSearchBox" SearchTerm="@_searchTerm" SearchTermChanged="@OnSearchTermChanged"
|
<EffectiveConfigToolbar ShowSearchBox="@ShowSearchBox" SearchTerm="@_searchTerm" SearchTermChanged="@OnSearchTermChanged"
|
||||||
IsEditMode="@Session.IsEditMode" PendingChangesCount="@Session.PendingChanges.Count"
|
IsEditMode="@Session.IsEditMode" PendingChangesCount="@Session.PendingChanges.Count"
|
||||||
|
AllSectionsExpanded="@_allSectionsExpanded"
|
||||||
OnExpandAll="ExpandAll" OnCollapseAll="CollapseAll" OnEnterEditMode="EnterEditMode" OnExitEditModeWithConfirm="ExitEditModeWithConfirmAsync" OnOpenSaveModal="OpenSaveModal" />
|
OnExpandAll="ExpandAll" OnCollapseAll="CollapseAll" OnEnterEditMode="EnterEditMode" OnExitEditModeWithConfirm="ExitEditModeWithConfirmAsync" OnOpenSaveModal="OpenSaveModal" />
|
||||||
<CascadingValue Value="@Session">
|
<CascadingValue Value="@Session">
|
||||||
<CascadingValue Value="@_uiContext">
|
<CascadingValue Value="@_uiContext">
|
||||||
|
|||||||
@@ -7,11 +7,10 @@
|
|||||||
value="@SearchTerm" @oninput="OnSearchInput" />
|
value="@SearchTerm" @oninput="OnSearchInput" />
|
||||||
}
|
}
|
||||||
<div class="ec-toolbar-actions">
|
<div class="ec-toolbar-actions">
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnExpandAll" title="Expand all sections" aria-label="Expand all sections">
|
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnToggleExpandCollapse"
|
||||||
<i class="bi bi-arrows-expand" aria-hidden="true"></i>
|
title="@(AllSectionsExpanded ? "Collapse all sections" : "Expand all sections")"
|
||||||
</button>
|
aria-label="@(AllSectionsExpanded ? "Collapse all sections" : "Expand all sections")">
|
||||||
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="OnCollapseAll" title="Collapse all sections" aria-label="Collapse all sections">
|
<i class="bi @(AllSectionsExpanded ? "bi-arrows-collapse" : "bi-arrows-expand")" aria-hidden="true"></i>
|
||||||
<i class="bi bi-arrows-collapse" aria-hidden="true"></i>
|
|
||||||
</button>
|
</button>
|
||||||
@if (IsEditMode)
|
@if (IsEditMode)
|
||||||
{
|
{
|
||||||
@@ -41,8 +40,17 @@
|
|||||||
[Parameter] public EventCallback<string> SearchTermChanged { get; set; }
|
[Parameter] public EventCallback<string> SearchTermChanged { get; set; }
|
||||||
[Parameter] public bool IsEditMode { get; set; }
|
[Parameter] public bool IsEditMode { get; set; }
|
||||||
[Parameter] public int PendingChangesCount { get; set; }
|
[Parameter] public int PendingChangesCount { get; set; }
|
||||||
|
[Parameter] public bool AllSectionsExpanded { get; set; }
|
||||||
[Parameter] public EventCallback OnExpandAll { get; set; }
|
[Parameter] public EventCallback OnExpandAll { get; set; }
|
||||||
[Parameter] public EventCallback OnCollapseAll { get; set; }
|
[Parameter] public EventCallback OnCollapseAll { get; set; }
|
||||||
|
|
||||||
|
private async Task OnToggleExpandCollapse()
|
||||||
|
{
|
||||||
|
if (AllSectionsExpanded)
|
||||||
|
await OnCollapseAll.InvokeAsync();
|
||||||
|
else
|
||||||
|
await OnExpandAll.InvokeAsync();
|
||||||
|
}
|
||||||
[Parameter] public EventCallback OnEnterEditMode { get; set; }
|
[Parameter] public EventCallback OnEnterEditMode { get; set; }
|
||||||
[Parameter] public EventCallback OnExitEditModeWithConfirm { get; set; }
|
[Parameter] public EventCallback OnExitEditModeWithConfirm { get; set; }
|
||||||
[Parameter] public EventCallback OnOpenSaveModal { get; set; }
|
[Parameter] public EventCallback OnOpenSaveModal { get; set; }
|
||||||
|
|||||||
Reference in New Issue
Block a user