admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 194 Wiki Activity

fix(ui): adjust context menu position for CSS transformed containers
All checks were successful
Build MIPS Binary / build (push) Successful in 1m59s
Details

Browse Source
This commit is contained in:
spinline
2026-02-21 01:22:31 +03:00
parent daa24dd7ec
commit ba7f1ffd91
2 changed files with 104 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/torrent/files.rs
View File

@@ -88,7 +88,6 @@ pub fn TorrentFilesTab(hash: String) -> impl IntoView {
#[component] #[component]
fn FileRow(file: TorrentFile, hash: String, refresh_action: Action<String, Vec<TorrentFile>>) -> impl IntoView { fn FileRow(file: TorrentFile, hash: String, refresh_action: Action<String, Vec<TorrentFile>>) -> impl IntoView {
let f_idx = file.index; let f_idx = file.index;
let context_id = format!("file-context-{}-{}", hash, f_idx);
let path_clone = file.path.clone(); let path_clone = file.path.clone();
let set_priority = Action::new(|req: &(String, u32, u8)| { let set_priority = Action::new(|req: &(String, u32, u8)| {

200
frontend/src/components/ui/context_menu.rs
View File

@@ -215,12 +215,20 @@ pub fn ContextMenuContent(
// Adjust if menu would go off right edge // Adjust if menu would go off right edge
if (x + menuRect.width > viewportWidth) {{ if (x + menuRect.width > viewportWidth) {{
left = x - menuRect.width; left = Math.max(0, x - menuRect.width);
}} }}
// Adjust if menu would go off bottom edge // Adjust if menu would go off bottom edge
if (y + menuRect.height > viewportHeight) {{ if (y + menuRect.height > viewportHeight) {{
top = y - menuRect.height; top = Math.max(0, y - menuRect.height);
}}
// Adjust for CSS transformed containing block
const offsetParent = menu.offsetParent;
if (offsetParent && offsetParent !== document.body && offsetParent !== document.documentElement) {{
const parentRect = offsetParent.getBoundingClientRect();
left -= parentRect.left;
top -= parentRect.top;
}} }}
menu.style.left = `${{left}}px`; menu.style.left = `${{left}}px`;
@@ -228,105 +236,105 @@ pub fn ContextMenuContent(
menu.style.transformOrigin = 'top left'; menu.style.transformOrigin = 'top left';
}}; }};
const openMenu = (x, y) => {{ const openMenu = (x, y) => {{
isOpen = true; isOpen = true;
// Close any other open context menus // Close any other open context menus
const allMenus = document.querySelectorAll('[data-target="target__context"]'); const allMenus = document.querySelectorAll('[data-target="target__context"]');
allMenus.forEach(m => {{ allMenus.forEach(m => {{
if (m !== menu && m.getAttribute('data-state') === 'open') {{ if (m !== menu && m.getAttribute('data-state') === 'open') {{
m.setAttribute('data-state', 'closed'); m.setAttribute('data-state', 'closed');
m.style.pointerEvents = 'none'; m.style.pointerEvents = 'none';
}}
}});
menu.setAttribute('data-state', 'open');
menu.style.visibility = 'hidden';
menu.style.pointerEvents = 'auto';
// Force reflow
menu.offsetHeight;
updatePosition(x, y);
menu.style.visibility = 'visible';
// Lock scroll
if (window.ScrollLock) {{
window.ScrollLock.lock();
}}
setTimeout(() => {{
document.addEventListener('click', handleClickOutside);
document.addEventListener('contextmenu', handleContextOutside);
}}, 0);
}};
const closeMenu = () => {{
isOpen = false;
menu.setAttribute('data-state', 'closed');
menu.style.pointerEvents = 'none';
document.removeEventListener('click', handleClickOutside);
document.removeEventListener('contextmenu', handleContextOutside);
// Dispatch custom event for Leptos to listen to
menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
if (window.ScrollLock) {{
window.ScrollLock.unlock(200);
}}
}};
const handleClickOutside = (e) => {{
if (!menu.contains(e.target)) {{
closeMenu();
}}
}};
const handleContextOutside = (e) => {{
if (!trigger.contains(e.target)) {{
closeMenu();
}}
}};
// Right-click on trigger
trigger.addEventListener('contextmenu', (e) => {{
e.preventDefault();
e.stopPropagation();
if (isOpen) {{
closeMenu();
}}
openMenu(e.clientX, e.clientY);
}});
// Close when action is clicked
const actions = menu.querySelectorAll('[data-context-close]');
actions.forEach(action => {{
action.addEventListener('click', () => {{
closeMenu();
}});
}});
// Handle ESC key
document.addEventListener('keydown', (e) => {{
if (e.key === 'Escape' && isOpen) {{
e.preventDefault();
closeMenu();
}} }}
}}); }});
menu.setAttribute('data-state', 'open');
menu.style.visibility = 'hidden';
menu.style.pointerEvents = 'auto';
// Force reflow
menu.offsetHeight;
updatePosition(x, y);
menu.style.visibility = 'visible';
// Lock scroll
if (window.ScrollLock) {{
window.ScrollLock.lock();
}}
setTimeout(() => {{
document.addEventListener('click', handleClickOutside);
document.addEventListener('contextmenu', handleContextOutside);
}}, 0);
}}; }};
const closeMenu = () => {{ if (document.readyState === 'loading') {{
isOpen = false; document.addEventListener('DOMContentLoaded', setupContextMenu);
menu.setAttribute('data-state', 'closed'); }} else {{
menu.style.pointerEvents = 'none'; setupContextMenu();
document.removeEventListener('click', handleClickOutside); }}
document.removeEventListener('contextmenu', handleContextOutside); }})();
"#,
// Dispatch custom event for Leptos to listen to target_id_for_script,
menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }})); target_id_for_script,
)}
if (window.ScrollLock) {{ </script>
window.ScrollLock.unlock(200);
}}
}};
const handleClickOutside = (e) => {{
if (!menu.contains(e.target)) {{
closeMenu();
}}
}};
const handleContextOutside = (e) => {{
if (!trigger.contains(e.target)) {{
closeMenu();
}}
}};
// Right-click on trigger
trigger.addEventListener('contextmenu', (e) => {{
e.preventDefault();
e.stopPropagation();
if (isOpen) {{
closeMenu();
}}
openMenu(e.clientX, e.clientY);
}});
// Close when action is clicked
const actions = menu.querySelectorAll('[data-context-close]');
actions.forEach(action => {{
action.addEventListener('click', () => {{
closeMenu();
}});
}});
// Handle ESC key
document.addEventListener('keydown', (e) => {{
if (e.key === 'Escape' && isOpen) {{
e.preventDefault();
closeMenu();
}}
}});
}};
if (document.readyState === 'loading') {{
document.addEventListener('DOMContentLoaded', setupContextMenu);
}} else {{
setupContextMenu();
}}
}})();
"#,
target_id_for_script,
target_id_for_script,
)}
</script>
} }
} }