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

refac: banners

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-02 13:48:18 +04:00
parent bab7a65c2c
commit 7e273ebe86
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/admin/Settings/Interface.svelte
View file

@ -389,8 +389,8 @@
<hr class=" border-gray-100 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class="mb-2.5"> <div class="mb-2.5">
<div class="flex w-full justify-between"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm"> <div class=" self-center text-xs">
{$i18n.t('Banners')} {$i18n.t('Banners')}
</div> </div>
@ -432,7 +432,7 @@
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<div class=" space-y-3"> <div class=" space-y-3">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm"> <div class=" self-center text-xs">
{$i18n.t('Default Prompt Suggestions')} {$i18n.t('Default Prompt Suggestions')}
</div> </div>

21
src/lib/components/admin/Settings/Interface/Banners.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import Switch from '$lib/components/common/Switch.svelte'; import Switch from '$lib/components/common/Switch.svelte';
import Textarea from '$lib/components/common/Textarea.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte'; import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import XMark from '$lib/components/icons/XMark.svelte';
@ -24,6 +25,13 @@
}); });
}; };
const classNames: Record<string, string> = {
info: 'bg-blue-500/20 text-blue-700 dark:text-blue-200 ',
success: 'bg-green-500/20 text-green-700 dark:text-green-200',
warning: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200',
error: 'bg-red-500/20 text-red-700 dark:text-red-200'
};
$: if (banners) { $: if (banners) {
init(); init();
} }
@ -45,14 +53,14 @@
}; };
</script> </script>
<div class=" flex flex-col space-y-0.5" bind:this={bannerListElement}> <div class=" flex flex-col gap-3" bind:this={bannerListElement}>
{#each banners as banner, bannerIdx (banner.id)} {#each banners as banner, bannerIdx (banner.id)}
<div class=" flex justify-between items-center -ml-1" id="banner-item-{banner.id}"> <div class=" flex justify-between items-start -ml-1" id="banner-item-{banner.id}">
<EllipsisVertical className="size-4 cursor-move item-handle" /> <EllipsisVertical className="size-4 cursor-move item-handle" />
<div class="flex flex-row flex-1 gap-2 items-center"> <div class="flex flex-row flex-1 gap-2 items-start">
<select <select
class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden text-left pl-1 pr-2" class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden pl-1 pr-5"
bind:value={banner.type} bind:value={banner.type}
required required
> >
@ -65,10 +73,11 @@
<option value="success" class="text-gray-900">{$i18n.t('Success')}</option> <option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
</select> </select>
<input <Textarea
class="pr-5 py-1.5 text-xs w-full bg-transparent outline-hidden" className="mr-2 text-xs w-full bg-transparent outline-hidden resize-none"
placeholder={$i18n.t('Content')} placeholder={$i18n.t('Content')}
bind:value={banner.content} bind:value={banner.content}
maxSize={100}
/> />
<div class="relative -left-2"> <div class="relative -left-2">

14
src/lib/components/common/Textarea.svelte
View file

@ -5,6 +5,7 @@
export let placeholder = ''; export let placeholder = '';
export let rows = 1; export let rows = 1;
export let minSize = null; export let minSize = null;
export let maxSize = null;
export let required = false; export let required = false;
export let className = export let className =
'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden h-full'; 'w-full rounded-lg px-3.5 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden h-full';
@ -30,9 +31,16 @@
const resize = () => { const resize = () => {
if (textareaElement) { if (textareaElement) {
textareaElement.style.height = ''; textareaElement.style.height = '';
textareaElement.style.height = minSize
? `${Math.max(textareaElement.scrollHeight, minSize)}px` let height = textareaElement.scrollHeight;
: `${textareaElement.scrollHeight}px`; if (maxSize && height > maxSize) {
height = maxSize;
}
if (minSize && height < minSize) {
height = minSize;
}
textareaElement.style.height = `${height}px`;
} }
}; };
</script> </script>