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 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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "open-webui",
"version": "0.0.1",
"version": "v1.0.0-alpha.101",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "open-webui",
"version": "0.0.1",
"version": "v1.0.0-alpha.101",
"dependencies": {
"@sveltejs/adapter-node": "^1.3.1",
"async": "^3.2.5",
@ -38,6 +38,7 @@
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-confetti": "^1.3.2",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
@ -3174,6 +3175,15 @@
"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
}
},
"node_modules/svelte-confetti": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.3.2.tgz",
"integrity": "sha512-R+JwFTC7hIgWVA/OuXrkj384B7CMoceb0t9VacyW6dORTQg0pWojVBB8Bo3tM30cLEQE48Fekzqgx+XSzHESMA==",
"dev": true,
"peerDependencies": {
"svelte": "^4.0.0"
}
},
"node_modules/svelte-eslint-parser": {
"version": "0.33.1",
"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz",
@ -5852,6 +5862,13 @@
"typescript": "^5.0.3"
}
},
"svelte-confetti": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-1.3.2.tgz",
"integrity": "sha512-R+JwFTC7hIgWVA/OuXrkj384B7CMoceb0t9VacyW6dORTQg0pWojVBB8Bo3tM30cLEQE48Fekzqgx+XSzHESMA==",
"dev": true,
"requires": {}
},
"svelte-eslint-parser": {
"version": "0.33.1",
"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz",

3
package.json
View file

@ -32,6 +32,7 @@
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte-confetti": "^1.3.2",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
@ -52,4 +53,4 @@
"tippy.js": "^6.3.7",
"uuid": "^9.0.1"
}
}
}

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>