mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-04-01 01:17:00 +02:00
Clean up config editor (#11474)
* clean up config editor * remove unneeded size
This commit is contained in:
parent
cc3bbcc303
commit
910c85b1c0
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user