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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/package-lock.json generated
View File

@ -421,6 +421,17 @@
"typed-colors": "^1.0.0",
"typed-figures": "^1.0.0",
"yargs": "^16.2.0"
},
"dependencies": {
"enhanced-resolve": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
"integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
"requires": {
"graceful-fs": "^4.2.4",
"tapable": "^2.2.0"
}
}
}
},
"@typed/fp": {
@ -444,6 +455,13 @@
"newtype-ts": "^0.3.4",
"ts-toolbelt": "^8.0.7",
"tslib": "^2.0.3"
},
"dependencies": {
"json-schema": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.5.tgz",
"integrity": "sha512-gWJOWYFrhQ8j7pVm0EM8Slr+EPVq1Phf6lvzvD/WCeqkrx/f2xBI0xOsRRS9xCn3I4vKtP519dvs3TP09r24wQ=="
}
}
},
"@types/json-schema": {
@ -836,15 +854,6 @@
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"enhanced-resolve": {
"version": "5.7.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
"integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
"requires": {
"graceful-fs": "^4.2.4",
"tapable": "^2.2.0"
}
},
"error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@ -1047,6 +1056,11 @@
"resolved": "https://registry.npmjs.org/hyperhtml-style/-/hyperhtml-style-0.1.2.tgz",
"integrity": "sha512-ZDRYNClEaqUS0a8RAED0nQRqWmZk7ctdyij3Iw/PqUUef6xhYO87nx9vJNuxg7Yc6J2FdJjXRKbB0iud2ZyzwQ=="
},
"idb-keyval": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.0.2.tgz",
"integrity": "sha512-1DYjY/nX2U9pkTkwFoAmKcK1ZWmkNgO32Oon9tp/9+HURizxUQ4fZRxMJZs093SldP7q6dotVj03kIkiqOILyA=="
},
"ignore": {
"version": "5.1.8",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
@ -1201,11 +1215,6 @@
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
},
"json-schema": {
"version": "0.2.5",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.5.tgz",
"integrity": "sha512-gWJOWYFrhQ8j7pVm0EM8Slr+EPVq1Phf6lvzvD/WCeqkrx/f2xBI0xOsRRS9xCn3I4vKtP519dvs3TP09r24wQ=="
},
"json5": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",

1
web/package.json
View File

@ -11,6 +11,7 @@
"@snowpack/plugin-postcss": "^1.1.0",
"autoprefixer": "^10.2.1",
"cross-env": "^7.0.3",
"idb-keyval": "^5.0.2",
"immer": "^8.0.1",
"postcss": "^8.2.2",
"postcss-cli": "^8.3.1",

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);
}

2
web/tailwind.config.js
View File

@ -2,7 +2,7 @@
module.exports = {
purge: ['./public/**/*.html', './src/**/*.jsx'],
darkMode: 'media',
darkMode: 'class',
theme: {
extend: {},
},