[frontend/components] Fix Menu positioning inside Compose

This commit is contained in:
pancakes 2025-02-06 12:24:58 +10:00 committed by Laura Hausmann
parent 69435bfab3
commit 78078cac9b
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
5 changed files with 7 additions and 10 deletions

View file

@ -1,10 +1,8 @@
.compose {
background-color: var(--background-color);
border-radius: 1rem;
margin: 0 auto;
top: 10%;
margin: 10% auto 0;
padding: 1rem;
position: relative;
max-width: 45rem;
color: var(--font-color);
}
@ -172,10 +170,10 @@
}
.compose {
top: 0;
width: 100%;
max-width: unset;
min-height: 100vh;
margin-top: 0;
padding-top: 0;
border-radius: 0;
}

View file

@ -80,7 +80,7 @@
private ElementReference Attachment { get; set; }
private Menu AttachmentMenu { get; set; } = null!;
private void Select() => AttachmentMenu.Toggle(Attachment);
private void Select() => AttachmentMenu.Toggle(Attachment, false);
private void Open() => Js.InvokeVoidAsync("open", File.Url, "_blank");

View file

@ -3,7 +3,6 @@
flex-direction: column;
align-items: center;
gap: 0.25rem;
position: relative;
padding: 0.5rem 0.5rem 0;
border-radius: 0.5rem;
cursor: pointer;

View file

@ -20,11 +20,11 @@
"./Components/Menu.razor.js");
}
public void Toggle(ElementReference root)
public void Toggle(ElementReference root, bool scrollY = true)
{
if (!_display)
{
var pos = _module.Invoke<List<float>>("getPosition", root);
var pos = _module.Invoke<List<float>>("getPosition", root, scrollY);
_left = pos[0];
_top = pos[1];
}

View file

@ -1,6 +1,6 @@
export function getPosition(ref){
export function getPosition(ref, scrollY){
let rect = ref.getBoundingClientRect()
let x = rect.right - (rect.width / 2) + window.scrollX;
let y = rect.bottom + window.scrollY;
let y = scrollY ? rect.bottom + window.scrollY : rect.bottom;
return [x, y]
}