[frontend/components] Fix note z-indexes

This commit is contained in:
pancakes 2025-03-21 15:21:21 +10:00
parent bde4e5aada
commit b9b19b44af
No known key found for this signature in database
3 changed files with 57 additions and 48 deletions

View file

@ -45,7 +45,7 @@
}
.truncate-btn {
z-index: 5;
z-index: 1;
width: 100%;
margin-top: 0.5em;
background-color: var(--background-color);

View file

@ -86,54 +86,54 @@
</button>
<button @ref="MenuButton" class="btn" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
<Icon Name="Icons.DotsThreeOutline" Size="1.3em"/>
<Menu @ref="ContextMenu">
@if (Note.User.Id != Session.Current?.Id)
{
<MenuElement Icon="Icons.Tooth" OnSelect="Bite">
<Text>@Loc["Bite"]</Text>
</MenuElement>
}
@if (Note.User.Host != null)
{
<MenuElement Icon="Icons.ArrowsClockwise" OnSelect="RefetchNote">
<Text>@Loc["Refetch"]</Text>
</MenuElement>
}
<MenuElement Icon="Icons.SpeakerX" OnSelect="Mute">
<Text>@Loc["Mute thread"]</Text>
</MenuElement>
<hr class="rule"/>
<MenuElement Icon="Icons.ArrowSquareOut" OnSelect="OpenOriginal">
<Text>@Loc["Open original page"]</Text>
</MenuElement>
<MenuElement Icon="Icons.Share" OnSelect="CopyLink">
<Text>@Loc["Copy link"]</Text>
</MenuElement>
@if (Note.User.Host != null)
{
<MenuElement Icon="Icons.ShareNetwork" OnSelect="CopyLinkRemote">
<Text>@Loc["Copy link (remote)"]</Text>
</MenuElement>
}
@if (!string.IsNullOrWhiteSpace(Note.Text))
{
<MenuElement Icon="Icons.Copy" OnSelect="CopyContents">
<Text>@Loc["Copy contents"]</Text>
</MenuElement>
}
@if (Note.User.Id == Session.Current?.Id)
{
<hr class="rule"/>
<MenuElement Icon="Icons.Eraser" OnSelect="Redraft" Danger>
<Text>@Loc["Delete & redraft"]</Text>
</MenuElement>
<MenuElement Icon="Icons.Trash" OnSelect="Delete" Danger>
<Text>@Loc["Delete"]</Text>
</MenuElement>
}
<ClosingBackdrop OnClose="ContextMenu.Close"></ClosingBackdrop>
</Menu>
</button>
<Menu @ref="ContextMenu">
@if (Note.User.Id != Session.Current?.Id)
{
<MenuElement Icon="Icons.Tooth" OnSelect="Bite">
<Text>@Loc["Bite"]</Text>
</MenuElement>
}
@if (Note.User.Host != null)
{
<MenuElement Icon="Icons.ArrowsClockwise" OnSelect="RefetchNote">
<Text>@Loc["Refetch"]</Text>
</MenuElement>
}
<MenuElement Icon="Icons.SpeakerX" OnSelect="Mute">
<Text>@Loc["Mute thread"]</Text>
</MenuElement>
<hr class="rule"/>
<MenuElement Icon="Icons.ArrowSquareOut" OnSelect="OpenOriginal">
<Text>@Loc["Open original page"]</Text>
</MenuElement>
<MenuElement Icon="Icons.Share" OnSelect="CopyLink">
<Text>@Loc["Copy link"]</Text>
</MenuElement>
@if (Note.User.Host != null)
{
<MenuElement Icon="Icons.ShareNetwork" OnSelect="CopyLinkRemote">
<Text>@Loc["Copy link (remote)"]</Text>
</MenuElement>
}
@if (!string.IsNullOrWhiteSpace(Note.Text))
{
<MenuElement Icon="Icons.Copy" OnSelect="CopyContents">
<Text>@Loc["Copy contents"]</Text>
</MenuElement>
}
@if (Note.User.Id == Session.Current?.Id)
{
<hr class="rule"/>
<MenuElement Icon="Icons.Eraser" OnSelect="Redraft" Danger>
<Text>@Loc["Delete & redraft"]</Text>
</MenuElement>
<MenuElement Icon="Icons.Trash" OnSelect="Delete" Danger>
<Text>@Loc["Delete"]</Text>
</MenuElement>
}
<ClosingBackdrop OnClose="ContextMenu.Close"></ClosingBackdrop>
</Menu>
</div>
@code {

View file

@ -10,11 +10,19 @@
margin-bottom: 0.5em;
}
::deep {
.reactions .reaction {
position: relative;
z-index: +1;
}
}
.indent {
padding-left: 0.75em;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
min-width: 2.5em;
@ -23,6 +31,7 @@
background-color: var(--foreground-color);
border: 0.1rem solid var(--foreground-color);
width: fit-content;
z-index: +1;
}
.btn:hover {