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

Change multiselect camera icon (#8016)

Browse Source 
* CenterFocusString icon

* Add CenterFocusString to multiselect

* Rename CenterFocusString.jsx

* Rename icon and make it smaller

* Rename icon

* Fix lint and use icon
for speech

* remove unused vars

* Remove unused import
This commit is contained in:
Daniel 2023-10-08 15:30:53 -04:00 committed by GitHub
parent dbd21eb6fa
commit cc6e049966
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/MultiSelect.jsx
View File

@ -4,9 +4,7 @@ import Menu from './Menu';
import { ArrowDropdown } from '../icons/ArrowDropdown'; import { ArrowDropdown } from '../icons/ArrowDropdown';
import Heading from './Heading'; import Heading from './Heading';
import Button from './Button'; import Button from './Button';
import CameraIcon from '../icons/Camera'; import SelectOnlyIcon from '../icons/SelectOnly';
import SpeakerIcon from '../icons/Speaker';
import useSWR from 'swr';
export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
const popupRef = useRef(null); const popupRef = useRef(null);
@ -20,7 +18,6 @@ export default function MultiSelect({ className, title, options, selection, onTo
}; };
const menuHeight = Math.round(window.innerHeight * 0.55); const menuHeight = Math.round(window.innerHeight * 0.55);
const { data: config } = useSWR('config');
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}> <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@ -61,7 +58,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
className="max-h-[35px] mx-2" className="max-h-[35px] mx-2"
onClick={() => onSelectSingle(item)} onClick={() => onSelectSingle(item)}
> >
{title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />} { ( <SelectOnlyIcon /> ) }
</Button> </Button>
</div> </div>
</div> </div>

21
web/src/icons/SelectOnly.jsx Normal file
View File

@ -0,0 +1,21 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function SelectOnly({ className = 'h-5 w-5', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
className={className}
fill={fill}
viewBox="0 0 24 24"
stroke={stroke}
onClick={onClick}
>
<path
d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"
/>
</svg>
);
}
export default memo(SelectOnly);