mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-13 04:45:19 +00:00
refac: model item tag styling
This commit is contained in:
Timothy Jaeryang Baek
parent
d8b80caff3
commit
496ea40d1d
4 changed files with 86 additions and 15 deletions
|
|
@ -14,6 +14,8 @@
|
|||
import ModelItemMenu from './ModelItemMenu.svelte';
|
||||
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import Tag from '$lib/components/icons/Tag.svelte';
|
||||
import Label from '$lib/components/icons/Label.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
|
|
@ -55,7 +57,7 @@
|
|||
}}
|
||||
>
|
||||
<div class="flex flex-col flex-1 gap-1.5">
|
||||
{#if (item?.model?.tags ?? []).length > 0}
|
||||
<!-- {#if (item?.model?.tags ?? []).length > 0}
|
||||
<div
|
||||
class="flex gap-0.5 self-center items-start h-full w-full translate-y-[0.5px] overflow-x-auto scrollbar-none"
|
||||
>
|
||||
|
|
@ -69,7 +71,7 @@
|
|||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if} -->
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center min-w-fit">
|
||||
|
|
@ -136,6 +138,26 @@
|
|||
|
||||
<!-- {JSON.stringify(item.info)} -->
|
||||
|
||||
{#if (item?.model?.tags ?? []).length > 0}
|
||||
{#key item.model.id}
|
||||
<Tooltip elementId="tags-{item.model.id}">
|
||||
<div slot="tooltip" id="tags-{item.model.id}">
|
||||
{#each item.model?.tags.sort((a, b) => a.name.localeCompare(b.name)) as tag}
|
||||
<Tooltip content={tag.name} className="flex-shrink-0">
|
||||
<div class=" text-xs font-semibold rounded-sm uppercase text-white">
|
||||
{tag.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="translate-y-[1px]">
|
||||
<Tag />
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/key}
|
||||
{/if}
|
||||
|
||||
{#if item.model?.direct}
|
||||
<Tooltip content={`${$i18n.t('Direct')}`}>
|
||||
<div class="translate-y-[1px]">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
|
||||
import tippy from 'tippy.js';
|
||||
|
||||
export let elementId = '';
|
||||
|
||||
export let placement = 'top';
|
||||
export let content = `I'm a tooltip!`;
|
||||
export let touch = true;
|
||||
|
|
@ -17,20 +19,30 @@
|
|||
let tooltipElement;
|
||||
let tooltipInstance;
|
||||
|
||||
$: if (tooltipElement && content) {
|
||||
if (tooltipInstance) {
|
||||
tooltipInstance.setContent(DOMPurify.sanitize(content));
|
||||
$: if (tooltipElement && (content || elementId)) {
|
||||
let tooltipContent = null;
|
||||
|
||||
if (elementId) {
|
||||
tooltipContent = document.getElementById(`${elementId}`);
|
||||
} else {
|
||||
tooltipInstance = tippy(tooltipElement, {
|
||||
content: DOMPurify.sanitize(content),
|
||||
placement: placement,
|
||||
allowHTML: allowHTML,
|
||||
touch: touch,
|
||||
...(theme !== '' ? { theme } : { theme: 'dark' }),
|
||||
arrow: false,
|
||||
offset: offset,
|
||||
...tippyOptions
|
||||
});
|
||||
tooltipContent = DOMPurify.sanitize(content);
|
||||
}
|
||||
|
||||
if (tooltipInstance) {
|
||||
tooltipInstance.setContent(tooltipContent);
|
||||
} else {
|
||||
if (content) {
|
||||
tooltipInstance = tippy(tooltipElement, {
|
||||
content: tooltipContent,
|
||||
placement: placement,
|
||||
allowHTML: allowHTML,
|
||||
touch: touch,
|
||||
...(theme !== '' ? { theme } : { theme: 'dark' }),
|
||||
arrow: false,
|
||||
offset: offset,
|
||||
...tippyOptions
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (tooltipInstance && content === '') {
|
||||
if (tooltipInstance) {
|
||||
|
|
@ -48,3 +60,5 @@
|
|||
<div bind:this={tooltipElement} class={className}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<slot name="tooltip"></slot>
|
||||
|
|
|
|||
16
src/lib/components/icons/Label.svelte
Normal file
16
src/lib/components/icons/Label.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
><path
|
||||
d="M3 17.4V6.6C3 6.26863 3.26863 6 3.6 6H16.6789C16.8795 6 17.0668 6.10026 17.1781 6.26718L20.7781 11.6672C20.9125 11.8687 20.9125 12.1313 20.7781 12.3328L17.1781 17.7328C17.0668 17.8997 16.8795 18 16.6789 18H3.6C3.26863 18 3 17.7314 3 17.4Z"
|
||||
></path></svg
|
||||
>
|
||||
19
src/lib/components/icons/Tag.svelte
Normal file
19
src/lib/components/icons/Tag.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.8';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<!-- Tag body with pointed end -->
|
||||
<path d="M4 12 L8 7 H21 V17 H8 L4 12 Z" stroke="currentColor" fill="none" />
|
||||
|
||||
<!-- Tag hole -->
|
||||
<circle cx="10" cy="12" r="0.75" fill="currentColor" stroke="currentColor" />
|
||||
</svg>
|
||||
Loading…
Reference in a new issue