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

refactor modal animations and add more padding to the modal footer

Browse source
This commit is contained in:
hippoz 2022-08-04 21:31:02 +03:00
parent 1feb79b2e8
commit 24a956c940
Signed by: hippoz
GPG key ID: 7C52899193467641
10 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/public/global.css
View file

@ -137,13 +137,13 @@ body {
} }
.modal-header { .modal-header {
margin-bottom: var(--space-norm); margin-bottom: var(--space-md);
text-align: center; text-align: center;
} }
.modal-footer { .modal-footer {
margin-top: auto; margin-top: auto;
padding-top: var(--space-norm); padding-top: var(--space-lg);
} }
.modal-primary-action { .modal-primary-action {

9
frontend/src/animations.js
View file

@ -1,6 +1,15 @@
import { fade, fly } from "svelte/transition"; import { fade, fly } from "svelte/transition";
import { cubicInOut } from "svelte/easing";
import { getItem } from "./storage"; import { getItem } from "./storage";
export function maybeModalFade(node) {
return maybeFade(node, { duration: 160, easing: cubicInOut });
}
export function maybeModalFly(node) {
return maybeFly(node, { duration: 210, easing: cubicInOut, y: 15 });
}
export function maybeFly(...e) { export function maybeFly(...e) {
if (getItem("ui:doAnimations")) if (getItem("ui:doAnimations"))
return fly(...e); return fly(...e);

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

@ -1,9 +1,8 @@
<script> <script>
import { quintInOut } from "svelte/easing";
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 { maybeFly } from "../../animations"; import { maybeModalFly } from "../../animations";
let username = ""; let username = "";
let password = ""; let password = "";
@ -58,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:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }"> <div class="modal" transition:maybeModalFly 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>

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

@ -1,9 +1,8 @@
<script> <script>
import { quintInOut } from "svelte/easing";
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 { maybeFade, maybeFly } from "../../animations"; import { maybeModalFade, maybeModalFly } from "../../animations";
let channelName = ""; let channelName = "";
let createButtonEnabled = true; let createButtonEnabled = true;
@ -35,8 +34,8 @@
} }
</style> </style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }"> <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" transition:maybeModalFly 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>

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

@ -1,6 +1,5 @@
<script> <script>
import { maybeFade, maybeFly } from "../../animations"; import { maybeModalFade, maybeModalFly } from "../../animations";
import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
@ -51,8 +50,8 @@
} }
</style> </style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }"> <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" transition:maybeModalFly 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>

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

@ -3,7 +3,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 { maybeFade, maybeFly } from "../../animations"; import { maybeModalFade, maybeModalFly } from "../../animations";
export let message; export let message;
@ -51,8 +51,8 @@
} }
</style> </style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }"> <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" transition:maybeModalFly 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>

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

@ -1,10 +1,9 @@
<script> <script>
import { quintInOut } from "svelte/easing";
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 { authWithToken } from "../../auth"; import { authWithToken } from "../../auth";
import { maybeFly } from "../../animations"; import { maybeModalFly } from "../../animations";
let username = ""; let username = "";
let password = ""; let password = "";
@ -62,7 +61,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:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }"> <div class="modal" transition:maybeModalFly 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>

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

@ -1,6 +1,5 @@
<script> <script>
import { maybeFade, maybeFly } from "../../animations"; import { maybeModalFade, maybeModalFly } from "../../animations";
import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
export let onSubmit = async () => {}; export let onSubmit = async () => {};
@ -34,8 +33,8 @@
} }
</style> </style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }"> <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" transition:maybeModalFly on:click|stopPropagation>
<div class="modal-header"> <div class="modal-header">
<span class="h4">{ heading }</span> <span class="h4">{ heading }</span>
</div> </div>

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

@ -1,9 +1,8 @@
<script> <script>
import { quintInOut } from "svelte/easing";
import { AtSignIcon } from "svelte-feather-icons"; import { AtSignIcon } from "svelte-feather-icons";
import { overlayStore, userInfoStore, smallViewport, theme, doAnimations } from "../../stores"; import { overlayStore, userInfoStore, smallViewport, theme, doAnimations } from "../../stores";
import { logOut } from "../../auth"; import { logOut } from "../../auth";
import { maybeFade, maybeFly } from "../../animations"; import { maybeModalFade, maybeModalFly } from "../../animations";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
@ -77,8 +76,8 @@
} }
</style> </style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }"> <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalFly on:click|stopPropagation>
<span class="input-label">Account</span> <span class="input-label">Account</span>
<div class="settings-card full-width"> <div class="settings-card full-width">
<AtSignIcon /> <AtSignIcon />

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

@ -1,7 +1,6 @@
<script> <script>
import { XIcon } from "svelte-feather-icons"; import { XIcon } from "svelte-feather-icons";
import { quintInOut } from "svelte/easing"; import { maybeModalFly } from "../../animations";
import { maybeFly } from "../../animations";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
export let message; export let message;
@ -24,7 +23,7 @@
</style> </style>
{#key message} {#key message}
<div class="toast" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}"> <div class="toast" transition:maybeModalFly>
<span>{ message }</span> <span>{ message }</span>
<button class="icon-button icon-button-auto" on:click="{ () => overlayStore.close('toast') }"> <button class="icon-button icon-button-auto" on:click="{ () => overlayStore.close('toast') }">
<XIcon /> <XIcon />