daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Merge fix-sharepopover-anchor into dev (anchor release SharePopover under the share button via inline-block wrapper)

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-17 04:11:30 -04:00
parent bfdbf7568f 4eba3b0bb3
commit ba1a1cd8ec
2 changed files with 72 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/SharePopover.razor
+63 -55
View File
@@ -1,66 +1,74 @@
@namespace DeepDrftPublic.Client.Controls @namespace DeepDrftPublic.Client.Controls
<MudTooltip Text="Share"> @* Overlay is viewport-level/fixed regardless of DOM nesting; placing it outside
<MudIconButton Icon="@Icons.Material.Filled.Share" the wrapper is harmless/cleaner but doesn't change its behavior. *@
Size="Size.Large"
Color="Color.Secondary"
Disabled="@(!RendererInfo.IsInteractive)"
OnClick="@Toggle"
aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
</MudTooltip>
<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" /> <MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
<MudPopover Open="@_open" @* display:inline-block is the load-bearing property: it shrink-wraps this div
Fixed="false" to the button, so MudPopover's portal reads the button's tight bounding rect
AnchorOrigin="Origin.BottomRight" (via parentNode.getBoundingClientRect()) rather than a page-wide flow box.
TransformOrigin="Origin.TopRight" position:relative is incidental. *@
Class="deepdrft-share-popover"> <div class="deepdrft-share-popover-anchor">
<MudStack Spacing="2" Class="deepdrft-share-popover-body"> <MudTooltip Text="Share">
<MudIconButton Icon="@Icons.Material.Filled.Share"
Size="Size.Large"
Color="Color.Secondary"
Disabled="@(!RendererInfo.IsInteractive)"
OnClick="@Toggle"
aria-label="@(IsReleaseMode ? "Share this release" : "Share this track")" />
</MudTooltip>
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween"> <MudPopover Open="@_open"
<MudButton StartIcon="@Icons.Material.Filled.Link" Fixed="false"
Variant="Variant.Text" AnchorOrigin="Origin.BottomRight"
Color="Color.Primary" TransformOrigin="Origin.TopRight"
OnClick="@CopyLink"> Class="deepdrft-share-popover">
Copy link <MudStack Spacing="2" Class="deepdrft-share-popover-body">
</MudButton>
@if (_linkCopied) <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<MudButton StartIcon="@Icons.Material.Filled.Link"
Variant="Variant.Text"
Color="Color.Primary"
OnClick="@CopyLink">
Copy link
</MudButton>
@if (_linkCopied)
{
<MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
}
</MudStack>
@* Embed is a single-track affordance only; a release page is not a single-track embed (§3b.3). *@
@if (!IsReleaseMode)
{ {
<MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText> <MudDivider />
}
</MudStack>
@* Embed is a single-track affordance only; a release page is not a single-track embed (§3b.3). *@ <MudCheckBox @bind-Value="Embed" Color="Color.Primary" Label="Embed player" Dense="true" />
@if (!IsReleaseMode)
{
<MudDivider />
<MudCheckBox @bind-Value="Embed" Color="Color.Primary" Label="Embed player" Dense="true" /> @if (_embed)
{
@if (_embed) <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
{ <MudTextField Value="@EmbedSnippet"
<MudStack Row AlignItems="AlignItems.Center" Spacing="1"> T="string"
<MudTextField Value="@EmbedSnippet" ReadOnly="true"
T="string" Variant="Variant.Outlined"
ReadOnly="true" Lines="3"
Variant="Variant.Outlined" Margin="Margin.Dense"
Lines="3" Class="deepdrft-share-embed-field" />
Margin="Margin.Dense" <MudStack AlignItems="AlignItems.Center" Spacing="0">
Class="deepdrft-share-embed-field" /> <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
<MudStack AlignItems="AlignItems.Center" Spacing="0"> Color="Color.Primary"
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy" OnClick="@CopyEmbed"
Color="Color.Primary" aria-label="Copy embed snippet" />
OnClick="@CopyEmbed" @if (_embedCopied)
aria-label="Copy embed snippet" /> {
@if (_embedCopied) <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
{ }
<MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText> </MudStack>
}
</MudStack> </MudStack>
</MudStack> }
} }
}
</MudStack> </MudStack>
</MudPopover> </MudPopover>
</div>
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+9
View File
@@ -358,6 +358,15 @@ h2, h3, h4, h5, h6,
font-family: var(--deepdrft-font-mono) !important; font-family: var(--deepdrft-font-mono) !important;
} }
/* display:inline-block is load-bearing: it shrink-wraps the wrapper to the
button so MudPopover's portal reads the button's tight bounding rect
(parentNode.getBoundingClientRect()) instead of a page-wide flow box.
position:relative is incidental — do not drop inline-block. */
.deepdrft-share-popover-anchor {
position: relative;
display: inline-block;
}
.deepdrft-share-popover-body { .deepdrft-share-popover-body {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
min-width: 280px; min-width: 280px;