From 57797b78af12144768f8e7c1c17cb2b76c070b97 Mon Sep 17 00:00:00 2001 From: eythaann Date: Fri, 16 Aug 2024 05:12:52 -0500 Subject: [PATCH] style(animation): add wallpaper fade animation on settings --- src/apps/settings/app.tsx | 10 ++++----- .../settings/components/monitor/index.tsx | 22 ++++++++++++++----- .../modules/general/main/infra/Wallpaper.tsx | 12 ++++++++-- .../general/main/infra/index.module.css | 8 +++++++ .../settings/modules/shared/store/infra.ts | 4 +++- .../settings/modules/shared/store/storeApi.ts | 4 ++-- src/apps/settings/styles/global.css | 2 +- src/shared.interfaces.ts | 1 + 8 files changed, 47 insertions(+), 16 deletions(-) diff --git a/src/apps/settings/app.tsx b/src/apps/settings/app.tsx index 78f7b67a..b1d4f927 100644 --- a/src/apps/settings/app.tsx +++ b/src/apps/settings/app.tsx @@ -2,7 +2,6 @@ import { useDarkMode } from '../shared/styles'; import { Header } from './components/header'; import { Navigation } from './components/navigation'; import { Route } from './components/navigation/routes'; -import { emit } from '@tauri-apps/api/event'; import { ConfigProvider, theme } from 'antd'; import { Suspense, useEffect } from 'react'; import { useSelector } from 'react-redux'; @@ -38,10 +37,11 @@ export function App() { let route = useSelector(RootSelectors.route); useEffect(() => { - let splashscreen = document.getElementById('splashscreen'); - splashscreen?.classList.add('vanish'); - setTimeout(() => splashscreen?.classList.add('hidden'), 300); - emit('register-colors-events'); + setTimeout(() => { + let splashscreen = document.getElementById('splashscreen'); + splashscreen?.classList.add('vanish'); + setTimeout(() => splashscreen?.classList.add('hidden'), 300); + }, 300); }, []); let Component = ComponentByRout[route]; diff --git a/src/apps/settings/components/monitor/index.tsx b/src/apps/settings/components/monitor/index.tsx index d2f9f3c8..a40ea314 100644 --- a/src/apps/settings/components/monitor/index.tsx +++ b/src/apps/settings/components/monitor/index.tsx @@ -1,4 +1,5 @@ -import { convertFileSrc } from '@tauri-apps/api/core'; +import { cx } from '../../../shared/styles'; +import { motion, useAnimationControls } from 'framer-motion'; import { PropsWithChildren } from 'react'; import { useSelector } from 'react-redux'; @@ -6,15 +7,26 @@ import { newSelectors } from '../../modules/shared/store/app/reducer'; import cs from './index.module.css'; -interface Props extends PropsWithChildren {} +interface Props extends PropsWithChildren, React.HTMLAttributes {} -export function Monitor({ children }: Props) { +export function Monitor({ children, className, ...props }: Props) { const wallpaper = useSelector(newSelectors.wallpaper); + const controls = useAnimationControls(); return ( -
+
- {wallpaper ? : null} + {wallpaper && ( + { + controls.start({ opacity: 1, transition: { duration: 0.3, ease: 'linear' } }); + }} + /> + )} {children}
diff --git a/src/apps/settings/modules/general/main/infra/Wallpaper.tsx b/src/apps/settings/modules/general/main/infra/Wallpaper.tsx index b22f8a16..2f7f9b01 100644 --- a/src/apps/settings/modules/general/main/infra/Wallpaper.tsx +++ b/src/apps/settings/modules/general/main/infra/Wallpaper.tsx @@ -9,6 +9,8 @@ import { dialog } from '../../../shared/tauri/infra'; import { RootActions } from '../../../shared/store/app/reducer'; +import cs from './index.module.css'; + export function Wallpaper() { const { t } = useTranslation(); const dispatch = useDispatch(); @@ -16,7 +18,9 @@ export function Wallpaper() { async function loadWallpaper() { const file = await dialog.open({ title: t('general.wallpaper.select'), - filters: [{ name: 'images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff'] }], + filters: [ + { name: 'images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff'] }, + ], }); if (!file) { @@ -31,7 +35,11 @@ export function Wallpaper() { <> - +
+ +
); diff --git a/src/apps/settings/modules/general/main/infra/index.module.css b/src/apps/settings/modules/general/main/infra/index.module.css index 111671e3..469dded6 100644 --- a/src/apps/settings/modules/general/main/infra/index.module.css +++ b/src/apps/settings/modules/general/main/infra/index.module.css @@ -54,4 +54,12 @@ flex: 1; height: 100%; } +} + +.wallpaperButton { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + margin-left: 20px; } \ No newline at end of file diff --git a/src/apps/settings/modules/shared/store/infra.ts b/src/apps/settings/modules/shared/store/infra.ts index b312dc40..6932ca31 100644 --- a/src/apps/settings/modules/shared/store/infra.ts +++ b/src/apps/settings/modules/shared/store/infra.ts @@ -4,7 +4,7 @@ import { SettingsSchema } from '../../../../shared/schemas/Settings'; import { Theme } from '../../../../shared/schemas/Theme'; import { saveUserSettings, UserSettingsLoader } from './storeApi'; import { configureStore } from '@reduxjs/toolkit'; -import { listen as listenGlobal } from '@tauri-apps/api/event'; +import { emit, listen as listenGlobal } from '@tauri-apps/api/event'; import { Modal } from 'antd'; import { cloneDeep, debounce } from 'lodash'; @@ -67,6 +67,8 @@ export async function registerStoreEvents() { store.dispatch(RootActions.setState(newState)); }, 100), ); + + await emit('register-colors-events'); } export const LoadSettingsToStore = async (customPath?: string) => { diff --git a/src/apps/settings/modules/shared/store/storeApi.ts b/src/apps/settings/modules/shared/store/storeApi.ts index 032adb54..af784b2e 100644 --- a/src/apps/settings/modules/shared/store/storeApi.ts +++ b/src/apps/settings/modules/shared/store/storeApi.ts @@ -4,7 +4,7 @@ import { Layout, LayoutSchema } from '../../../../shared/schemas/Layout'; import { ParsePlaceholder } from '../../../../shared/schemas/Placeholders'; import { SettingsSchema } from '../../../../shared/schemas/Settings'; import { path } from '@tauri-apps/api'; -import { invoke } from '@tauri-apps/api/core'; +import { convertFileSrc, invoke } from '@tauri-apps/api/core'; import { DirEntry } from '@tauri-apps/plugin-fs'; import yaml from 'js-yaml'; @@ -160,7 +160,7 @@ export class UserSettingsLoader { } if (this._withWallpaper) { - userSettings.wallpaper = await invoke('state_get_wallpaper'); + userSettings.wallpaper = convertFileSrc(await invoke('state_get_wallpaper')); } return userSettings; diff --git a/src/apps/settings/styles/global.css b/src/apps/settings/styles/global.css index b1daedd8..62c1524c 100644 --- a/src/apps/settings/styles/global.css +++ b/src/apps/settings/styles/global.css @@ -15,7 +15,7 @@ top: 0; left: 0; background-color: var(--color-gray-50); - transition: opacity 300ms ease-out; + transition: opacity 300ms linear; opacity: 1; &::before { diff --git a/src/shared.interfaces.ts b/src/shared.interfaces.ts index 89d7f7ec..2a413c33 100644 --- a/src/shared.interfaces.ts +++ b/src/shared.interfaces.ts @@ -14,6 +14,7 @@ export interface UserSettings { layouts: Layout[]; placeholders: Placeholder[]; env: Record; + /** wallpaper url */ wallpaper: string | null; }