dohertj2/lmxopcua
1
0
Fork 0
Code Issues 32 Pull Requests Actions Packages Projects Releases Wiki Activity

style(adminui): group UNS page + modal buttons into btn-groups

Browse Source 
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
2026-08-10 16:31:55 -04:00
parent 4d549571cc
commit 30345c2941
9 changed files with 93 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
+12 -6
View File
@@ -171,8 +171,10 @@ else
placeholder="(uses raw name)" /> placeholder="(uses raw name)" />
</td> </td>
<td class="text-end text-nowrap"> <td class="text-end text-nowrap">
<button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => SaveOverride(r)">Save name</button> <div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => RemoveReference(r)">Remove</button> <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => SaveOverride(r)">Save name</button>
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => RemoveReference(r)">Remove</button>
</div>
</td> </td>
</tr> </tr>
} }
@@ -215,8 +217,10 @@ else
<td class="mono">@v.ScriptId</td> <td class="mono">@v.ScriptId</td>
<td>@(v.Enabled ? "Yes" : "No")</td> <td>@(v.Enabled ? "Yes" : "No")</td>
<td class="text-end"> <td class="text-end">
<button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => OpenEditVirtualTag(v.VirtualTagId)">Edit</button> <div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteVirtualTag(v.VirtualTagId)">Delete</button> <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditVirtualTag(v.VirtualTagId)">Edit</button>
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteVirtualTag(v.VirtualTagId)">Delete</button>
</div>
</td> </td>
</tr> </tr>
} }
@@ -261,8 +265,10 @@ else
<td class="mono">@a.PredicateScriptId</td> <td class="mono">@a.PredicateScriptId</td>
<td>@(a.Enabled ? "Yes" : "No")</td> <td>@(a.Enabled ? "Yes" : "No")</td>
<td class="text-end"> <td class="text-end">
<button type="button" class="btn btn-outline-secondary btn-sm me-1" @onclick="() => OpenEditAlarm(a.ScriptedAlarmId)">Edit</button> <div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteAlarm(a.ScriptedAlarmId)">Delete</button> <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditAlarm(a.ScriptedAlarmId)">Edit</button>
<button type="button" class="btn btn-outline-danger btn-sm" @onclick="() => DeleteAlarm(a.ScriptedAlarmId)">Delete</button>
</div>
</td> </td>
</tr> </tr>
} }
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/GlobalUns.razor
+11 -7
View File
@@ -20,8 +20,10 @@
<input type="text" class="form-control form-control-sm" style="max-width:240px" <input type="text" class="form-control form-control-sm" style="max-width:240px"
placeholder="Filter by name (substring)…" placeholder="Filter by name (substring)…"
@bind="_filter" @bind:event="oninput" /> @bind="_filter" @bind:event="oninput" />
<button type="button" class="btn btn-outline-secondary btn-sm" @onclick="ExpandAll">Expand all</button> <div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-secondary btn-sm" @onclick="CollapseAll">Collapse all</button> <button type="button" class="btn btn-outline-secondary btn-sm" @onclick="ExpandAll">Expand all</button>
<button type="button" class="btn btn-outline-secondary btn-sm" @onclick="CollapseAll">Collapse all</button>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenImportModal">Import equipment CSV</button> <button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenImportModal">Import equipment CSV</button>
</div> </div>
</div> </div>
@@ -90,11 +92,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CloseModals" disabled="@_confirmBusy">Cancel</button> <div class="btn-group" role="group">
<button type="button" class="btn btn-danger" @onclick="ConfirmDeleteAsync" disabled="@_confirmBusy"> <button type="button" class="btn btn-outline-secondary" @onclick="CloseModals" disabled="@_confirmBusy">Cancel</button>
@if (_confirmBusy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="button" class="btn btn-danger" @onclick="ConfirmDeleteAsync" disabled="@_confirmBusy">
Delete @if (_confirmBusy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> Delete
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AddReferenceModal.razor
+7 -5
View File
@@ -47,11 +47,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button> <div class="btn-group" role="group">
<button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)"> <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="button" class="btn btn-primary" @onclick="CommitAsync" disabled="@(_busy || _selected.Count == 0)">
Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s") @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> Add @_selected.Count reference@(_selected.Count == 1 ? "" : "s")
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/AreaModal.razor
+7 -5
View File
@@ -52,11 +52,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button> <div class="btn-group" role="group">
<button type="submit" class="btn btn-primary" disabled="@_busy"> <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="submit" class="btn btn-primary" disabled="@_busy">
@(IsNew ? "Create" : "Save changes") @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> @(IsNew ? "Create" : "Save changes")
</button>
</div>
</div> </div>
</EditForm> </EditForm>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ImportEquipmentModal.razor
+9 -7
View File
@@ -59,13 +59,15 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy"> <div class="btn-group" role="group">
@(_result is null ? "Cancel" : "Close") <button type="button" class="btn btn-outline-secondary" @onclick="CloseAsync" disabled="@_busy">
</button> @(_result is null ? "Cancel" : "Close")
<button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy"> </button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="button" class="btn btn-primary" @onclick="ImportAsync" disabled="@_busy">
Import @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> Import
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/LineModal.razor
+7 -5
View File
@@ -53,11 +53,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button> <div class="btn-group" role="group">
<button type="submit" class="btn btn-primary" disabled="@_busy"> <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="submit" class="btn btn-primary" disabled="@_busy">
@(IsNew ? "Create" : "Save changes") @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> @(IsNew ? "Create" : "Save changes")
</button>
</div>
</div> </div>
</EditForm> </EditForm>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/ScriptedAlarmModal.razor
+7 -5
View File
@@ -99,11 +99,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button> <div class="btn-group" role="group">
<button type="submit" class="btn btn-primary" disabled="@_busy"> <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@_busy">Cancel</button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="submit" class="btn btn-primary" disabled="@_busy">
@(IsNew ? "Create" : "Save changes") @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> @(IsNew ? "Create" : "Save changes")
</button>
</div>
</div> </div>
</EditForm> </EditForm>
</div> </div>
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/UnsTree.razor
+26 -19
View File
@@ -44,14 +44,14 @@
<div @key="node.Key" class="d-flex align-items-center gap-1 py-1" style="@indent"> <div @key="node.Key" class="d-flex align-items-center gap-1 py-1" style="@indent">
@if (hasExpander) @if (hasExpander)
{ {
<button type="button" class="btn btn-sm btn-link p-0" <button type="button" class="btn btn-sm btn-link p-0 tree-twist"
@onclick="@(() => OnToggleExpand.InvokeAsync(node))" style="width:18px"> @onclick="@(() => OnToggleExpand.InvokeAsync(node))">
@(childrenShown ? "▼" : "▶") @(childrenShown ? "▼" : "▶")
</button> </button>
} }
else else
{ {
<span style="width:18px"></span> <span class="tree-twist"></span>
} }
<span class="mono small">@node.DisplayName</span> <span class="mono small">@node.DisplayName</span>
@if (node.ChildCount > 0) @if (node.ChildCount > 0)
@@ -87,39 +87,46 @@
{ {
case UnsNodeKind.Enterprise: case UnsNodeKind.Enterprise:
// Deletes every cluster carrying this enterprise label (refuse-if-children). // 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> @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
break; break;
case UnsNodeKind.Cluster: 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> @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Area</button>
<a class="btn btn-sm btn-link p-0 ms-2" href="@($"/clusters/{node.ClusterId}")">⚙ settings</a> <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> @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
break; break;
case UnsNodeKind.Area: case UnsNodeKind.Area:
<button type="button" class="btn btn-sm btn-link p-0 ms-2" <div class="btn-group btn-group-sm ms-2" role="group">
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button> <button type="button" class="btn btn-sm btn-outline-secondary"
<button type="button" class="btn btn-sm btn-link p-0 ms-2" @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Line</button>
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary"
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger" @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button> <button type="button" class="btn btn-sm btn-outline-danger"
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
</div>
break; break;
case UnsNodeKind.Line: case UnsNodeKind.Line:
<button type="button" class="btn btn-sm btn-link p-0 ms-2" <div class="btn-group btn-group-sm ms-2" role="group">
@onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button> <button type="button" class="btn btn-sm btn-outline-secondary"
<button type="button" class="btn btn-sm btn-link p-0 ms-2" @onclick="@(() => OnAddChild.InvokeAsync(node))">+ Equipment</button>
@onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary"
<button type="button" class="btn btn-sm btn-link p-0 ms-2 text-danger" @onclick="@(() => OnEdit.InvokeAsync(node))">Edit</button>
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button> <button type="button" class="btn btn-sm btn-outline-danger"
@onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
</div>
break; break;
case UnsNodeKind.Equipment: 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> <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> @onclick="@(() => OnDelete.InvokeAsync(node))">Delete</button>
break; break;
} }
src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Shared/Uns/VirtualTagModal.razor
+7 -5
View File
@@ -154,11 +154,13 @@
} }
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button> <div class="btn-group" role="group">
<button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)"> <button type="button" class="btn btn-outline-secondary" @onclick="CancelAsync" disabled="@(_busy || _scriptSaving)">Cancel</button>
@if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> } <button type="submit" class="btn btn-primary" disabled="@(_busy || _scriptSaving)">
@(IsNew ? "Create" : "Save changes") @if (_busy) { <span class="spinner-border spinner-border-sm me-1"></span> }
</button> @(IsNew ? "Create" : "Save changes")
</button>
</div>
</div> </div>
</EditForm> </EditForm>
</div> </div>