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

fix(share-popover): anchor popover to button via relative-positioned wrapper div

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-16 20:49:58 -04:00
parent daafae8af6
commit 81ea5909d2
2 changed files with 68 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/SharePopover.razor
+61 -55
View File
@@ -1,66 +1,72 @@
@namespace DeepDrftPublic.Client.Controls @namespace DeepDrftPublic.Client.Controls
<MudTooltip Text="Share"> @* Overlay is viewport-level; keep it outside the anchor wrapper so it doesn't
<MudIconButton Icon="@Icons.Material.Filled.Share" inherit relative stacking context and still covers the full page. *@
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" @* Wrap the trigger and popover in a relative-positioned container so MudPopover
Fixed="false" anchors to the button rather than the nearest positioned ancestor in the page. *@
AnchorOrigin="Origin.BottomRight" <div class="deepdrft-share-popover-anchor">
TransformOrigin="Origin.TopRight" <MudTooltip Text="Share">
Class="deepdrft-share-popover"> <MudIconButton Icon="@Icons.Material.Filled.Share"
<MudStack Spacing="2" Class="deepdrft-share-popover-body"> 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
+7
View File
@@ -358,6 +358,13 @@ h2, h3, h4, h5, h6,
font-family: var(--deepdrft-font-mono) !important; font-family: var(--deepdrft-font-mono) !important;
} }
/* Relative-positioned wrapper that gives MudPopover a local anchor so it opens
adjacent to the share button rather than relative to the page body. */
.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;