ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 04:15:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-11-28 10:07:57 -05:00
parent 7b1895ec8a
commit 80fbb29ccc
2 changed files with 56 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/lib/components/channel/Channel.svelte
View file

@ -22,6 +22,7 @@
import EllipsisVertical from '../icons/EllipsisVertical.svelte'; import EllipsisVertical from '../icons/EllipsisVertical.svelte';
import Thread from './Thread.svelte'; import Thread from './Thread.svelte';
import i18n from '$lib/i18n'; import i18n from '$lib/i18n';
import Spinner from '../common/Spinner.svelte';
export let id = ''; export let id = '';
@ -289,8 +290,8 @@
}} }}
/> />
<div class="flex-1 overflow-y-auto"> {#if channel && messages !== null}
{#if channel} <div class="flex-1 overflow-y-auto">
<div <div
class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto" class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
id="messages-container" id="messages-container"
@ -330,27 +331,33 @@
/> />
{/key} {/key}
</div> </div>
{/if} </div>
</div>
<div class=" pb-[1rem] px-2.5"> <div class=" pb-[1rem] px-2.5">
<MessageInput <MessageInput
id="root" id="root"
bind:chatInputElement bind:chatInputElement
bind:replyToMessage bind:replyToMessage
{typingUsers} {typingUsers}
userSuggestions={true} userSuggestions={true}
channelSuggestions={true} channelSuggestions={true}
disabled={!channel?.write_access} disabled={!channel?.write_access}
placeholder={!channel?.write_access placeholder={!channel?.write_access
? $i18n.t('You do not have permission to send messages in this channel.') ? $i18n.t('You do not have permission to send messages in this channel.')
: $i18n.t('Type here...')} : $i18n.t('Type here...')}
{onChange} {onChange}
onSubmit={submitHandler} onSubmit={submitHandler}
{scrollToBottom} {scrollToBottom}
{scrollEnd} {scrollEnd}
/> />
</div> </div>
{:else}
<div class=" flex items-center justify-center h-full w-full">
<div class="m-auto">
<Spinner className="size-5" />
</div>
</div>
{/if}
</Pane> </Pane>
{#if !largeScreen} {#if !largeScreen}

52
src/lib/components/channel/Navbar.svelte
View file

@ -117,40 +117,42 @@
</div> </div>
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1"> <div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400 gap-1">
<Tooltip content={$i18n.t('Pinned Messages')}> {#if channel}
<button <Tooltip content={$i18n.t('Pinned Messages')}>
class=" flex cursor-pointer py-1.5 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label="Pinned Messages"
type="button"
on:click={() => {
showChannelPinnedMessagesModal = true;
}}
>
<div class=" flex items-center gap-0.5 m-auto self-center">
<Pin className=" size-4" strokeWidth="1.5" />
</div>
</button>
</Tooltip>
{#if channel?.user_count !== undefined}
<Tooltip content={$i18n.t('Users')}>
<button <button
class=" flex cursor-pointer py-1 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition" class=" flex cursor-pointer py-1.5 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label="User Count" aria-label="Pinned Messages"
type="button" type="button"
on:click={() => { on:click={() => {
showChannelInfoModal = true; showChannelPinnedMessagesModal = true;
}} }}
> >
<div class=" flex items-center gap-0.5 m-auto self-center"> <div class=" flex items-center gap-0.5 m-auto self-center">
<UserAlt className=" size-4" strokeWidth="1.5" /> <Pin className=" size-4" strokeWidth="1.5" />
<div class="text-sm">
{channel.user_count}
</div>
</div> </div>
</button> </button>
</Tooltip> </Tooltip>
{#if channel?.user_count !== undefined}
<Tooltip content={$i18n.t('Users')}>
<button
class=" flex cursor-pointer py-1 px-1.5 border dark:border-gray-850 border-gray-50 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
aria-label="User Count"
type="button"
on:click={() => {
showChannelInfoModal = true;
}}
>
<div class=" flex items-center gap-0.5 m-auto self-center">
<UserAlt className=" size-4" strokeWidth="1.5" />
<div class="text-sm">
{channel.user_count}
</div>
</div>
</button>
</Tooltip>
{/if}
{/if} {/if}
{#if $user !== undefined} {#if $user !== undefined}