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

alignment

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-12 15:55:38 -05:00
parent 18ecabb39c
commit 5df309cd57
1 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -291,6 +291,7 @@ function NewGroupDialog({
const onSave = () => { const onSave = () => {
setOpen(false); setOpen(false);
setEditState("none"); setEditState("none");
setEditingGroupName("");
}; };
const onCancel = () => { const onCancel = () => {
@ -325,41 +326,44 @@ function NewGroupDialog({
> >
<Content <Content
className={cn( className={cn(
"min-w-0", "scrollbar-container overflow-y-auto",
isDesktop && "my-4 flex max-h-dvh w-6/12 flex-col",
isMobile && "px-4", isMobile && "px-4",
isDesktop && "max-h-dvh w-6/12 overflow-y-hidden",
)} )}
> >
<div className="scrollbar-container flex flex-col overflow-y-auto md:my-4"> {editState === "none" && (
{editState === "none" && ( <>
<> <Header
<Header className="mt-2" onClose={() => setOpen(false)}> className={cn(isDesktop && "mt-5", "justify-center")}
<Title className="mb-2">Camera Groups</Title> onClose={() => setOpen(false)}
<Description className="sr-only"> >
Edit camera groups <Title>Camera Groups</Title>
</Description> <Description className="sr-only">
<div Edit camera groups
</Description>
<div
className={cn(
"absolute",
isDesktop && "right-6 top-10",
isMobile && "absolute right-0 top-4",
)}
>
<Button
size="sm"
className={cn( className={cn(
"absolute", isDesktop &&
isDesktop && "right-6 top-10", "size-6 rounded-md bg-secondary-foreground p-1 text-background",
isMobile && "absolute right-0 top-3", isMobile && "text-secondary-foreground",
)} )}
onClick={() => {
setEditState("add");
}}
> >
<Button <LuPlus />
size="sm" </Button>
className={cn( </div>
isDesktop && </Header>
"size-6 rounded-md bg-secondary-foreground p-1 text-background", <div className="flex flex-col gap-4 md:gap-3">
isMobile && "text-secondary-foreground",
)}
onClick={() => {
setEditState("add");
}}
>
<LuPlus />
</Button>
</div>
</Header>
{currentGroups.map((group) => ( {currentGroups.map((group) => (
<CameraGroupRow <CameraGroupRow
key={group[0]} key={group[0]}
@ -368,30 +372,30 @@ function NewGroupDialog({
onEditGroup={() => onEditGroup(group)} onEditGroup={() => onEditGroup(group)}
/> />
))} ))}
</> </div>
)} </>
)}
{editState != "none" && ( {editState != "none" && (
<> <>
<Header className="mt-2" onClose={() => setEditState("none")}> <Header className="mt-2" onClose={() => setEditState("none")}>
<Title className="mb-2"> <Title>
{editState == "add" ? "Add" : "Edit"} Camera Group {editState == "add" ? "Add" : "Edit"} Camera Group
</Title> </Title>
<Description className="sr-only"> <Description className="sr-only">
Edit camera groups Edit camera groups
</Description> </Description>
</Header> </Header>
<CameraGroupEdit <CameraGroupEdit
currentGroups={currentGroups} currentGroups={currentGroups}
editingGroup={editingGroup} editingGroup={editingGroup}
isLoading={isLoading} isLoading={isLoading}
setIsLoading={setIsLoading} setIsLoading={setIsLoading}
onSave={onSave} onSave={onSave}
onCancel={onCancel} onCancel={onCancel}
/> />
</> </>
)} )}
</div>
</Content> </Content>
</Overlay> </Overlay>
</> </>
@ -449,7 +453,7 @@ export function EditGroupDialog({
> >
<div className="scrollbar-container flex flex-col overflow-y-auto md:my-4"> <div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
<Header className="mt-2" onClose={() => setOpen(false)}> <Header className="mt-2" onClose={() => setOpen(false)}>
<Title className="mb-2">Edit Camera Group</Title> <Title>Edit Camera Group</Title>
<Description className="sr-only">Edit camera group</Description> <Description className="sr-only">Edit camera group</Description>
</Header> </Header>
@ -489,7 +493,7 @@ export function CameraGroupRow({
<> <>
<div <div
key={group[0]} key={group[0]}
className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg duration-100 md:p-1" className="transition-background flex flex-row items-center justify-between rounded-lg duration-100 md:p-1"
> >
<div className={`flex items-center`}> <div className={`flex items-center`}>
<p className="cursor-default">{group[0]}</p> <p className="cursor-default">{group[0]}</p>