UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-05 05:10:46 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: pinned collapsible styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-14 21:15:36 -07:00
parent 2afc5f3339
commit 4c7651c113
2 changed files with 55 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,12 +7,13 @@
export let open = false; export let open = false;
export let className = ''; export let className = '';
export let buttonClassName = 'w-fit';
export let title = null; export let title = null;
</script> </script>
<div class={className}> <div class={className}>
{#if title !== null} {#if title !== null}
<button class="w-fit" on:click={() => (open = !open)}> <button class={buttonClassName} on:click={() => (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}
@ -28,7 +29,7 @@
</div> </div>
</button> </button>
{:else} {:else}
<button on:click={() => (open = !open)}> <button class={buttonClassName} on:click={() => (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"
> >

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

@ -52,6 +52,7 @@
import ChevronDown from '../icons/ChevronDown.svelte'; import ChevronDown from '../icons/ChevronDown.svelte';
import ChevronUp from '../icons/ChevronUp.svelte'; import ChevronUp from '../icons/ChevronUp.svelte';
import ChevronRight from '../icons/ChevronRight.svelte'; import ChevronRight from '../icons/ChevronRight.svelte';
import Collapsible from '../common/Collapsible.svelte';
const BREAKPOINT = 768; const BREAKPOINT = 768;
@ -507,57 +508,59 @@
{#if !search && $pinnedChats.length > 0} {#if !search && $pinnedChats.length > 0}
<div class=" pb-2 flex flex-col space-y-1"> <div class=" pb-2 flex flex-col space-y-1">
<div class=""> <div class="">
<div class="px-2"> <Collapsible className="w-full" buttonClassName="w-full">
<button <div class="px-2 w-full">
class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition" <button
on:click={() => { class="w-full py-1 px-1.5 rounded-md flex items-center gap-1 text-xs text-gray-500 dark:text-gray-500 font-medium hover:bg-gray-100 dark:hover:bg-gray-900 transition"
showPinnedChat = !showPinnedChat; on:click={() => {
localStorage.setItem('showPinnedChat', showPinnedChat); showPinnedChat = !showPinnedChat;
}} localStorage.setItem('showPinnedChat', showPinnedChat);
> }}
<div class="text-gray-300"> >
{#if showPinnedChat} <div class="text-gray-300">
<ChevronDown className=" size-3" strokeWidth="2.5" /> {#if showPinnedChat}
{:else} <ChevronDown className=" size-3" strokeWidth="2.5" />
<ChevronRight className=" text-gra size-3" strokeWidth="2.5" /> {:else}
{/if} <ChevronRight className=" text-gra size-3" strokeWidth="2.5" />
</div> {/if}
</div>
<div class=" translate-y-[0.5px]"> <div class=" translate-y-[0.5px]">
{$i18n.t('Pinned')} {$i18n.t('Pinned')}
</div> </div>
</button> </button>
</div>
{#if showPinnedChat}
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div> </div>
{/if}
<div slot="content">
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx}
<ChatItem
{chat}
{shiftKey}
selected={selectedChatId === chat.id}
on:select={() => {
selectedChatId = chat.id;
}}
on:unselect={() => {
selectedChatId = null;
}}
on:delete={(e) => {
if ((e?.detail ?? '') === 'shift') {
deleteChatHandler(chat.id);
} else {
deleteChat = chat;
showDeleteConfirm = true;
}
}}
on:tag={(e) => {
const { type, name } = e.detail;
tagEventHandler(type, name, chat.id);
}}
/>
{/each}
</div>
</div>
</Collapsible>
</div> </div>
</div> </div>
{/if} {/if}