Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misc UI fixes #11237

Merged
merged 3 commits into from
May 4, 2024
Merged

Misc UI fixes #11237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f01581
add close button to all toasters
hawkeye217 May 4, 2024
da9a2fa
check if persistent options are loaded
hawkeye217 May 4, 2024
928ed9a
add id to prevent message duplication in bottom bar
hawkeye217 May 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion web/src/components/filter/CameraGroupSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,11 @@ function NewGroupDialog({

return (
<>
<Toaster className="toaster group z-[100]" position="top-center" />
<Toaster
className="toaster group z-[100]"
position="top-center"
closeButton={true}
/>
<Overlay
open={open}
onOpenChange={(open) => {
Expand Down
9 changes: 7 additions & 2 deletions web/src/components/settings/MasksAndZones.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,12 @@ export default function MasksAndZones({
setAllPolygons([...(editingPolygons ?? [])]);
setHoveredPolygonIndex(null);
setUnsavedChanges(false);
addMessage("masks_zones", "Restart required (masks/zones changed)");
addMessage(
"masks_zones",
"Restart required (masks/zones changed)",
undefined,
"masks_zones",
);
}, [editingPolygons, setUnsavedChanges, addMessage]);

useEffect(() => {
Expand Down Expand Up @@ -366,7 +371,7 @@ export default function MasksAndZones({
<>
{cameraConfig && editingPolygons && (
<div className="flex flex-col md:flex-row size-full">
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
{editPane == "zone" && (
<ZoneEditPane
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/settings/MotionMaskEditPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export default function MotionMaskEditPane({

return (
<>
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Motion Mask
</Heading>
Expand Down
9 changes: 7 additions & 2 deletions web/src/components/settings/MotionTuner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,12 @@ export default function MotionTuner({

useEffect(() => {
if (changedValue) {
addMessage("motion_tuner", "Unsaved motion tuner changes");
addMessage(
"motion_tuner",
"Unsaved motion tuner changes",
undefined,
"motion_tuner",
);
} else {
clearMessages("motion_tuner");
}
Expand All @@ -169,7 +174,7 @@ export default function MotionTuner({

return (
<div className="flex flex-col md:flex-row size-full">
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<Heading as="h3" className="my-2">
Motion Detection Tuner
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/settings/ObjectMaskEditPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export default function ObjectMaskEditPane({

return (
<>
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Object Mask
</Heading>
Expand Down
29 changes: 16 additions & 13 deletions web/src/components/settings/ObjectSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function ObjectSettings({
},
];

const [options, setOptions] = usePersistence<Options>(
const [options, setOptions, optionsLoaded] = usePersistence<Options>(
`${selectedCamera}-feed`,
emptyObject,
);
Expand All @@ -87,17 +87,20 @@ export default function ObjectSettings({

const memoizedObjects = useDeepMemo(objects);

const searchParams = useMemo(
() =>
new URLSearchParams(
Object.keys(options || {}).reduce((memo, key) => {
//@ts-expect-error we know this is correct
memo.push([key, options[key] === true ? "1" : "0"]);
return memo;
}, []),
),
[options],
);
const searchParams = useMemo(() => {
if (!optionsLoaded) {
return new URLSearchParams();
}

const params = new URLSearchParams(
Object.keys(options || {}).reduce((memo, key) => {
//@ts-expect-error we know this is correct
memo.push([key, options[key] === true ? "1" : "0"]);
return memo;
}, []),
);
return params;
}, [options, optionsLoaded]);

useEffect(() => {
document.title = "Object Settings - Frigate";
Expand All @@ -109,7 +112,7 @@ export default function ObjectSettings({

return (
<div className="flex flex-col md:flex-row size-full">
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
<Heading as="h3" className="my-2">
Debug
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/settings/PolygonItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export default function PolygonItem({

return (
<>
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />

<div
key={index}
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/settings/ZoneEditPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ export default function ZoneEditPane({

return (
<>
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Zone
</Heading>
Expand Down
2 changes: 2 additions & 0 deletions web/src/components/ui/sonner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
closeButton:
"group-[.toast]:bg-secondary border-primary border-[1px]",
success:
"group toast group-[.toaster]:bg-success group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
error:
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/ConfigEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function ConfigEditor() {
)}

<div ref={configRef} className="h-full mt-2" />
<Toaster />
<Toaster closeButton={true} />
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/Logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ function Logs() {

return (
<div className="size-full p-2 flex flex-col">
<Toaster position="top-center" />
<Toaster position="top-center" closeButton={true} />
<LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />

<div className="flex justify-between items-center">
Expand Down
2 changes: 1 addition & 1 deletion web/src/views/events/EventView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export default function EventView({

return (
<div className="py-2 flex flex-col size-full">
<Toaster />
<Toaster closeButton={true} />
<div className="h-11 mb-2 pl-3 pr-2 relative flex justify-between items-center">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
Expand Down
2 changes: 1 addition & 1 deletion web/src/views/events/RecordingView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ export function RecordingView({

return (
<div ref={contentRef} className="size-full pt-2 flex flex-col">
<Toaster />
<Toaster closeButton={true} />
<div
className={`w-full h-11 mb-2 px-2 relative flex items-center justify-between`}
>
Expand Down
Loading