administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 02:35:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

removed the restrict menu height from #5601.

Browse Source
This commit is contained in:
Bernt Christian Egeland 2023-04-12 18:30:24 +02:00
parent ff1784ef22
commit 0bf0c0ea07
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,30 +7,28 @@ import Button from './Button';
import CameraIcon from '../icons/Camera'; import CameraIcon from '../icons/Camera';
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);
const [state, setState] = useState({ const [state, setState] = useState({
showMenu: false, showMenu: false,
}); });
const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; } const isOptionSelected = (item) => {
return selection == 'all' || selection.split(',').indexOf(item) > -1;
const menuHeight = Math.round(window.innerHeight * 0.55); };
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
className="flex justify-between min-w-[120px]"
onClick={() => setState({ showMenu: true })}
>
<label>{title}</label> <label>{title}</label>
<ArrowDropdown className="w-6" /> <ArrowDropdown className="w-6" />
</div> </div>
{state.showMenu ? ( {state.showMenu ? (
<Menu className={`max-h-[${menuHeight}px] overflow-scroll`} relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}> <Menu className={`overflow-auto`} relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
<div className="flex flex-wrap justify-between items-center"> <div className="flex flex-wrap justify-between items-center">
<Heading className="p-4 justify-center" size="md">{title}</Heading> <Heading className="p-4 justify-center" size="md">
{title}
</Heading>
<Button tabindex="false" className="mx-4" onClick={() => onShowAll()}> <Button tabindex="false" className="mx-4" onClick={() => onShowAll()}>
Show All Show All
</Button> </Button>
@ -38,16 +36,23 @@ export default function MultiSelect({ className, title, options, selection, onTo
{options.map((item) => ( {options.map((item) => (
<div className="flex flex-grow" key={item}> <div className="flex flex-grow" key={item}>
<label <label
className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}> className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
>
<input <input
className="mx-4 m-0 align-middle" className="mx-4 m-0 align-middle"
type="checkbox" type="checkbox"
checked={isOptionSelected(item)} checked={isOptionSelected(item)}
onChange={() => onToggle(item)} /> onChange={() => onToggle(item)}
{item.replaceAll("_", " ")} />
{item.replaceAll('_', ' ')}
</label> </label>
<div className="justify-right"> <div className="justify-right">
<Button color={isOptionSelected(item) ? "blue" : "black"} type="text" className="max-h-[35px] mx-2" onClick={() => onSelectSingle(item)}> <Button
color={isOptionSelected(item) ? 'blue' : 'black'}
type="text"
className="max-h-[35px] mx-2"
onClick={() => onSelectSingle(item)}
>
<CameraIcon /> <CameraIcon />
</Button> </Button>
</div> </div>