notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Make Menu work like EmojiPicker

Browse source
This commit is contained in:
pancakes 2024-11-12 15:30:26 +10:00 • committed by Laura Hausmann
parent b4dff783a2
commit 51ee9f8aeb
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
5 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
Iceshrimp.Frontend/Components/Menu.razor
View file

@ -1,16 +1,33 @@
@inject IJSRuntime Js
@if (_display)
{
<div class="menu">
<div class="menu" style="--top: @(_top)px; --left: @(_left)px">
@ChildContent
</div>
}
@code {
[Parameter] [EditorRequired] public required RenderFragment ChildContent { get; set; }
private bool _display;
[Parameter] [EditorRequired] public required RenderFragment ChildContent { get; set; }
private bool _display;
private float _top;
private float _left;
private IJSInProcessObjectReference _module = null!;
public void Toggle()
protected override async Task OnInitializedAsync()
{
_module = (IJSInProcessObjectReference)await Js.InvokeAsync<IJSObjectReference>("import",
"./Components/Menu.razor.js");
}
public void Toggle(ElementReference root)
{
if (!_display)
{
var pos = _module.Invoke<List<float>>("getPosition", root);
_left = pos[0];
_top = pos[1];
}
_display = !_display;
StateHasChanged();
}

10
Iceshrimp.Frontend/Components/Menu.razor.css
View file

@ -1,12 +1,14 @@
.menu {
--top: 0px;
--left: 0px;
background-color: var(--foreground-color);
position: absolute;
position: fixed;
padding: 0.5rem;
border-radius: 0.5rem;
border: var(--highlight-color) solid 0.1rem;
width: 15rem;
max-width: 20rem;
top: 2.5rem;
left: -5rem;
z-index: +1;
top: calc(var(--top) + 2.5rem);
left: calc(var(--left) - 5.5rem);
z-index: +2;
}

6
Iceshrimp.Frontend/Components/Menu.razor.js Normal file
View file

@ -0,0 +1,6 @@
export function getPosition(ref){
let rect = ref.getBoundingClientRect()
let x = rect.x + window.scrollX;
let y = rect.y + window.scrollY;
return [x, y]
}

10
Iceshrimp.Frontend/Components/Note/NoteFooter.razor
View file

@ -25,7 +25,7 @@
<span class="reply-count">@Replies</span>
}
</button>
<button class="btn @(RenotePossible ? "" : "disabled") positioned" @onclick="@(RenotePossible ? ToggleRenoteMenu : () => { })" @onclick:stopPropagation="true" aria-label="renote">
<button @ref="RenoteButton" class="btn @(RenotePossible ? "" : "disabled") positioned" @onclick="@(RenotePossible ? ToggleRenoteMenu : () => { })" @onclick:stopPropagation="true" aria-label="renote">
@if (RenotePossible)
{
<Icon Name="Icons.Repeat" Size="1.3em"/>
@ -74,7 +74,7 @@
<button class="btn positioned" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote">
<Icon Name="Icons.Quotes" Size="1.3em"/>
</button>
<button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
<button @ref="MenuButton" class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
<Icon Name="Icons.DotsThreeOutline" Size="1.3em"/>
<Menu @ref="ContextMenu">
@if (Note.NoteResponse.User.Id == Session.Current?.Id)
@ -115,11 +115,13 @@
[Parameter] public bool RenotePossible { get; set; }
private Menu ContextMenu { get; set; } = null!;
private Menu RenoteMenu { get; set; } = null!;
private ElementReference RenoteButton { get; set; }
private ElementReference EmojiButton { get; set; }
private ElementReference MenuButton { get; set; }
[CascadingParameter] Note Note { get; set; } = null!;
private void ToggleMenu() => ContextMenu.Toggle();
private void ToggleMenu() => ContextMenu.Toggle(MenuButton);
private void Delete() => _ = Note.Delete();
@ -139,7 +141,7 @@
private void ToggleRenoteMenu()
{
RenoteMenu.Toggle();
RenoteMenu.Toggle(RenoteButton);
}
private void Renote(NoteVisibility visibility)

10
Iceshrimp.Frontend/Pages/Settings/Filters.razor
View file

@ -90,7 +90,7 @@
</div>
<div class="action section">
<h3>@Loc["Filter Action"]</h3>
<button class="positioned button" @onclick="ToggleMenu">
<button @ref="MenuButton" class="positioned button" @onclick="ToggleMenu">
@if (FilterAction == FilterResponse.FilterAction.Hide)
{
<Icon Name="Icons.EyeClosed"/>
@ -128,7 +128,7 @@
</div>
}
</div>
<button class="positioned button" @onclick="ToggleFilterContextMenu">
<button @ref="ContextButton" class="positioned button" @onclick="ToggleFilterContextMenu">
<Icon Name="Icons.Plus"/>
<span>@Loc["Add Filter Context"]</span>
<Menu @ref="MenuFilterContexts">
@ -187,6 +187,8 @@
private Menu MenuFilterAction { get; set; } = null!;
private Menu MenuFilterContexts { get; set; } = null!;
private List<FilterResponse.FilterContext> FilterContexts { get; } = [];
private ElementReference MenuButton { get; set; }
private ElementReference ContextButton { get; set; }
// ReSharper disable once UnusedAutoPropertyAccessor.Local, Justification: this is still work in progress
private StateButton ButtonAddFilter { get; set; } = null!;
@ -276,12 +278,12 @@
private void ToggleMenu()
{
MenuFilterAction.Toggle();
MenuFilterAction.Toggle(MenuButton);
}
private void ToggleFilterContextMenu()
{
MenuFilterContexts.Toggle();
MenuFilterContexts.Toggle(ContextButton);
}
private void AddKeyword()