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

use grid for layout

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-31 13:38:36 -06:00
parent c136eaf5e9
commit e13d4a9aba
1 changed files with 230 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/views/settings/NotificationsSettingsView.tsx
View File

@ -284,6 +284,8 @@ export default function NotificationView({
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
<div className="col-span-1">
<Heading as="h3" className="my-2"> <Heading as="h3" className="my-2">
Notification Settings Notification Settings
</Heading> </Heading>
@ -291,8 +293,8 @@ export default function NotificationView({
<div className="max-w-6xl"> <div className="max-w-6xl">
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant"> <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
<p> <p>
Frigate can natively send push notifications to your device when Frigate can natively send push notifications to your device
it is running in the browser or installed as a PWA. when it is running in the browser or installed as a PWA.
</p> </p>
<div className="flex items-center text-primary"> <div className="flex items-center text-primary">
<Link <Link
@ -327,8 +329,8 @@ export default function NotificationView({
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
Entering a valid email is required, as this is used by the Entering a valid email is required, as this is used by
push server in case problems occur. the push server in case problems occur.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -374,7 +376,10 @@ export default function NotificationView({
setChangedValue(true); setChangedValue(true);
let newCameras; let newCameras;
if (checked) { if (checked) {
newCameras = [...field.value, camera.name]; newCameras = [
...field.value,
camera.name,
];
} else { } else {
newCameras = field.value?.filter( newCameras = field.value?.filter(
(value) => value !== camera.name, (value) => value !== camera.name,
@ -401,7 +406,7 @@ export default function NotificationView({
)} )}
/> />
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]"> <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
<Button <Button
className="flex flex-1" className="flex flex-1"
aria-label="Cancel" aria-label="Cancel"
@ -429,12 +434,14 @@ export default function NotificationView({
</div> </div>
</form> </form>
</Form> </Form>
</div>
<div className="col-span-1">
<div className="mt-4 gap-2 space-y-6"> <div className="mt-4 gap-2 space-y-6">
<div className="space-y-3"> <div className="space-y-3">
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary md:hidden" />
<Heading as="h4" className="my-2"> <Heading as="h4" className="my-2">
Register and Test Device-Specific Settings
</Heading> </Heading>
<Button <Button
aria-label="Register or unregister notifications for this device" aria-label="Register or unregister notifications for this device"
@ -454,7 +461,8 @@ export default function NotificationView({
subscribeToNotifications(registration); subscribeToNotifications(registration);
} else { } else {
setTimeout( setTimeout(
() => subscribeToNotifications(registration), () =>
subscribeToNotifications(registration),
1000, 1000,
); );
} }
@ -468,7 +476,10 @@ export default function NotificationView({
pushSubscription?.unsubscribe(); pushSubscription?.unsubscribe();
registration.unregister(); registration.unregister();
setRegistration(null); setRegistration(null);
removeMessage("notification_settings", "registration"); removeMessage(
"notification_settings",
"registration",
);
}); });
} }
}} }}
@ -490,13 +501,13 @@ export default function NotificationView({
<div className="space-y-3"> <div className="space-y-3">
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2"> <Heading as="h4" className="my-2">
Suspend Notifications Global Settings
</Heading> </Heading>
<div className="max-w-xl"> <div className="max-w-xl">
<div className="mb-5 mt-2 flex flex-col gap-2 text-sm text-primary-variant"> <div className="mb-5 mt-2 flex flex-col gap-2 text-sm text-primary-variant">
<p> <p>
Temporarily suspend notifications for specific cameras on Temporarily suspend notifications for specific cameras
all registered devices. on all registered devices.
</p> </p>
</div> </div>
</div> </div>
@ -518,6 +529,8 @@ export default function NotificationView({
)} )}
</div> </div>
</div> </div>
</div>
</div>
</> </>
); );
} }