thepraandClaude Opus 5.5
89cef25def
On a touch screen a nerd-stats tooltip showed only through the browser faking hover, unreliably, and couldn't be scrolled. Where the pointer can't hover (AppStatusService.CanHover), a tap on a NerdTip now opens its rows in a sheet from the bottom; the trigger is focusable, says it opens a dialog, and is at least 44px on touch. A closed tooltip takes no room any more (daisyUI only made it transparent, and one past a card's edge made a phone's feed scroll sideways), and on touch it never shows. The rows are a component of their own (NerdRows), at 12px on phones. A card's More menu has a Details entry on phones that gathers the post's, its author's, its place's or CDN's and its counts' rows in one sheet. A picture's tip doesn't open on a tap, the picture does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
67 lines
2.4 KiB
Plaintext
67 lines
2.4 KiB
Plaintext
@inherits LocalizableComponentBase
|
|
|
|
@* Nerd stats on hover or focus: a DTooltip whose content is the rows (NerdRows). A touch screen has no hover, so there
|
|
a tap opens the same rows in a sheet from the bottom (TapOpens; not for a trigger that is a link itself, the
|
|
pictures). OnOpen runs on the first hover, focus or tap, for stats read on demand (a post's provenance). *@
|
|
@if (TapOpens)
|
|
{
|
|
@* (on touch the trigger is at least 44px: daisyUI's tooltip draws its arrow with ::after, so padding-free min sizes) *@
|
|
<DTooltip Placement="Placement" Align="Align" class="@($"{Class} pointer-coarse:inline-flex pointer-coarse:items-center pointer-coarse:min-h-11 pointer-coarse:min-w-11")"
|
|
TipContent="Body" @onmouseenter="Open" @onfocusin="Open" @onclick="Tap"
|
|
tabindex="0" role="button" aria-haspopup="dialog" aria-label="@Heading">
|
|
@ChildContent
|
|
</DTooltip>
|
|
}
|
|
else
|
|
{
|
|
<DTooltip Placement="Placement" Align="Align" class="@Class" TipContent="Body" @onmouseenter="Open" @onfocusin="Open">
|
|
@ChildContent
|
|
</DTooltip>
|
|
}
|
|
@if (isSheetOpen)
|
|
{
|
|
<DModal Placement="DModalPlacement.ResponsiveBottom" IsOpen="true" IsOpenChanged="open => isSheetOpen = open" CloseText="@Localizer["Close"]" data-nerd-sheet>
|
|
<Heading>@Heading</Heading>
|
|
<ChildContent>
|
|
<NerdRows Rows="Rows" Pending="Pending" />
|
|
</ChildContent>
|
|
</DModal>
|
|
}
|
|
|
|
@code {
|
|
[Parameter] public RenderFragment ChildContent { get; set; }
|
|
[Parameter] public string Heading { get; set; }
|
|
[Parameter] public IEnumerable<NerdRow> Rows { get; set; } = [];
|
|
/// <summary>Shown under the rows while OnOpen's work runs.</summary>
|
|
[Parameter] public bool Pending { get; set; }
|
|
[Parameter] public EventCallback OnOpen { get; set; }
|
|
[Parameter] public DTooltipPlacement Placement { get; set; }
|
|
[Parameter] public DTooltipAlign Align { get; set; }
|
|
[Parameter] public string Class { get; set; }
|
|
/// <summary>A tap opens the rows in a sheet where the screen has no hover.</summary>
|
|
[Parameter] public bool TapOpens { get; set; } = true;
|
|
|
|
bool opened;
|
|
bool isSheetOpen;
|
|
|
|
async Task Tap()
|
|
{
|
|
if (CascadingState.Status.CanHover())
|
|
return;
|
|
isSheetOpen = true;
|
|
await Open();
|
|
}
|
|
|
|
protected override void OnInitialized() => IsLoading = false;
|
|
|
|
async Task Open()
|
|
{
|
|
if (opened || !OnOpen.HasDelegate)
|
|
return;
|
|
opened = true;
|
|
await OnOpen.InvokeAsync();
|
|
}
|
|
|
|
RenderFragment Body => @<NerdRows Heading="@Heading" Rows="Rows" Pending="Pending" />;
|
|
}
|