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

Camera group layout fixes (#11334)

Browse Source 
* camera group layout changes and tweaks

* lock aspect ratio

* no compacting

* prevent collisions

* revert

* readd limit aspect
This commit is contained in:
Josh Hawkins
2024-05-10 11:54:37 -05:00
committed by GitHub
parent 386ffbf5a6
commit 82e443a5c3
4 changed files with 216 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/icons/IconPicker.tsx
View File

@@ -95,10 +95,11 @@ export default function IconPicker({
align="start"
side="top"
container={containerRef.current}
className="max-h-[50dvh]"
className="flex flex-col max-h-[50dvh] md:max-h-[30dvh] overflow-y-hidden"
>
<div className="flex flex-row justify-between items-center mb-3">
<Heading as="h4">Select an icon</Heading>
<span tabIndex={0} className="sr-only" />
<IoClose
size={15}
className="hover:cursor-pointer"
@@ -110,24 +111,24 @@ export default function IconPicker({
<Input
type="text"
placeholder="Search for an icon..."
className="mb-3"
className="mb-3 text-md md:text-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div className="flex flex-col flex-1 h-[20dvh]">
<div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1">
<div className="flex flex-col h-full overflow-y-auto">
<div className="grid grid-cols-6 gap-2 pr-1">
{icons.map(([name, Icon]) => (
<div
key={name}
className={cn(
"flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg",
"flex flex-row justify-center items-center hover:cursor-pointer p-1 rounded-lg",
selectedIcon?.name === name
? "bg-selected text-white"
: "hover:bg-secondary-foreground",
)}
>
<Icon
size={20}
className="size-6"
onClick={() => {
handleIconSelect({ name, Icon });
setOpen(false);