feat(adminui): T0-1 reusable ContextMenu component + demo page
Adds a reusable right-click / context menu Blazor component for the AdminUI: - ContextMenu.razor: right-click surface (browser menu suppressed) + optional ellipsis fallback trigger, both anchoring the menu at the pointer; keyboard nav (arrows/Enter/Esc), transparent backdrop outside-click close (no JS). - ContextMenu.razor.css: scoped styles on the shared theme tokens. - ContextMenuItem.cs: Label/OnClick/Icon/Disabled/IsSeparator model + Separator(). - Dev demo page at /dev/context-menu-demo. Claude-Session: https://claude.ai/code/session_01LVneM3eh1UtJxEisFXgmox
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
@page "/dev/context-menu-demo"
|
||||
@* Dev-only host page to live-verify the reusable ContextMenu component. *@
|
||||
@attribute [Authorize(Policy = AdminUiPolicies.AuthenticatedRead)]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>ContextMenu demo</PageTitle>
|
||||
|
||||
<h1>ContextMenu demo</h1>
|
||||
<p>Right-click the card below, or use the <strong>⋯</strong> button.</p>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:1rem; margin:1rem 0;">
|
||||
<ContextMenu Items="_items" ShowEllipsis="false">
|
||||
<div style="padding:2rem 3rem; border:1px dashed var(--bs-border-color); border-radius:.5rem; user-select:none;">
|
||||
Right-click me
|
||||
</div>
|
||||
</ContextMenu>
|
||||
|
||||
<ContextMenu Items="_items" ShowEllipsis="true" />
|
||||
</div>
|
||||
|
||||
<p>Last action: <strong>@_lastAction</strong></p>
|
||||
|
||||
@code {
|
||||
private string _lastAction = "(none)";
|
||||
|
||||
private IReadOnlyList<ContextMenuItem> _items => new List<ContextMenuItem>
|
||||
{
|
||||
new() { Label = "Edit", Icon = "✏️", OnClick = () => Set("Edit") },
|
||||
new() { Label = "Duplicate", Icon = "📄", OnClick = () => Set("Duplicate") },
|
||||
ContextMenuItem.Separator(),
|
||||
new() { Label = "Delete", Icon = "🗑️", Disabled = true, OnClick = () => Set("Delete") },
|
||||
};
|
||||
|
||||
private void Set(string action) => _lastAction = action;
|
||||
}
|
||||
Reference in New Issue
Block a user