OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: folder ui

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-16 21:05:03 -07:00
parent ede71740d2
commit a942c30ca8
13 changed files with 917 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/common/DragGhost.svelte
View File

@@ -24,7 +24,7 @@
bind:this={popupElement}
class="fixed top-0 left-0 w-screen h-[100dvh] z-50 touch-none pointer-events-none"
>
<div class=" absolute text-white z-[99999]" style="top: {y}px; left: {x}px;">
<div class=" absolute text-white z-[99999]" style="top: {y + 10}px; left: {x + 10}px;">
<slot></slot>
</div>
</div>

34
src/lib/components/common/Folder.svelte
View File

@@ -14,13 +14,15 @@
export let name = '';
export let collapsible = true;
export let className = '';
let folderElement;
let dragged = false;
let draggedOver = false;
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
draggedOver = true;
};
const onDrop = (e) => {
@@ -29,19 +31,23 @@
if (folderElement.contains(e.target)) {
console.log('Dropped on the Button');
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
try {
// get data from the drag event
const dataTransfer = e.dataTransfer.getData('text/plain');
const data = JSON.parse(dataTransfer);
console.log(data);
dispatch('drop', data);
} catch (error) {
console.error(error);
}
dragged = false;
draggedOver = false;
}
};
const onDragLeave = (e) => {
e.preventDefault();
dragged = false;
draggedOver = false;
};
onMount(() => {
@@ -57,10 +63,10 @@
});
</script>
<div bind:this={folderElement} class="relative">
{#if dragged}
<div bind:this={folderElement} class="relative {className}">
{#if draggedOver}
<div
class="absolute top-0 left-0 w-full h-full rounded-sm bg-gray-200 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
class="absolute top-0 left-0 w-full h-full rounded-sm bg-[hsla(258,88%,66%,0.1)] bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
></div>
{/if}
@@ -74,7 +80,7 @@
}}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="mx-2 w-full">
<div class="w-full">
<button
class="w-full py-1.5 px-2 rounded-md flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
>
@@ -92,7 +98,7 @@
</button>
</div>
<div slot="content" class=" pl-2">
<div slot="content" class="w-full">
<slot></slot>
</div>
</Collapsible>