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

cosmetic changes on MultiSelect

Browse Source 
* Different look for SelectSingle buttons

* Show All button is aligned with the items below it, no matter the popup size
This commit is contained in:
spacebares 2022-12-17 10:05:51 -08:00
parent 0356e33fe0
commit 58d8695726
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +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';
export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
@ -12,6 +13,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
const [state, setState] = useState({ const [state, setState] = useState({
showMenu: false, showMenu: false,
}); });
const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; }
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div <div
@ -23,26 +27,26 @@ export default function MultiSelect({ className, title, options, selection, onTo
</div> </div>
{state.showMenu ? ( {state.showMenu ? (
<Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}> <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
<div className="flex flex-wrap gap-2 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 className="mx-2" onClick={() => onShowAll() }> <Button className="mx-4" onClick={() => onShowAll() }>
Show All Show All
</Button> </Button>
</div> </div>
{options.map((item) => ( {options.map((item) => (
<div className="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={selection == "all" || selection.split(',').indexOf(item) > -1} checked={isOptionSelected(item)}
onChange={() => onToggle(item)} /> onChange={() => onToggle(item)} />
{item.replaceAll("_", " ")} {item.replaceAll("_", " ")}
</label> </label>
<div className=' justify-right'> <div className="justify-right">
<Button className="mx-2" onClick={() => onSelectSingle(item)}> <Button color={isOptionSelected(item) ? "blue" : "black"} type="text" className="max-h-[35px] mx-2" onClick={() => onSelectSingle(item)}>
👀 <CameraIcon />
</Button> </Button>
</div> </div>
</div> </div>