hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve modal animations

Browse source
This commit is contained in:
hippoz 2022-09-20 23:59:17 +03:00
parent b1c64d3f58
commit 4b0ddb9e23
No known key found for this signature in database
GPG key ID: 7C52899193467641
9 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/animations.js
View file

@ -1,13 +1,20 @@
import { fade, fly } from "svelte/transition";
import { fade, fly, scale } from "svelte/transition";
import { cubicInOut } from "svelte/easing";
import { getItem } from "./storage";
export function maybeModalFade(node) {
return maybeFade(node, { duration: 160, easing: cubicInOut });
return maybeFade(node, { duration: 175, easing: cubicInOut });
}
export function maybeModalFly(node) {
return maybeFly(node, { duration: 210, easing: cubicInOut, y: 15 });
export function maybeModalScale(node) {
return maybeScale(node, { duration: 175, easing: cubicInOut, start: 0.93 });
}
export function maybeScale(...e) {
if (getItem("ui:doAnimations"))
return scale(...e);
else
return scale(e[0], { duration: 0 });
}
export function maybeFly(...e) {

4
frontend/src/components/overlays/CreateAccount.svelte
View file

@ -2,7 +2,7 @@
import { overlayStore, OverlayType } from "../../stores";
import request from "../../request";
import { apiRoute } from "../../storage";
import { maybeModalFly } from "../../animations";
import { maybeModalScale } from "../../animations";
let username = "";
let password = "";
@ -53,7 +53,7 @@
</style>
<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal" transition:maybeModalScale on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal-header">
<span class="h4">Create an Account</span>
</div>

4
frontend/src/components/overlays/CreateChannel.svelte
View file

@ -2,7 +2,7 @@
import { overlayStore } from "../../stores";
import request from "../../request";
import { apiRoute } from "../../storage";
import { maybeModalFade, maybeModalFly } from "../../animations";
import { maybeModalFade, maybeModalScale } from "../../animations";
let channelName = "";
let createButtonEnabled = true;
@ -33,7 +33,7 @@
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation>
<div class="modal" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Create Channel</span>
</div>

4
frontend/src/components/overlays/EditChannel.svelte
View file

@ -1,5 +1,5 @@
<script>
import { maybeModalFade, maybeModalFly } from "../../animations";
import { maybeModalFade, maybeModalScale } from "../../animations";
import { overlayStore } from "../../stores";
import request from "../../request";
import { apiRoute } from "../../storage";
@ -47,7 +47,7 @@
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation>
<div class="modal" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Edit Channel</span>
</div>

4
frontend/src/components/overlays/EditMessage.svelte
View file

@ -2,7 +2,7 @@
import { overlayStore } from "../../stores";
import request from "../../request";
import { apiRoute } from "../../storage";
import { maybeModalFade, maybeModalFly } from "../../animations";
import { maybeModalFade, maybeModalScale } from "../../animations";
export let message;
@ -47,7 +47,7 @@
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation>
<div class="modal" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Edit Message</span>
</div>

4
frontend/src/components/overlays/Login.svelte
View file

@ -3,7 +3,7 @@
import request from "../../request";
import { apiRoute } from "../../storage";
import { authWithToken } from "../../auth";
import { maybeModalFly } from "../../animations";
import { maybeModalScale } from "../../animations";
let username = "";
let password = "";
@ -57,7 +57,7 @@
</style>
<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal" transition:maybeModalScale on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal-header">
<span class="h4">Welcome back!</span>
</div>

4
frontend/src/components/overlays/Prompt.svelte
View file

@ -1,5 +1,5 @@
<script>
import { maybeModalFade, maybeModalFly } from "../../animations";
import { maybeModalFade, maybeModalScale } from "../../animations";
export let onSubmit = async () => {};
export let onClose = async () => {};
@ -34,7 +34,7 @@
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ closePrompt }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeModalFly on:click|stopPropagation>
<div class="modal" transition:maybeModalScale on:click|stopPropagation>
<div class="modal-header">
<span class="h4">{ heading }</span>
</div>

4
frontend/src/components/overlays/Settings.svelte
View file

@ -1,7 +1,7 @@
<script>
import { overlayStore, userInfoStore, smallViewport, theme, doAnimations, OverlayType } from "../../stores";
import { logOut } from "../../auth";
import { maybeModalFade, maybeModalFly } from "../../animations";
import { maybeModalFade, maybeModalScale } from "../../animations";
import request from "../../request";
import { apiRoute, getItem } from "../../storage";
@ -89,7 +89,7 @@
</style>
<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalFly on:click|stopPropagation>
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
<span class="input-label" on:click={ doDeveloper }>Account</span>
<div class="settings-card full-width">
<span class="material-icons-outlined">alternate_email</span>

4
frontend/src/components/overlays/Toast.svelte
View file

@ -1,5 +1,5 @@
<script>
import { maybeModalFly } from "../../animations";
import { maybeModalScale } from "../../animations";
export let message;
export let close = () => {};
@ -22,7 +22,7 @@
}
</style>
<div class="toast" transition:maybeModalFly>
<div class="toast" transition:maybeModalScale>
<span>{ message }</span>
<button class="icon-button icon-button-auto material-icons-outlined" on:click="{ close }">close</button>
</div>