From 03282da45c150261465dad87763e40736e3ece3e Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sun, 20 Oct 2024 00:36:43 -0700 Subject: [PATCH] refac: collection styling --- src/lib/components/common/Drawer.svelte | 16 +- src/lib/components/common/Modal.svelte | 10 +- .../workspace/Knowledge/Collection.svelte | 401 ++++++++++++------ .../Collection/AddContentMenu.svelte | 2 +- .../Collection/AddTextContentModal.svelte | 139 +++--- .../Knowledge/Collection/Files.svelte | 2 +- src/routes/(app)/workspace/+layout.svelte | 2 +- 7 files changed, 333 insertions(+), 239 deletions(-) diff --git a/src/lib/components/common/Drawer.svelte b/src/lib/components/common/Drawer.svelte index 7ee95c6d7..f28b624fb 100644 --- a/src/lib/components/common/Drawer.svelte +++ b/src/lib/components/common/Drawer.svelte @@ -6,23 +6,11 @@ const dispatch = createEventDispatcher(); export let show = false; - export let size = 'md'; + export let className = ''; let modalElement = null; let mounted = false; - const sizeToWidth = (size) => { - if (size === 'xs') { - return 'w-[16rem]'; - } else if (size === 'sm') { - return 'w-[30rem]'; - } else if (size === 'md') { - return 'w-[48rem]'; - } else { - return 'w-[56rem]'; - } - }; - const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape' && isTopModal()) { console.log('Escape'); @@ -76,7 +64,7 @@ }} >
{ e.stopPropagation(); }} diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte index cc8fc304b..9d77f9e2f 100644 --- a/src/lib/components/common/Modal.svelte +++ b/src/lib/components/common/Modal.svelte @@ -6,11 +6,15 @@ export let show = true; export let size = 'md'; + export let className = 'bg-gray-50 dark:bg-gray-900 rounded-2xl'; let modalElement = null; let mounted = false; const sizeToWidth = (size) => { + if (size === 'full') { + return 'w-full'; + } if (size === 'xs') { return 'w-[16rem]'; } else if (size === 'sm') { @@ -68,9 +72,9 @@ }} >
{ e.stopPropagation(); diff --git a/src/lib/components/workspace/Knowledge/Collection.svelte b/src/lib/components/workspace/Knowledge/Collection.svelte index 2144e09ff..f7442c126 100644 --- a/src/lib/components/workspace/Knowledge/Collection.svelte +++ b/src/lib/components/workspace/Knowledge/Collection.svelte @@ -2,6 +2,7 @@ import Fuse from 'fuse.js'; import { toast } from 'svelte-sonner'; import { v4 as uuidv4 } from 'uuid'; + import { PaneGroup, Pane, PaneResizer } from 'paneforge'; import { onMount, getContext, onDestroy, tick } from 'svelte'; const i18n = getContext('i18n'); @@ -34,8 +35,17 @@ import SyncConfirmDialog from '../../common/ConfirmDialog.svelte'; import RichTextInput from '$lib/components/common/RichTextInput.svelte'; + import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte'; + import Drawer from '$lib/components/common/Drawer.svelte'; + import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte'; + import MenuLines from '$lib/components/icons/MenuLines.svelte'; + let largeScreen = true; + let pane; + let showSidepanel = true; + let minSize = 0; + type Knowledge = { id: string; name: string; @@ -458,6 +468,30 @@ mediaQuery.addEventListener('change', handleMediaQuery); handleMediaQuery(mediaQuery); + // Select the container element you want to observe + const container = document.getElementById('collection-container'); + + // initialize the minSize based on the container width + minSize = !largeScreen ? 100 : Math.floor((300 / container.clientWidth) * 100); + + // Create a new ResizeObserver instance + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + const width = entry.contentRect.width; + // calculate the percentage of 300 + const percentage = (300 / width) * 100; + // set the minSize to the percentage, must be an integer + minSize = !largeScreen ? 100 : Math.floor(percentage); + } + }); + + // Start observing the container's size changes + resizeObserver.observe(container); + + if (pane) { + pane.expand(); + } + id = $page.params.id; const res = await getKnowledgeById(localStorage.token, id).catch((e) => { @@ -551,157 +585,248 @@ }} /> -
+
{#if id && knowledge}
-
-
-
-
-
-
- - - -
- { - selectedFileId = null; - }} - /> - -
- { - if (e.detail.type === 'directory') { - uploadDirectoryHandler(); - } else if (e.detail.type === 'text') { - showAddTextContentModal = true; - } else { - document.getElementById('files-input').click(); - } - }} - on:sync={(e) => { - showSyncConfirmModal = true; - }} - /> -
-
- -
-
- - {#if filteredItems.length > 0} -
- { - selectedFileId = selectedFileId === e.detail ? null : e.detail; - }} - on:delete={(e) => { - console.log(e.detail); - - selectedFileId = null; - deleteFileHandler(e.detail); - }} - /> -
- {:else} -
{$i18n.t('No content found')}
- {/if} -
-
-
- - {#if largeScreen} -
- {#if selectedFile} -
-
-
- {selectedFile?.meta?.name} -
- -
- -
-
- -
- {#key selectedFile.id} - - {/key} -
-
- {:else} -
-
-
-
-
-
- { - changeDebounceHandler(); - }} + + { + showSidepanel = true; + }} + onCollapse={() => { + showSidepanel = false; + }} + > +
+
+
+
+
+
+ + -
+
+ { + selectedFileId = null; + }} + /> -
- { - changeDebounceHandler(); +
+ { + if (e.detail.type === 'directory') { + uploadDirectoryHandler(); + } else if (e.detail.type === 'text') { + showAddTextContentModal = true; + } else { + document.getElementById('files-input').click(); + } + }} + on:sync={(e) => { + showSyncConfirmModal = true; }} />
-
-
- {$i18n.t('Select a file to view or drag and drop a file to upload')} + {#if filteredItems.length > 0} +
+ { + selectedFileId = selectedFileId === e.detail ? null : e.detail; + }} + on:delete={(e) => { + console.log(e.detail); + + selectedFileId = null; + deleteFileHandler(e.detail); + }} + /> +
+ {:else} +
{$i18n.t('No content found')}
+ {/if}
- {/if} -
- {/if} +
+ + + {#if largeScreen} + +
+ +
+ + +
+ {#if selectedFile} +
+
+ {#if !showSidepanel} +
+ +
+ {/if} + +
+ {selectedFile?.meta?.name} +
+ +
+ +
+
+ +
+ {#key selectedFile.id} + + {/key} +
+
+ {:else} +
+
+
+
+
+
+ { + changeDebounceHandler(); + }} + /> +
+
+ +
+ { + changeDebounceHandler(); + }} + /> +
+
+
+
+ +
+ {$i18n.t('Select a file to view or drag and drop a file to upload')} +
+
+ {/if} +
+ + {:else if !largeScreen && selectedFileId !== null} + { + selectedFileId = null; + }} + > +
+
+
+
+ +
+
+ {selectedFile?.meta?.name} +
+ +
+ +
+
+ +
+ {#key selectedFile.id} + + {/key} +
+
+
+ + {/if} +
{:else} diff --git a/src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte b/src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte index fa1f6d9c8..88326ed89 100644 --- a/src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte +++ b/src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte @@ -29,7 +29,7 @@ > -
-
-
-
{ - if (name.trim() === '' || content.trim() === '') { - toast.error($i18n.t('Please fill in all fields.')); - name = ''; - content = ''; - return; - } + +
+ +
+
+ { + if (name.trim() === '' || content.trim() === '') { + toast.error($i18n.t('Please fill in all fields.')); + name = name.trim(); + content = content.trim(); + return; + } - dispatch('submit', { - name, - content - }); - show = false; - name = ''; - content = ''; - }} - > -
-
-
-
{$i18n.t('Title')}
- -
- -
-
- -
-
{$i18n.t('Content')}
- -
-