improve modal animations

frontend/src/animations.js

@@ -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) {
+export function maybeModalScale(node) {
-    return maybeFly(node, { duration: 210, easing: cubicInOut, y: 15 });
+    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) {

frontend/src/components/overlays/CreateAccount.svelte

@@ -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>

frontend/src/components/overlays/CreateChannel.svelte

@@ -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>

frontend/src/components/overlays/EditChannel.svelte

@@ -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>

frontend/src/components/overlays/EditMessage.svelte

@@ -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>

frontend/src/components/overlays/Login.svelte

@@ -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>

frontend/src/components/overlays/Prompt.svelte

@@ -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>

frontend/src/components/overlays/Settings.svelte

@@ -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>

frontend/src/components/overlays/Toast.svelte

@@ -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>