From 11a203cb8f396b28450ca676c6963f240a54aefb Mon Sep 17 00:00:00 2001 From: aurinex Date: Mon, 15 Dec 2025 00:37:45 +0500 Subject: [PATCH] new function settings --- src/renderer/App.css | 51 +++- src/renderer/App.tsx | 257 ++++++++++++------- src/renderer/components/FullScreenLoader.tsx | 11 +- src/renderer/components/TopBar.tsx | 13 +- src/renderer/pages/News.tsx | 3 +- src/renderer/pages/Settings.tsx | 15 +- src/renderer/pages/VersionsExplorer.tsx | 1 + src/renderer/utils/settings.ts | 34 --- 8 files changed, 232 insertions(+), 153 deletions(-) delete mode 100644 src/renderer/utils/settings.ts diff --git a/src/renderer/App.css b/src/renderer/App.css index d70d0e6..353cd2b 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -12,19 +12,52 @@ url('../../assets/fonts/benzin-bold.svg#benzin-bold') format('svg'); /* Chrome < 4, Legacy iOS */ } -:root { - --ui-scale: 1; +/* SETTINGS NO-BLUR */ +.glass { + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); } -#root { - transform: scale(var(--ui-scale)); - transform-origin: top left; - - /* компенсация, чтобы после scale не появлялись пустые области/скроллы */ - width: calc(100% / var(--ui-scale)); - height: calc(100% / var(--ui-scale)); +.glass-ui { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } +.glass--soft { backdrop-filter: blur(6px); } +.glass--hard { backdrop-filter: blur(20px); } + +body.no-blur .glass, +body.no-blur .glass-ui { + backdrop-filter: none; + -webkit-backdrop-filter: none; +} +/* SETTINGS NO-BLUR */ + +/* SETTINGS REDUCE-MOTION */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} + +body.reduce-motion *, +body.reduce-motion *::before, +body.reduce-motion *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + scroll-behavior: auto !important; +} + +/* опционально: убрать ховер-скейлы (если ты их часто используешь) */ +body.reduce-motion .no-motion-hover, +body.reduce-motion .no-motion-hover:hover { + transform: none !important; +} +/* SETTINGS REDUCE-MOTION */ + body { position: relative; color: white; diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index def4045..c5b311a 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -108,6 +108,46 @@ const App = () => { }; const AppLayout = () => { + useEffect(() => { + const applySettings = () => { + try { + const raw = localStorage.getItem('launcher_settings'); + if (!raw) return; + + const settings = JSON.parse(raw); + + document.body.classList.toggle( + 'reduce-motion', + Boolean(settings.reduceMotion), + ); + + document.body.classList.toggle( + 'no-blur', + settings.blurEffects === false, + ); + + const ui = document.getElementById('app-ui'); + if (ui && typeof settings.uiScale === 'number') { + const scale = settings.uiScale / 100; + + ui.style.transform = `scale(${scale})`; + ui.style.transformOrigin = 'top left'; + ui.style.width = `${100 / scale}%`; + ui.style.height = `${100 / scale}%`; + } + } catch (e) { + console.error('Failed to apply UI settings', e); + } + }; + + // применяем при загрузке + applySettings(); + + // применяем после сохранения настроек + window.addEventListener('settings-updated', applySettings); + return () => window.removeEventListener('settings-updated', applySettings); + }, []); + // Просто используйте window.open без useNavigate const handleRegister = () => { window.open('https://account.ely.by/register', '_blank'); @@ -127,104 +167,129 @@ const AppLayout = () => { }, []); return ( - + + {/* ФОН — НЕ масштабируется */} + - - - + - - } - /> - } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - + {/* UI — масштабируется */} + + + + + + + + } + /> + } /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + ); }; diff --git a/src/renderer/components/FullScreenLoader.tsx b/src/renderer/components/FullScreenLoader.tsx index 85ccb34..4e25dab 100644 --- a/src/renderer/components/FullScreenLoader.tsx +++ b/src/renderer/components/FullScreenLoader.tsx @@ -39,13 +39,12 @@ export const FullScreenLoader = ({ {fullScreen && ( @@ -61,7 +60,9 @@ export const FullScreenLoader = ({ alignItems: 'center', gap: 3, // небольшой "подъём" при появлении - animation: 'popIn 260ms ease-out both', + animation: document.body.classList.contains('reduce-motion') + ? 'none' + : 'popIn 260ms ease-out both', '@keyframes popIn': { from: { opacity: 0, transform: 'translateY(8px) scale(0.98)' }, to: { opacity: 1, transform: 'translateY(0) scale(1)' }, @@ -76,7 +77,9 @@ export const FullScreenLoader = ({ position: 'relative', overflow: 'hidden', background: 'conic-gradient(#F27121, #E940CD, #8A2387, #F27121)', - animation: 'spin 1s linear infinite', + animation: document.body.classList.contains('reduce-motion') + ? 'none' + : 'spin 1s linear infinite', WebkitMask: 'radial-gradient(circle, transparent 55%, black 56%)', mask: 'radial-gradient(circle, transparent 55%, black 56%)', '@keyframes spin': { diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx index 8524874..5cbc70d 100644 --- a/src/renderer/components/TopBar.tsx +++ b/src/renderer/components/TopBar.tsx @@ -266,8 +266,18 @@ export default function TopBar({ onRegister, username }: TopBarProps) { return () => window.removeEventListener('skin-updated', handler as EventListener); }, [loadSkin]); + useEffect(() => { + const handler = () => { + requestAnimationFrame(updateGradientVars); + }; + + window.addEventListener('settings-updated', handler as EventListener); + return () => window.removeEventListener('settings-updated', handler as EventListener); + }, [updateGradientVars]); + return ( @@ -316,6 +325,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) { transition: 'transform 0.3s ease', '&:hover': { transform: 'scale(1.2)', + ...(document.body.classList.contains('reduce-motion') ? { transform: 'none' } : null), }, }} > @@ -693,6 +703,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) { background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', transform: 'scale(1.01)', + ...(document.body.classList.contains('reduce-motion') ? { transform: 'none' } : null), boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)', }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)', diff --git a/src/renderer/pages/News.tsx b/src/renderer/pages/News.tsx index 39fe9f1..c3a63f5 100644 --- a/src/renderer/pages/News.tsx +++ b/src/renderer/pages/News.tsx @@ -153,11 +153,11 @@ export const News = () => { sx={{ px: '7vw', pb: '4vh', - maxHeight: '100vh', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '2vh', + width: '85%', }} > {/* Админский редактор */} @@ -353,7 +353,6 @@ export const News = () => { border: '1px solid rgba(255, 255, 255, 0)', boxShadow: '0 18px 45px rgba(0, 0, 0, 0.7)', backdropFilter: 'blur(14px)', - width: '80vw', // transition: // 'transform 0.25s ease, box-shadow 0.25s.ease, border-color 0.25s ease', '&:hover': { diff --git a/src/renderer/pages/Settings.tsx b/src/renderer/pages/Settings.tsx index cf5ba49..44efe2e 100644 --- a/src/renderer/pages/Settings.tsx +++ b/src/renderer/pages/Settings.tsx @@ -54,7 +54,7 @@ const defaultSettings: SettingsState = { walkingSpeed: 0.5, notifications: true, - notificationPosition: 'top-right', + notificationPosition: 'bottom-center', }; function safeParseSettings(raw: string | null): SettingsState | null { @@ -229,13 +229,10 @@ const Settings = () => { }; useEffect(() => { - if (typeof document === 'undefined') return; - - const scale = settings.uiScale / 100; - document.documentElement.style.setProperty('--ui-scale', String(scale)); + // motion / blur классы — глобально на body document.body.classList.toggle('reduce-motion', settings.reduceMotion); document.body.classList.toggle('no-blur', !settings.blurEffects); - }, [settings.uiScale, settings.reduceMotion, settings.blurEffects]); + }, [settings.reduceMotion, settings.blurEffects]); const SectionTitle = ({ children }: { children: string }) => ( { const Glass = ({ children }: { children: React.ReactNode }) => ( { 'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.12), transparent 55%), rgba(10,10,20,0.86)', border: '1px solid rgba(255,255,255,0.08)', boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)', - backdropFilter: 'blur(14px)', color: 'white', }} > @@ -287,6 +284,10 @@ const Settings = () => { }, } as const; + useEffect(() => { + document.body.classList.toggle('no-blur', !settings.blurEffects); + }, [settings.blurEffects]); + return ( { flexDirection: 'column', gap: '2vh', height: '100%', + width: '85%', }} > {loading ? ( diff --git a/src/renderer/utils/settings.ts b/src/renderer/utils/settings.ts deleted file mode 100644 index ad947de..0000000 --- a/src/renderer/utils/settings.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { NotificationPosition } from '../components/Notifications/CustomNotification'; - -export type LauncherSettings = { - notificationPosition?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'; -}; - -export function getLauncherSettings(): LauncherSettings { - try { - return JSON.parse(localStorage.getItem('launcher_settings') || '{}'); - } catch { - return {}; - } -} - -export function getNotificationPosition(): NotificationPosition { - const { notificationPosition } = getLauncherSettings(); - - switch (notificationPosition) { - case 'top-right': - return { vertical: 'top', horizontal: 'right' }; - case 'top-center': - return { vertical: 'top', horizontal: 'center' }; - case 'top-left': - return { vertical: 'top', horizontal: 'left' }; - case 'bottom-right': - return { vertical: 'bottom', horizontal: 'right' }; - case 'bottom-center': - return { vertical: 'bottom', horizontal: 'center' }; - case 'bottom-left': - return { vertical: 'bottom', horizontal: 'left' }; - default: - return { vertical: 'bottom', horizontal: 'center' }; - } -}