[frontend] download icon animation

Author: velzie

frontend/src/Browser.tsx

@@ -8,6 +8,7 @@ import { focusOmnibox } from "./components/UrlInput";
 
 import * as tldts from "tldts";
 import { scramjet } from "./main";
+import { animateDownloadFly } from "./components/Omnibox";
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
 export const forceScreenshot = createDelegate<Tab>();
@@ -99,6 +100,7 @@ export class Browser extends StatefulClass {
 	) {
 		this.downloadProgress = 0.1;
 		let downloaded = 0;
+		animateDownloadFly();
 		await body.pipeTo(
 			new WritableStream({
 				write(chunk) {

frontend/src/components/Omnibox.tsx

@@ -11,6 +11,9 @@ import { createDelegate } from "dreamland/core";
 import type { Tab } from "../Tab";
 import { UrlInput } from "./UrlInput";
 import { browser } from "../Browser";
+import { Icon } from "./Icon";
+
+export const animateDownloadFly = createDelegate<void>();
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;
@@ -116,6 +119,20 @@ export const Omnibox: Component<{
 		]);
 	};
 
+	animateDownloadFly.listen(() => {
+		let fly: HTMLElement = cx.root.querySelector(".downloadfly")!;
+		fly.addEventListener(
+			"transitionend",
+			() => {
+				fly.style.opacity = "0";
+				fly.classList.add("down");
+			},
+			{ once: true }
+		);
+		fly.style.opacity = "1";
+		fly.classList.remove("down");
+	});
+
 	const historyMenu = (e: MouseEvent) => {
 		if (browser.activetab.history.states.length > 1) {
 			createMenu(
@@ -171,6 +188,9 @@ export const Omnibox: Component<{
 					}}
 					icon={iconDownload}
 				></IconButton>
+				<div class="downloadfly down">
+					<Icon icon={iconDownload}></Icon>
+				</div>
 				<CircularProgress
 					progress={use(browser.downloadProgress)}
 				></CircularProgress>
@@ -228,4 +248,37 @@ Omnibox.style = css`
 		position: relative;
 		gap: 0.2em;
 	}
+
+	.downloadfly {
+		position: absolute;
+		top: 0;
+		box-sizing: border-box;
+		aspect-ratio: 1/1;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+
+		display: flex;
+		outline: none;
+		border: none;
+		font-size: 1.25em;
+		background: none;
+		color: var(--fg);
+		border-radius: 0.2em;
+
+		transition: top 0.5s ease;
+	}
+	.downloadfly.down {
+		top: 100vh;
+	}
+	.downloadfly::before {
+		position: absolute;
+		content: "";
+		z-index: -1;
+		height: 2em;
+		width: 2em;
+		border-radius: 50%;
+		opacity: 0.5;
+		background: var(--bg20);
+	}
 `;