improve modal animations

This commit is contained in:
hippoz 2022-09-20 23:59:17 +03:00
parent b1c64d3f58
commit 4b0ddb9e23
Signed by: hippoz
GPG key ID: 7C52899193467641
9 changed files with 27 additions and 20 deletions

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 { cubicInOut } from "svelte/easing";
import { getItem } from "./storage"; import { getItem } from "./storage";
export function maybeModalFade(node) { 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) { export function maybeFly(...e) {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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