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

feat(web): icons and better menu handling for dark mode

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-03 16:00:54 -08:00
committed by Blake Blackshear
parent 9867f4eeee
commit ff62338359
5 changed files with 48 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,12 @@
import { h } from 'preact';
import Button from './Button';
import LinkedLogo from './LinkedLogo';
import Menu, { MenuItem } from './Menu';
import Menu, { MenuItem, MenuSeparator } from './Menu';
import MenuIcon from '../icons/Menu';
import MoreIcon from '../icons/More';
import AutoAwesomeIcon from '../icons/AutoAwesome';
import LightModeIcon from '../icons/LightMode';
import DarkModeIcon from '../icons/DarkMode';
import { useDarkMode, useSidebar } from '../context';
import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
@@ -87,9 +90,10 @@ export default function AppBar({ title }) {
</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} />
<MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
<MenuSeparator />
<MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
<MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
</Menu>
) : null}
</div>

12
web/src/components/Menu.jsx
View File

@@ -31,14 +31,22 @@ export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
return (
<div
className={`flex space-x-2 p-2 pl-4 pr-4 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
className={`flex space-x-2 p-2 px-5 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
focus ? 'bg-gray-200 dark:bg-gray-800 dark:text-white' : ''
}`}
onclick={handleClick}
role="option"
>
{Icon ? <Icon /> : null}
{Icon ? (
<div className="w-6 h-6 self-center mr-4 text-gray-500">
<Icon />
</div>
) : null}
{label}
</div>
);
}
export function MenuSeparator() {
return <div className="border-b border-gray-200 my-2" />;
}