tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

added animations

Browse source
This commit is contained in:
Jannik Streidl 2024-02-22 15:20:48 +01:00
parent e1e1cb9fd4
commit 4bb5b3db0a
4 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/lib/components/chat/WhatsChangedModal.svelte
View file

@ -1,10 +1,9 @@
<script lang="ts">
import Modal from '../common/Modal.svelte';
import { Confetti } from 'svelte-confetti';
import { WEBUI_NAME, WEB_UI_VERSION, RELEASE_NOTES } from '$lib/constants';
import { config, showWhatsChanged } from '$lib/stores';
export let show = false;
function toggleVisibility() {
showWhatsChanged.update((value) => !value);
}
@ -13,7 +12,10 @@
<Modal>
<div class="px-5 py-4 dark:text-gray-300">
<div class="flex justify-between items-start">
<div class="text-xl font-bold">{WEBUI_NAME}</div>
<div class="text-xl font-bold">
{WEBUI_NAME}
<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
</div>
<button class="self-center" on:click={toggleVisibility}>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -67,6 +69,3 @@
</div>
</div>
</Modal>
<style>
</style>

23
src/lib/components/common/Modal.svelte
View file

@ -34,14 +34,14 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
transition:fade={{ duration: 200 }}
>
<div
class="m-auto rounded-xl max-w-full {sizeToWidth(
class=" modal-content m-auto rounded-xl max-w-full {sizeToWidth(
size
)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
transition:fade={{ delay: 100, duration: 200 }}
transition:fade={{ duration: 200 }}
on:click={(e) => {
e.stopPropagation();
}}
@ -50,3 +50,20 @@
</div>
</div>
{/if}
<style>
.modal-content {
animation: scaleUp 0.1s ease-out forwards;
}
@keyframes scaleUp {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>