Commit ff6a212d authored by Nicolas Pernoud's avatar Nicolas Pernoud
Browse files

fix: faster animations

parent b4418640
Pipeline #6080 passed with stages
in 2 minutes and 47 seconds
......@@ -9,8 +9,8 @@
</cc:Work>
</rdf:RDF>
</metadata>
<circle cx="50" cy="50" r="47.5" fill="none" stroke="#b0bec5" stroke-width="5" />
<path d="m97.5 50c0 26.234-21.266 47.5-47.5 47.5m-47.5-47.5c2e-7 -26.234 21.266-47.5 47.5-47.5 26.234 0 47.5 21.266 47.5 47.5" fill="none" stroke="#0d47a1" stroke-linecap="round" stroke-width="3">
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatDur="indefinite" />
<circle cx="50" cy="50" r="45" fill="none" stroke="#b0bec5" stroke-width="10" />
<path d="m95 50c0 24.854-20.147 45-45 45m-45-45c2e-7 -24.854 20.147-45 45-45 24.854 0 45 20.147 45 45" fill="none" stroke="#0d47a1" stroke-linecap="round" stroke-width="5">
<animateTransform attributeName="transform" dur="1s" from="0 50 50" repeatDur="indefinite" to="360 50 50" type="rotate" />
</path>
</svg>
......@@ -153,7 +153,7 @@ export async function mount(where) {
</div>
</div>
<div class="modal animate__animated animate__zoomIn animate__faster" id="apps-icons-modal">
<div class="modal animate__animated animate__zoomIn" id="apps-icons-modal">
<div class="modal-card">
<section id="apps-icons-modal-list" class="modal-card-body"></section>
</div>
......@@ -186,7 +186,7 @@ function appTemplate(app) {
</span>
</button>
</div>
<div class="dropdown-menu animate__animated animate__fadeIn animate__faster" role="menu">
<div class="dropdown-menu animate__animated animate__fadeIn" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" href="https://${app.host}:${location.port}"><i class="fas fa-external-link-alt"></i><strong> Visit</strong></a>
${user.isAdmin ? '<a class="dropdown-item" id="apps-app-edit-' + app.id + '"><i class="fas fa-edit"></i><strong> Edit</strong></a>' : ""}
......@@ -495,8 +495,8 @@ function openWebview(app) {
let webview = document.createElement("div");
webview.classList.add("modal", "is-active");
webview.innerHTML = /* HTML */ `
<div class="modal-background animate__animated animate__fadeIn animate__faster"></div>
<div class="modal-card animate__animated animate__zoomIn animate__faster" style="width: 90vw;">
<div class="modal-background animate__animated animate__fadeIn"></div>
<div class="modal-card animate__animated animate__zoomIn" style="width: 90vw;">
<header class="modal-card-head">
<p class="modal-card-title">${app.name}</p>
<button class="delete" aria-label="close" id="apps-webview-close"></button>
......
......@@ -127,7 +127,7 @@ export async function mount(where) {
</div>
</div>
<div class="modal animate__animated animate__zoomIn animate__faster" id="davs-icons-modal">
<div class="modal animate__animated animate__zoomIn" id="davs-icons-modal">
<div class="modal-card">
<section id="davs-icons-modal-list" class="modal-card-body"></section>
</div>
......@@ -167,7 +167,7 @@ function davTemplate(dav) {
</span>
</button>
</div>
<div class="dropdown-menu animate__animated animate__fadeIn animate__faster" role="menu">
<div class="dropdown-menu animate__animated animate__fadeIn" role="menu">
<div class="dropdown-content">
<div class="dropdown-item"></div>
${user.isAdmin ? '<a class="dropdown-item" id="davs-dav-edit-' + dav.id + '"><i class="fas fa-edit"></i><strong> Edit</strong></a>' : ""}
......
......@@ -21,7 +21,7 @@ export class Edit {
this.user = await Auth.GetUser();
this.editModal = document.createElement("div");
this.editModal.classList.add("modal", "is-active");
this.editModal.classList.add("animate__animated", "animate__fadeIn", "animate__faster");
this.editModal.classList.add("animate__animated", "animate__fadeIn");
let content;
try {
const response = await fetch(this.url, {
......
......@@ -120,7 +120,7 @@ export class Explorer {
fileTemplate(file) {
return /* HTML */ `
<article id="file-${file.id}-content" class="media animate__animated animate__fadeIn animate__faster">
<article id="file-${file.id}-content" class="media animate__animated animate__fadeIn">
<figure class="media-left">
${file.type.includes("image")
? `<p class="image is-48x48"><img id="file-${file.id}-image" src="assets/spinner.svg"/></p>`
......@@ -256,7 +256,7 @@ export class Explorer {
rename(file) {
let renameModal = document.createElement("div");
renameModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
renameModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
renameModal.innerHTML = /* HTML */ `
<div class="modal-background"></div>
<div class="modal-content">
......@@ -326,7 +326,7 @@ export class Explorer {
moveOrCopy(file, isCopy) {
let pasteControl = document.createElement("div");
pasteControl.classList.add("field", "has-addons", "animate__animated", "animate__zoomIn", "animate__faster", "is-active");
pasteControl.classList.add("field", "has-addons", "animate__animated", "animate__zoomIn", "is-active");
pasteControl.innerHTML = /* HTML */ `
<a class="button is-link">
<span class="icon is-small">
......@@ -450,7 +450,7 @@ export class Explorer {
<div class="content"><p>${file.name} (file: ${fileIdx}/${files.length})</p></div>
<progress class="progress is-primary is-small" value="0" max="100" style="margin-bottom: 0px;"></progress>
`;
msg.classList.add("is-info", "notification", "uploader", "animate__animated", "animate__fadeInUp", "animate__faster");
msg.classList.add("is-info", "notification", "uploader", "animate__animated", "animate__fadeInUp");
const delBtn = document.createElement("button");
let xhr = new XMLHttpRequest();
// track upload progress
......
......@@ -40,7 +40,7 @@ export class Open {
this.user = await Auth.GetUser();
this.openModal = document.createElement("div");
this.openModal.classList.add("modal", "is-active");
if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn", "animate__faster");
if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn");
let content;
let token;
if (this.type == "text") {
......
......@@ -20,7 +20,7 @@ export class Share {
async show() {
this.user = await Auth.GetUser();
let shareModal = document.createElement("div");
shareModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
shareModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
shareModal.innerHTML = /* HTML */ `
<div class="modal-background"></div>
<div class="modal-content">
......@@ -75,7 +75,7 @@ export class Share {
const shareToken = await response.text();
// Create result modal
let resultModal = document.createElement("div");
resultModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
resultModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
resultModal.innerHTML = /* HTML */ `
<div class="modal-background"></div>
<div class="modal-content">
......
......@@ -7,6 +7,11 @@
<link rel="manifest" href="assets/brand/manifest.json" />
<link rel="stylesheet" href="assets/bulma.min.css" />
<link rel="stylesheet" href="assets/animate.css" />
<style>
:root {
--animate-duration: 0.25s;
}
</style>
<script defer src="assets/fontawesome/solid.min.js"></script>
<script defer src="assets/fontawesome/fontawesome.min.js"></script>
<script defer type="module" src="main.js"></script>
......@@ -70,7 +75,7 @@
</div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item"><p>v4.3.23</p></div>
<div class="navbar-item"><p>v4.3.24</p></div>
</div>
</div>
</nav>
......
......@@ -55,14 +55,15 @@ async function load(element, domAlteration) {
AnimateCSS(element, "animate__fadeOut", async function () {
element.classList.add("is-hidden");
spinner.classList.remove("is-hidden");
AnimateCSS(spinner, "animate__fadeIn");
if (typeof domAlteration === "function") {
await domAlteration();
AnimateCSS(spinner, "animate__fadeOut", function () {
spinner.classList.add("is-hidden");
});
element.classList.remove("is-hidden");
AnimateCSS(element, "animate__fadeIn");
}
AnimateCSS(spinner, "animate__fadeIn", async () => {
if (typeof domAlteration === "function") {
await domAlteration();
AnimateCSS(spinner, "animate__fadeOut", () => {
spinner.classList.add("is-hidden");
element.classList.remove("is-hidden");
AnimateCSS(element, "animate__fadeIn");
});
}
});
});
}
export function AnimateCSS(el, animationName, callback) {
el.classList.add("animate__animated", "animate__faster", animationName);
el.classList.add("animate__animated", animationName);
function handleAnimationEnd() {
el.classList.remove("animate__animated", "animate__faster", animationName);
el.classList.remove("animate__animated", animationName);
el.removeEventListener("animationend", handleAnimationEnd);
if (typeof callback === "function") callback();
}
......
......@@ -4,7 +4,7 @@ import { AnimateCSS } from "/services/common/common.js";
export class Delete {
constructor(okFunction) {
let deleteModal = document.createElement("div");
deleteModal.classList.add("modal", "animate__animated", "animate__fadeIn", "animate__faster", "is-active");
deleteModal.classList.add("modal", "animate__animated", "animate__fadeIn", "is-active");
deleteModal.innerHTML = /* HTML */ `
<div class="modal-background"></div>
<div class="modal-content">
......
......@@ -10,7 +10,7 @@ export function Show(bulmaClass, message) {
let msg = document.createElement("div");
msg.style.marginBottom = offset.toString() + "px";
msg.innerText = message;
msg.classList.add("notification", "animate__animated", "animate__fadeInUp", "animate__faster");
msg.classList.add("notification", "animate__animated", "animate__fadeInUp");
msg.classList.add(bulmaClass);
const delBtn = document.createElement("button");
delBtn.classList.add("delete");
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment