Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): dark mode for portals

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-04 10:27:22 -08:00 committed by Blake Blackshear
parent ba0338e9d5
commit 5965da88c3
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/RelativeModal.jsx
View File

@ -1,6 +1,5 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import { createPortal } from 'preact/compat'; import { createPortal } from 'preact/compat';
import { DarkModeProvider } from '../context';
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
const WINDOW_PADDING = 20; const WINDOW_PADDING = 20;
@ -76,7 +75,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
}, [show, position.width, ref.current]); }, [show, position.width, ref.current]);
const menu = ( const menu = (
<DarkModeProvider> <Fragment>
<div className="absolute inset-0" onClick={handleDismiss} /> <div className="absolute inset-0" onClick={handleDismiss} />
<div <div
className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${ className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
@ -91,7 +90,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
> >
{children} {children}
</div> </div>
</DarkModeProvider> </Fragment>
); );
return portalRoot ? createPortal(menu, portalRoot) : menu; return portalRoot ? createPortal(menu, portalRoot) : menu;

16
web/src/context/index.jsx
View File

@ -1,7 +1,7 @@
import { h, createContext } from 'preact'; import { h, createContext } from 'preact';
import { get as getData, set as setData } from 'idb-keyval'; import { get as getData, set as setData } from 'idb-keyval';
import produce from 'immer'; import produce from 'immer';
import { useCallback, useContext, useEffect, useState } from 'preact/hooks'; import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
const DarkMode = createContext(null); const DarkMode = createContext(null);
@ -54,11 +54,15 @@ export function DarkModeProvider({ children }) {
handleMediaMatch(query); handleMediaMatch(query);
}, [persistedMode]); }, [persistedMode]);
return ( useLayoutEffect(() => {
<DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}> if (currentMode === 'dark') {
<div className={`${currentMode === 'dark' ? 'dark' : ''}`}>{children}</div> document.body.classList.add('dark');
</DarkMode.Provider> } else {
); document.body.classList.remove('dark');
}
}, [currentMode]);
return <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>{children}</DarkMode.Provider>;
} }
export function useDarkMode() { export function useDarkMode() {