From 87c0a959d16cd341806472e70b3627ffe82989cf Mon Sep 17 00:00:00 2001 From: Tnixc Date: Sun, 20 Oct 2024 14:23:39 -0400 Subject: [PATCH 01/26] basic notice functionality --- .../assets/css/notice/notice-container.css | 15 ----- src/renderer/src/assets/css/notice/notice.css | 58 ------------------- src/renderer/src/components/notice/Notice.tsx | 40 ++++++++----- .../src/components/notice/NoticeContainer.tsx | 25 ++++---- .../src/scenes/main-scene/MainScene.tsx | 2 + 5 files changed, 39 insertions(+), 101 deletions(-) delete mode 100644 src/renderer/src/assets/css/notice/notice-container.css delete mode 100644 src/renderer/src/assets/css/notice/notice.css diff --git a/src/renderer/src/assets/css/notice/notice-container.css b/src/renderer/src/assets/css/notice/notice-container.css deleted file mode 100644 index 951ea91..0000000 --- a/src/renderer/src/assets/css/notice/notice-container.css +++ /dev/null @@ -1,15 +0,0 @@ -.notice-container-wrapper { - position: fixed; - top: 0; - right: 0; - width: clamp(250px, 400px, 33vw); - overflow: auto; - max-height: 100vh; -} - -.notice-container { - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px 16px 16px 32px; -} diff --git a/src/renderer/src/assets/css/notice/notice.css b/src/renderer/src/assets/css/notice/notice.css deleted file mode 100644 index f260eea..0000000 --- a/src/renderer/src/assets/css/notice/notice.css +++ /dev/null @@ -1,58 +0,0 @@ -.notice-wrapper { - overflow: hidden; - border-radius: var(--border-radius); -} - -.notice { - background-color: rgba(var(--color-fg), var(--level-0)); - width: 100%; - height: 100%; -} - -.notice.warning { - background-color: oklch(70% 0.15 55 / var(--level-0)); -} - -.notice.error { - background-color: oklch(70% 0.15 20 / var(--level-0)); -} - -.notice .content { - padding: 16px; - display: flex; - flex-direction: column; - gap: 8px; -} - -.notice .content .head { - display: flex; - gap: 8px; - justify-content: space-between; -} - -.notice .timeout { - height: 8px; - width: 100%; - background-color: rgba(var(--color-fg), var(--level-3)); -} - -.notice.warning .timeout { - background-color: oklch(70% 0.15 55 / var(--level-3)); -} - -.notice.error .timeout { - background-color: oklch(70% 0.15 20 / var(--level-3)); -} - -.notice .timeout.pause { - animation-play-state: paused; -} - -@keyframes drain-time { - from { - width: 100%; - } - to { - width: 0; - } -} diff --git a/src/renderer/src/components/notice/Notice.tsx b/src/renderer/src/components/notice/Notice.tsx index 6c5bd2b..c20697c 100644 --- a/src/renderer/src/components/notice/Notice.tsx +++ b/src/renderer/src/components/notice/Notice.tsx @@ -1,11 +1,10 @@ import { Optional } from "../../../../@types"; -import "../../assets/css/notice/notice.css"; import Impulse from "../../lib/Impulse"; import { none, orDefault, some } from "../../lib/rust-like-utils-client/Optional"; import Gradient from "../Gradient"; import { hideNotice } from "./NoticeContainer"; import { XIcon } from "lucide-solid"; -import { Accessor, Component, createSignal } from "solid-js"; +import { Accessor, Component, createSignal, onMount } from "solid-js"; export type NoticeType = { id?: string; @@ -23,38 +22,50 @@ type NoticeProps = { }; const Notice: Component = (props) => { + const [isVisible, setIsVisible] = createSignal(false); + const removeNotice = () => { - const action = hideNotice(props.notice.id); - - if (action.isError) { - return; - } - - try { - pauseDrain(); - } catch {} + setIsVisible(false); + setTimeout(() => { + const action = hideNotice(props.notice.id); + if (action.isError) { + return; + } + try { + pauseDrain(); + } catch {} + }, 300); // Wait for fade out animation }; const [drain, setDrainTime, pauseDrain] = createDrainAnimation( - props.notice.timeoutMS ?? 10_000, + props.notice.timeoutMS ?? 3000, // 3 seconds removeNotice, ); const onRef = (notice: HTMLElement) => { props.updateGradient.pulse(); props.onMount(notice); + setTimeout(() => setIsVisible(true), 50); // Delay to trigger enter animation }; + onMount(() => { + setDrainTime(props.notice.timeoutMS ?? 10_000); + }); + return (
setDrainTime(props.notice.timeoutMS ?? 10_000)} data-id={props.notice.id} ref={onRef} > -
+

{props.notice.title}

@@ -93,6 +104,7 @@ function createDrainAnimation( get, (ms: number) => { set(some(drainTemplate(ms))); + clearTimeout(timeout); timeout = window.setTimeout(onDrained, ms); }, () => { diff --git a/src/renderer/src/components/notice/NoticeContainer.tsx b/src/renderer/src/components/notice/NoticeContainer.tsx index ef06c9d..8bc497c 100644 --- a/src/renderer/src/components/notice/NoticeContainer.tsx +++ b/src/renderer/src/components/notice/NoticeContainer.tsx @@ -1,5 +1,4 @@ import { Result } from "../../../../@types"; -import "../../assets/css/notice/notice-container.css"; import Impulse from "../../lib/Impulse"; import { fail, ok } from "../../lib/rust-like-utils-client/Result"; import { TokenNamespace } from "../../lib/tungsten/token"; @@ -95,20 +94,18 @@ const NoticeContainer = () => { }); return ( -
-
- n.notice.active !== false)}> - {(n) => ( - observer.observe(e)} - /> - )} - -
+
+ n.notice.active !== false)}> + {(n) => ( + observer.observe(e)} + /> + )} +
); }; -export default NoticeContainer; +export default NoticeContainer; \ No newline at end of file diff --git a/src/renderer/src/scenes/main-scene/MainScene.tsx b/src/renderer/src/scenes/main-scene/MainScene.tsx index 910c09b..aed1a64 100644 --- a/src/renderer/src/scenes/main-scene/MainScene.tsx +++ b/src/renderer/src/scenes/main-scene/MainScene.tsx @@ -1,3 +1,4 @@ +import NoticeContainer from "@renderer/components/notice/NoticeContainer"; import SongDetail from "../../components/song/song-detail/SongDetail"; import SongList from "../../components/song/song-list/SongList"; import { mainActiveTab, setMainActiveTab, Tab, TABS } from "./main.utils"; @@ -29,6 +30,7 @@ import { const MainScene: Component = () => { return (
+