style(adminui): group UNS page + modal buttons into btn-groups
Task 3 of the AdminUI UI sweep. Behavior-preserving markup only: - GlobalUns: Expand/Collapse pair -> btn-group btn-group-sm (Import stays separate); delete-confirm footer Cancel+Delete -> btn-group. - Area/Line/ScriptedAlarm/VirtualTag/AddReference/ImportEquipment modal footers: Cancel + primary -> btn-group. - EquipmentPage: the three text-end action cells (Save name/Remove, Edit/Delete x2) -> btn-group btn-group-sm, me-1 spacers dropped. - UnsTree: per-node actions become real small buttons (outline-secondary, outline-danger for destructive) and adjacent runs of >=2 group into btn-group btn-group-sm; the genuine navigation links (cluster settings, equipment Open) stay links. Expander/leaf placeholder adopt .tree-twist in place of the inline width:18px.
This commit is contained in:
Joseph Doherty
@@ -47,11 +47,13 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s")
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,11 +52,13 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
+9
-7
@@ -59,13 +59,15 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy">
|
||||
@(_result is null ? "Cancel" : "Close")
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
Import
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy">
|
||||
@(_result is null ? "Cancel" : "Close")
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,11 +53,13 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
@@ -99,11 +99,13 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@_busy">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
@@ -44,14 +44,14 @@
|
||||
<div @key="node.Key" class="d-flex align-items-center gap-1 py-1" style="@indent">
|
||||
@if (hasExpander)
|
||||
{
|
||||
<button type="button" class="btn btn-sm btn-link p-0"
|
||||
@onclick="@(() => OnToggleExpand.InvokeAsync(node))" style="width:18px">
|
||||
<button type="button" class="btn btn-sm btn-link p-0 tree-twist"
|
||||
@onclick="@(() => OnToggleExpand.InvokeAsync(node))">
|
||||
@(childrenShown ? "▼" : "▶")
|
||||
</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span style="width:18px"></span>
|
||||
<span class="tree-twist"></span>
|
||||
}
|
||||
<span class="mono small">@node.DisplayName</span>
|
||||
@if (node.ChildCount > 0)
|
||||
@@ -87,39 +87,46 @@
|
||||
{
|
||||
case UnsNodeKind.Enterprise:
|
||||
// Deletes every cluster carrying this enterprise label (refuse-if-children).
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
|
||||
<button type="button" class="btn btn-sm btn-outline-danger ms-2"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
break;
|
||||
|
||||
case UnsNodeKind.Cluster:
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2"
|
||||
// "⚙ settings" is genuine navigation and stays a link, so the two actions on
|
||||
// either side of it are not adjacent and each carries its own margin.
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary ms-2"
|
||||
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Area</button>
|
||||
<a class="btn btn-sm btn-link p-0 ms-2" href="@($"/clusters/{node.ClusterId}")">⚙ settings</a>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
|
||||
<button type="button" class="btn btn-sm btn-outline-danger ms-2"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
break;
|
||||
|
||||
case UnsNodeKind.Area:
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2"
|
||||
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2"
|
||||
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
<div class="btn-group btn-group-sm ms-2" role="group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary"
|
||||
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary"
|
||||
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
</div>
|
||||
break;
|
||||
|
||||
case UnsNodeKind.Line:
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2"
|
||||
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2"
|
||||
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
<div class="btn-group btn-group-sm ms-2" role="group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary"
|
||||
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary"
|
||||
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
</div>
|
||||
break;
|
||||
|
||||
case UnsNodeKind.Equipment:
|
||||
// "Open" is genuine navigation to the equipment detail page and stays a link.
|
||||
<a class="btn btn-sm btn-link p-0 ms-2" href="@($"/uns/equipment/{node.EntityId}")">Open</a>
|
||||
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger"
|
||||
<button type="button" class="btn btn-sm btn-outline-danger ms-2"
|
||||
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -154,11 +154,13 @@
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)">
|
||||
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
|
||||
@(IsNew ? "Create" : "Save changes")
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user