Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-04-19 01:16:11 +02:00
Code Issues Projects Releases Wiki Activity

Clean up config editor (#11474)

Browse Source 
* clean up config editor

* remove unneeded size
This commit is contained in:
Josh Hawkins 2024-05-21 13:06:17 -05:00 committed by GitHub
parent cc3bbcc303
commit 910c85b1c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/pages/ConfigEditor.tsx
View File

@ -11,6 +11,8 @@ import copy from "copy-to-clipboard";
import { useTheme } from "@/context/theme-provider"; import { useTheme } from "@/context/theme-provider";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import { LuCopy, LuSave } from "react-icons/lu";
import { MdOutlineRestartAlt } from "react-icons/md";
type SaveOptions = "saveonly" | "restart"; type SaveOptions = "saveonly" | "restart";
@ -69,6 +71,7 @@ function ConfigEditor() {
} }
copy(editorRef.current.getValue()); copy(editorRef.current.getValue());
toast.success("Config copied to clipboard.", { position: "top-center" });
}, [editorRef]); }, [editorRef]);
useEffect(() => { useEffect(() => {
@ -117,7 +120,6 @@ function ConfigEditor() {
return () => { return () => {
configRef.current = null; configRef.current = null;
editorRef.current = null;
modelRef.current = null; modelRef.current = null;
}; };
}); });
@ -127,37 +129,51 @@ function ConfigEditor() {
} }
return ( return (
<div className="absolute bottom-16 left-0 right-0 top-2 md:left-2"> <div className="absolute bottom-2 left-0 right-0 top-2 md:left-2">
<div className="mr-1 justify-between lg:flex"> <div className="relative h-full overflow-hidden">
<Heading as="h2">Config</Heading> <div className="mr-1 flex items-center justify-between">
<div> <Heading as="h2" className="mb-0 ml-1 md:ml-0">
<Button size="sm" className="mx-1" onClick={() => handleCopyConfig()}> Config Editor
Copy Config </Heading>
<div className="flex flex-row gap-1">
<Button
size="sm"
className="flex items-center gap-2"
onClick={() => handleCopyConfig()}
>
<LuCopy className="text-secondary-foreground" />
<span className="hidden md:block">Copy Config</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
className="mx-1" className="flex items-center gap-2"
onClick={() => onHandleSaveConfig("restart")} onClick={() => onHandleSaveConfig("restart")}
> >
Save & Restart <div className="relative size-5">
<LuSave className="absolute left-0 top-0 size-3 text-secondary-foreground" />
<MdOutlineRestartAlt className="absolute size-4 translate-x-1 translate-y-1/2 text-secondary-foreground" />
</div>
<span className="hidden md:block">Save & Restart</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
className="mx-1" className="flex items-center gap-2"
onClick={() => onHandleSaveConfig("saveonly")} onClick={() => onHandleSaveConfig("saveonly")}
> >
Save Only <LuSave className="text-secondary-foreground" />
<span className="hidden md:block">Save Only</span>
</Button> </Button>
</div> </div>
</div> </div>
{error && ( {error && (
<div className="overflow-scroll whitespace-pre-wrap p-4 text-danger"> <div className="mt-2 max-h-[30%] overflow-auto whitespace-pre-wrap border-2 border-muted bg-background_alt p-4 text-sm text-danger md:max-h-full">
{error} {error}
</div> </div>
)} )}
<div ref={configRef} className="mt-2 h-full" /> <div ref={configRef} className="mt-2 h-[calc(100%-2.75rem)]" />
</div>
<Toaster closeButton={true} /> <Toaster closeButton={true} />
</div> </div>
); );