From 4b0ddb9e239e39d5e2dbb711ff53445e8471ccd4 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 20 Sep 2022 23:59:17 +0300
Subject: [PATCH] improve modal animations

---
 frontend/src/animations.js                        | 15 +++++++++++----
 .../src/components/overlays/CreateAccount.svelte  |  4 ++--
 .../src/components/overlays/CreateChannel.svelte  |  4 ++--
 .../src/components/overlays/EditChannel.svelte    |  4 ++--
 .../src/components/overlays/EditMessage.svelte    |  4 ++--
 frontend/src/components/overlays/Login.svelte     |  4 ++--
 frontend/src/components/overlays/Prompt.svelte    |  4 ++--
 frontend/src/components/overlays/Settings.svelte  |  4 ++--
 frontend/src/components/overlays/Toast.svelte     |  4 ++--
 9 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/src/animations.js b/frontend/src/animations.js
index cf15aae..c7356bd 100644
--- a/frontend/src/animations.js
+++ b/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) {
-    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) {
diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index 963d3d8..7d46a29 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index 5debb5e..85ec7f2 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index 1ca1a82..47191aa 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
index 4ddcb91..c285411 100644
--- a/frontend/src/components/overlays/EditMessage.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index 455a2ba..d54d1e0 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/Prompt.svelte b/frontend/src/components/overlays/Prompt.svelte
index 900cae3..fe33120 100644
--- a/frontend/src/components/overlays/Prompt.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index 53ba71b..9183b05 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/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>
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index 9e43f01..a57c5d4 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/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>