starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-22 08:45:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add context button with "open in" links in title pages & modals

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-15 02:15:51 +03:00
parent 383d43d52c
commit 95dd5e070c
17 changed files with 220 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/ContextMenu/ContextMenu.svelte
View File

@@ -4,22 +4,26 @@
export let heading = '';
export let disabled = false;
export let position: 'absolute' | 'fixed' = 'fixed';
let anchored = position === 'absolute';
const id = Symbol();
export let id = Symbol();
let menu: HTMLDivElement;
let position = { x: 0, y: 0 };
let fixedPosition = { x: 0, y: 0 };
function close() {
contextMenu.hide();
}
function handleOpen(event: MouseEvent) {
if (disabled) return;
export function handleOpen(event: MouseEvent) {
if (disabled || (anchored && $contextMenu === id)) return; // Clicking button will close menu
position = { x: event.clientX, y: event.clientY };
fixedPosition = { x: event.clientX, y: event.clientY };
contextMenu.show(id);
event.preventDefault();
event.stopPropagation();
}
function handleClickOutside(event: MouseEvent) {
@@ -50,23 +54,25 @@
<!-- <svelte:body bind:this={body} /> -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:contextmenu|preventDefault={handleOpen}>
<div on:contextmenu|preventDefault={handleOpen} on:click={(e) => anchored && e.stopPropagation()}>
<slot />
</div>
{#if $contextMenu === id}
{#key position}
{#key fixedPosition}
<div
class="fixed z-50 px-1 py-1 bg-zinc-800 bg-opacity-50 rounded-lg backdrop-blur-xl flex flex-col"
style="left: {position.x}px; top: {position.y}px;"
class={`${position} z-50 my-2 px-1 py-1 bg-zinc-800 bg-opacity-50 rounded-lg backdrop-blur-xl flex flex-col w-max`}
style={position === 'fixed'
? `left: ${fixedPosition.x}px; top: ${fixedPosition.y}px;`
: 'left: 0px;'}
bind:this={menu}
in:fly|global={{ y: 5, duration: 100, delay: 100 }}
in:fly|global={{ y: 5, duration: 100, delay: anchored ? 0 : 100 }}
out:fly|global={{ y: 5, duration: 100 }}
>
<slot name="title">
{#if heading}
<h2
class="text-xs text-zinc-200 opacity-60 tracking-wide font-semibold px-3 py-1 line-clamp-1"
class="text-xs text-zinc-200 opacity-60 tracking-wide font-semibold px-3 py-1 line-clamp-1 text-left"
>
{heading}
</h2>