This commit is contained in:
Timothy Jaeryang Baek 2024-12-21 18:25:16 -07:00
parent 27d2fbbe33
commit 7083a61ddb
2 changed files with 31 additions and 5 deletions

View File

@ -15,7 +15,11 @@
export let id = ''; export let id = '';
export let name = ''; export let name = '';
export let collapsible = true; export let collapsible = true;
export let onCreateFolder: null | Function = null;
export let onAddLabel: string = '';
export let onAdd: null | Function = null;
export let dragAndDrop = true;
export let className = ''; export let className = '';
@ -87,12 +91,18 @@
}; };
onMount(() => { onMount(() => {
if (!dragAndDrop) {
return;
}
folderElement.addEventListener('dragover', onDragOver); folderElement.addEventListener('dragover', onDragOver);
folderElement.addEventListener('drop', onDrop); folderElement.addEventListener('drop', onDrop);
folderElement.addEventListener('dragleave', onDragLeave); folderElement.addEventListener('dragleave', onDragLeave);
}); });
onDestroy(() => { onDestroy(() => {
if (!dragAndDrop) {
return;
}
folderElement.addEventListener('dragover', onDragOver); folderElement.addEventListener('dragover', onDragOver);
folderElement.removeEventListener('drop', onDrop); folderElement.removeEventListener('drop', onDrop);
folderElement.removeEventListener('dragleave', onDragLeave); folderElement.removeEventListener('dragleave', onDragLeave);
@ -133,15 +143,15 @@
</div> </div>
</button> </button>
{#if onCreateFolder} {#if onAdd}
<button <button
class="absolute z-10 right-2 self-center flex items-center" class="absolute z-10 right-2 self-center flex items-center"
on:pointerup={(e) => { on:pointerup={(e) => {
e.stopPropagation(); e.stopPropagation();
onCreateFolder(); onAdd();
}} }}
> >
<Tooltip content={$i18n.t('New folder')}> <Tooltip content={onAddLabel}>
<button <button
class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
on:click={(e) => {}} on:click={(e) => {}}

View File

@ -67,6 +67,8 @@
let folders = {}; let folders = {};
const createChannel = async () => {};
const initFolders = async () => { const initFolders = async () => {
const folderList = await getFolders(localStorage.token).catch((error) => { const folderList = await getFolders(localStorage.token).catch((error) => {
toast.error(error); toast.error(error);
@ -521,6 +523,19 @@
/> />
</div> </div>
<div class="relative flex flex-col overflow-y-auto">
<Folder
collapsible={!search}
className="px-2 mt-0.5"
name={$i18n.t('Channels')}
dragAndDrop={false}
onAdd={createChannel}
onAddLabel={$i18n.t('New Channel')}
>
channels
</Folder>
</div>
<div <div
class="relative flex flex-col flex-1 overflow-y-auto {$temporaryChatEnabled class="relative flex flex-col flex-1 overflow-y-auto {$temporaryChatEnabled
? 'opacity-20' ? 'opacity-20'
@ -530,7 +545,8 @@
collapsible={!search} collapsible={!search}
className="px-2 mt-0.5" className="px-2 mt-0.5"
name={$i18n.t('Chats')} name={$i18n.t('Chats')}
onCreateFolder={createFolder} onAdd={createFolder}
onAddLabel={$i18n.t('New Folder')}
on:import={(e) => { on:import={(e) => {
importChatHandler(e.detail); importChatHandler(e.detail);
}} }}