OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-23 06:14:25 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-17 00:33:53 -07:00
parent 87d2738864
commit 86adcf33b0
3 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/common/Collapsible.svelte
View File

@ -16,13 +16,21 @@
export let title = null; export let title = null;
export let disabled = false; export let disabled = false;
export let hide = false;
</script> </script>
<div class={className}> <div class={className}>
{#if title !== null} {#if title !== null}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class={buttonClassName} on:pointerup={() => (open = !open)}> <div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div class=" w-fit font-medium transition flex items-center justify-between gap-2"> <div class=" w-fit font-medium transition flex items-center justify-between gap-2">
<div> <div>
{title} {title}
@ -40,7 +48,14 @@
{:else} {:else}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class={buttonClassName} on:pointerup={() => (open = !open)}> <div
class={buttonClassName}
on:pointerup={() => {
if (!disabled) {
open = !open;
}
}}
>
<div <div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition" class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
> >
@ -49,7 +64,7 @@
</div> </div>
{/if} {/if}
{#if open && !disabled} {#if open && !hide}
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}> <div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
<slot name="content" /> <slot name="content" />
</div> </div>

2
src/lib/components/layout/Sidebar.svelte
View File

@ -637,7 +637,7 @@
name={$i18n.t('Pinned')} name={$i18n.t('Pinned')}
> >
<div <div
class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s dark:border-gray-850" class="ml-3 pl-1 mt-[1px] flex flex-col overflow-y-auto scrollbar-hidden border-s border-gray-100 dark:border-gray-900"
> >
{#each $pinnedChats as chat, idx} {#each $pinnedChats as chat, idx}
<ChatItem <ChatItem

13
src/lib/components/layout/Sidebar/RecursiveFolder.svelte
View File

@ -281,7 +281,7 @@
bind:open bind:open
className="w-full" className="w-full"
buttonClassName="w-full" buttonClassName="w-full"
disabled={(folders[folderId]?.childrenIds ?? []).length === 0 && hide={(folders[folderId]?.childrenIds ?? []).length === 0 &&
(folders[folderId].items?.chats ?? []).length === 0} (folders[folderId].items?.chats ?? []).length === 0}
on:change={(e) => { on:change={(e) => {
dispatch('open', e.detail); dispatch('open', e.detail);
@ -334,8 +334,11 @@
{/if} {/if}
</div> </div>
<div <button
class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300 touch-auto pointer-events-auto" class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
on:pointerup={(e) => {
e.stopPropagation();
}}
> >
<FolderMenu <FolderMenu
on:rename={() => { on:rename={() => {
@ -345,11 +348,11 @@
deleteHandler(); deleteHandler();
}} }}
> >
<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg" on:click={(e) => {}}> <button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
<EllipsisHorizontal className="size-4" strokeWidth="2.5" /> <EllipsisHorizontal className="size-4" strokeWidth="2.5" />
</button> </button>
</FolderMenu> </FolderMenu>
</div> </button>
</button> </button>
</div> </div>