UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-06 13:45:41 +00:00
Code Issues Actions 11 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"
> >

9
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,7 +508,8 @@
{#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">
<div class="px-2 w-full">
<button <button
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" 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"
on:click={() => { on:click={() => {
@ -529,7 +531,7 @@
</button> </button>
</div> </div>
{#if showPinnedChat} <div slot="content">
<div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden"> <div class="pl-2 mt-1 flex flex-col overflow-y-auto scrollbar-hidden">
{#each $pinnedChats as chat, idx} {#each $pinnedChats as chat, idx}
<ChatItem <ChatItem
@ -557,7 +559,8 @@
/> />
{/each} {/each}
</div> </div>
{/if} </div>
</Collapsible>
</div> </div>
</div> </div>
{/if} {/if}