mirror of
https://github.com/open-webui/open-webui
synced 2025-06-23 02:16:52 +00:00
refac: artifacts styling
This commit is contained in:
Timothy Jaeryang Baek
parent
540c27c589
commit
af0d99b2a3
@ -184,35 +184,117 @@
|
||||
</script>
|
||||
|
||||
<div class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850">
|
||||
<div class="w-full h-full flex-1 relative">
|
||||
<div class="w-full h-full flex flex-col flex-1 relative">
|
||||
{#if contents.length > 0}
|
||||
<div
|
||||
class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
|
||||
>
|
||||
<button
|
||||
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
||||
on:click={() => {
|
||||
showArtifacts.set(false);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft className="size-3.5 text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
|
||||
<div class="flex-1 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
|
||||
<button
|
||||
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
|
||||
on:click={() => navigateContent('prev')}
|
||||
disabled={contents.length <= 1}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
class="size-3.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 19.5 8.25 12l7.5-7.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="text-xs self-center dark:text-gray-100 min-w-fit">
|
||||
{$i18n.t('Version {{selectedVersion}} of {{totalVersions}}', {
|
||||
selectedVersion: selectedContentIdx + 1,
|
||||
totalVersions: contents.length
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
|
||||
on:click={() => navigateContent('next')}
|
||||
disabled={contents.length <= 1}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
class="size-3.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m8.25 4.5 7.5 7.5-7.5 7.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
|
||||
on:click={() => {
|
||||
copyToClipboard(contents[selectedContentIdx].content);
|
||||
copied = true;
|
||||
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 2000);
|
||||
}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
|
||||
>
|
||||
|
||||
{#if contents[selectedContentIdx].type === 'iframe'}
|
||||
<Tooltip content={$i18n.t('Open in full screen')}>
|
||||
<button
|
||||
class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
|
||||
on:click={showFullScreen}
|
||||
>
|
||||
<ArrowsPointingOut className="size-3.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
||||
on:click={() => {
|
||||
dispatch('close');
|
||||
showControls.set(false);
|
||||
showArtifacts.set(false);
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3.5 text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if overlay}
|
||||
<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
|
||||
{/if}
|
||||
|
||||
<div class="absolute pointer-events-none z-50 w-full flex items-center justify-start p-4">
|
||||
<button
|
||||
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
||||
on:click={() => {
|
||||
showArtifacts.set(false);
|
||||
}}
|
||||
>
|
||||
<ArrowLeft className="size-3.5 text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4">
|
||||
<button
|
||||
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
||||
on:click={() => {
|
||||
dispatch('close');
|
||||
showControls.set(false);
|
||||
showArtifacts.set(false);
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3.5 text-gray-900 dark:text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 w-full h-full">
|
||||
<div class=" h-full flex flex-col">
|
||||
{#if contents.length > 0}
|
||||
@ -241,82 +323,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if contents.length > 0}
|
||||
<div class="flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
|
||||
<button
|
||||
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
|
||||
on:click={() => navigateContent('prev')}
|
||||
disabled={contents.length <= 1}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
class="size-3.5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15.75 19.5 8.25 12l7.5-7.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="text-xs self-center dark:text-gray-100 min-w-fit">
|
||||
{$i18n.t('Version {{selectedVersion}} of {{totalVersions}}', {
|
||||
selectedVersion: selectedContentIdx + 1,
|
||||
totalVersions: contents.length
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
|
||||
on:click={() => navigateContent('next')}
|
||||
disabled={contents.length <= 1}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
class="size-3.5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
|
||||
on:click={() => {
|
||||
copyToClipboard(contents[selectedContentIdx].content);
|
||||
copied = true;
|
||||
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 2000);
|
||||
}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
|
||||
>
|
||||
|
||||
{#if contents[selectedContentIdx].type === 'iframe'}
|
||||
<Tooltip content={$i18n.t('Open in full screen')}>
|
||||
<button
|
||||
class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
|
||||
on:click={showFullScreen}
|
||||
>
|
||||
<ArrowsPointingOut className="size-3.5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user