chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

feat(web): persist darkmode preference

Browse Source
This commit is contained in:
Paul Armstrong
2021-01-31 06:24:04 -08:00
committed by Blake Blackshear
parent 5ed7a17f46
commit 276ce8710c
9 changed files with 195 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/App.jsx
View File

@@ -4,6 +4,7 @@ import AppBar from './components/AppBar';
import Camera from './Camera';
import CameraMap from './CameraMap';
import Cameras from './Cameras';
import { DarkModeProvider } from './context';
import Debug from './Debug';
import Event from './Event';
import Events from './Events';
@@ -15,28 +16,30 @@ import Api, { FetchStatus, useConfig } from './api';
export default function App() {
const { data, status } = useConfig();
return (
<div class="w-full">
<AppBar title="Frigate" />
{status !== FetchStatus.LOADED ? (
<div className="flex flex-grow-1 min-h-screen justify-center items-center">
<ActivityIndicator />
</div>
) : (
<div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<Sidebar />
<div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
<Router>
<CameraMap path="/cameras/:camera/editor" />
<Camera path="/cameras/:camera" />
<Event path="/events/:eventId" />
<Events path="/events" />
<Debug path="/debug" />
{import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
<Cameras default path="/" />
</Router>
<DarkModeProvider>
<div class="w-full">
<AppBar title="Frigate" />
{status !== FetchStatus.LOADED ? (
<div className="flex flex-grow-1 min-h-screen justify-center items-center">
<ActivityIndicator />
</div>
</div>
)}
</div>
) : (
<div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<Sidebar />
<div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
<Router>
<CameraMap path="/cameras/:camera/editor" />
<Camera path="/cameras/:camera" />
<Event path="/events/:eventId" />
<Events path="/events" />
<Debug path="/debug" />
{import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
<Cameras default path="/" />
</Router>
</div>
</div>
)}
</div>
</DarkModeProvider>
);
}

34
web/src/Settings.jsx Normal file
View File

@@ -0,0 +1,34 @@
import { h } from 'preact';
import { useDarkMode } from './context';
import { useCallback } from 'preact/hooks';
export default function Settings() {
const { currentMode, persistedMode, setDarkMode } = useDarkMode();
const handleSelect = useCallback(
(event) => {
const mode = event.target.value;
setDarkMode(mode);
},
[setDarkMode]
);
return (
<div>
<label>
<span className="block uppercase text-sm">Dark mode</span>
<select className="border-solid border border-gray-500 rounded dark:text-gray-900" onChange={handleSelect}>
<option selected={persistedMode === 'media'} value="media">
Auto
</option>
<option selected={persistedMode === 'light'} value="light">
Light
</option>
<option selected={persistedMode === 'dark'} value="dark">
Dark
</option>
</select>
</label>
</div>
);
}

44
web/src/Sidebar.jsx
View File

@@ -4,30 +4,6 @@ import LinkedLogo from './components/LinkedLogo';
import { Link as RouterLink } from 'preact-router/match';
import { useCallback, useState } from 'preact/hooks';
function HamburgerIcon() {
return (
<svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
);
}
function CloseIcon() {
return (
<svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
);
}
function NavLink({ className = '', href, text }) {
const external = href.startsWith('http');
const El = external ? Link : RouterLink;
@@ -45,30 +21,14 @@ function NavLink({ className = '', href, text }) {
}
export default function Sidebar() {
const [open, setOpen] = useState(false);
const handleToggle = useCallback(() => {
setOpen(!open);
}, [open, setOpen]);
return (
<div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-700 flex-shrink-0 border-r border-gray-200 shadow lg:shadow-none z-20 lg:z-0">
<div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0">
<div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
<div class="text-gray-500">
<LinkedLogo />
</div>
<button
className="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline"
onClick={handleToggle}
>
{open ? <CloseIcon /> : <HamburgerIcon />}
</button>
</div>
<nav
className={`flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto ${
!open ? 'md:h-0 hidden' : ''
}`}
>
<nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
<NavLink href="/" text="Cameras" />
<NavLink href="/events" text="Events" />
<NavLink href="/debug" text="Debug" />

41
web/src/components/AppBar.jsx
View File

@@ -1,8 +1,11 @@
import { h } from 'preact';
import Button from './Button';
import LinkedLogo from './LinkedLogo';
import Menu, { MenuItem } from './Menu';
import MenuIcon from '../icons/Menu';
import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
import MoreIcon from '../icons/More';
import { useDarkMode } from '../context';
import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
// We would typically preserve these in component state
// But need to avoid too many re-renders
@@ -13,6 +16,18 @@ export default function AppBar({ title }) {
const [show, setShow] = useState(true);
const [atZero, setAtZero] = useState(window.scrollY === 0);
const [sidebarVisible, setSidebarVisible] = useState(true);
const [showMoreMenu, setShowMoreMenu] = useState(false);
const { currentMode, persistedMode, setDarkMode } = useDarkMode();
const handleSelectDarkMode = useCallback(
(value, label) => {
setDarkMode(value);
setShowMoreMenu(false);
},
[setDarkMode, setShowMoreMenu]
);
const moreRef = useRef(null);
const scrollListener = useCallback(
(event) => {
@@ -38,9 +53,17 @@ export default function AppBar({ title }) {
};
}, []);
const handleShowMenu = useCallback(() => {
setShowMoreMenu(true);
}, [setShowMoreMenu]);
const handleDismissMoreMenu = useCallback(() => {
setShowMoreMenu(false);
}, [setShowMoreMenu]);
return (
<div
className={`w-full border-b border-color-gray-100 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-800 transform transition-all duration-200 translate-y-0 ${
className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
!show ? '-translate-y-full' : ''
} ${!atZero ? 'shadow' : ''}`}
>
@@ -50,6 +73,20 @@ export default function AppBar({ title }) {
</Button>
</div>
<LinkedLogo />
<div className="flex-grow-1 flex justify-end w-full">
<div ref={moreRef}>
<Button className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
<MoreIcon />
</Button>
</div>
</div>
{showMoreMenu ? (
<Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
<MenuItem label="Auto" value="media" onSelect={handleSelectDarkMode} />
<MenuItem label="Light" value="light" onSelect={handleSelectDarkMode} />
<MenuItem label="Dark" value="dark" onSelect={handleSelectDarkMode} />
</Menu>
) : null}
</div>
);
}

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

@@ -76,13 +76,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
<Fragment>
<div className="absolute inset-0" onClick={handleDismiss} />
<div
className={`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 ${
show ? 'scale-100 opacity-100' : ''
} ${className}`}
onkeydown={handleKeydown}
role={role}
ref={ref}
style={position.width > 0 ? `width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''}
style={
position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''
}
>
{children}
</div>

66
web/src/context/index.jsx Normal file
View File

@@ -0,0 +1,66 @@
import { h, createContext } from 'preact';
import { get as getData, set as setData } from 'idb-keyval';
import produce from 'immer';
import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
const DarkMode = createContext(null);
export function DarkModeProvider({ children }) {
const [persistedMode, setPersistedMode] = useState(null);
const [currentMode, setCurrentMode] = useState(persistedMode !== 'media' ? persistedMode : null);
const setDarkMode = useCallback(
(value) => {
setPersistedMode(value);
setData('darkmode', value);
if (value !== 'media') {
setCurrentMode(value);
}
},
[setPersistedMode]
);
useEffect(() => {
async function load() {
const darkmode = await getData('darkmode');
setDarkMode(darkmode || 'media');
}
load();
}, []);
if (persistedMode === null) {
return null;
}
const handleMediaMatch = useCallback(
({ matches }) => {
if (matches) {
setCurrentMode('dark');
} else {
setCurrentMode('light');
}
},
[setCurrentMode]
);
useEffect(() => {
if (persistedMode !== 'media') {
return;
}
const query = window.matchMedia('(prefers-color-scheme: dark)');
query.addEventListener('change', handleMediaMatch);
handleMediaMatch(query);
}, [persistedMode]);
return (
<DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>
<div className={`${currentMode === 'dark' ? 'dark' : ''}`}>{children}</div>
</DarkMode.Provider>
);
}
export function useDarkMode() {
return useContext(DarkMode);
}