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

feat: Added library sorting and pagination, improved image loading and other small adjustments

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-31 02:45:36 +03:00
parent 203bce45b8
commit ca3911e062
24 changed files with 354 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,6 @@
export let disabled = false;
export let position: 'absolute' | 'fixed' = 'fixed';
let anchored = position === 'absolute';
export let bottom = false;
export let id = Symbol();
@@ -21,7 +20,10 @@
}
export function handleOpen(event: MouseEvent) {
if (disabled || (anchored && $contextMenu === id)) return; // Clicking button will close menu
if (disabled || (anchored && $contextMenu === id)) {
close();
return;
}
fixedPosition = { x: event.clientX, y: event.clientY };
contextMenu.show(id);
@@ -63,7 +65,15 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:contextmenu|preventDefault={handleOpen} on:click={(e) => anchored && e.stopPropagation()}>
<div
on:contextmenu|preventDefault={handleOpen}
on:click={(e) => {
if (anchored) {
e.stopPropagation();
handleOpen(e);
}
}}
>
<slot />
</div>
@@ -75,12 +85,11 @@
? `left: ${
fixedPosition.x - (fixedPosition.x > windowWidth / 2 ? menu?.clientWidth : 0)
}px; top: ${
fixedPosition.y -
(bottom ? (fixedPosition.y > windowHeight / 2 ? menu?.clientHeight : 0) : 0)
fixedPosition.y - (fixedPosition.y > windowHeight / 2 ? menu?.clientHeight : 0)
}px;`
: menu?.getBoundingClientRect()?.left > windowWidth / 2
? `right: 0;${bottom ? 'bottom: 40px;' : ''}`
: `left: 0;${bottom ? 'bottom: 40px;' : ''}`}
? `right: 0;${fixedPosition.y > windowHeight / 2 ? 'bottom: 100%;' : ''}`
: `left: 0;${fixedPosition.y > windowHeight / 2 ? 'bottom: 100%;' : ''}`}
bind:this={menu}
in:fly|global={{ y: 5, duration: 100, delay: anchored ? 0 : 100 }}
out:fly|global={{ y: 5, duration: 100 }}

17
src/lib/components/ContextMenu/ContextMenuButton.svelte
View File

@@ -1,25 +1,12 @@
<script lang="ts">
import ContextMenu from './ContextMenu.svelte';
import { contextMenu } from '../ContextMenu/ContextMenu';
import Button from '../Button.svelte';
import { DotsVertical } from 'radix-icons-svelte';
export let heading = '';
export let contextMenuId = Symbol();
function handleToggleVisibility() {
if ($contextMenu === contextMenuId) contextMenu.hide();
else contextMenu.show(contextMenuId);
}
</script>
<div class="relative">
<ContextMenu position="absolute" {heading} id={contextMenuId}>
<ContextMenu position="absolute" {heading}>
<slot name="menu" slot="menu" />
<Button slim on:click={handleToggleVisibility}>
<DotsVertical size={24} />
</Button>
<slot />
</ContextMenu>
</div>