administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-01 09:31:14 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make Dropdown look like Select

Browse Source
This commit is contained in:
Dmitry Marchuk 2026-05-23 22:18:09 +03:00
parent df40d9e2b5
commit bf25560067
3 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
View File

@ -24,7 +24,7 @@ import {
useState, useState,
} from "react"; } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { LuCheck, LuExternalLink, LuX } from "react-icons/lu"; import { LuCheck, LuChevronDown, LuExternalLink, LuX } from "react-icons/lu";
import { CiCircleAlert } from "react-icons/ci"; import { CiCircleAlert } from "react-icons/ci";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { toast } from "sonner"; import { toast } from "sonner";
@ -36,12 +36,13 @@ import {
useNotificationTest, useNotificationTest,
} from "@/api/ws"; } from "@/api/ws";
import { import {
Select, DropdownMenu,
SelectTrigger, DropdownMenuContent,
SelectValue, DropdownMenuItem,
SelectContent, DropdownMenuSeparator,
SelectItem, DropdownMenuTrigger,
} from "@/components/ui/select"; } from "@/components/ui/dropdown-menu";
import { selectTriggerClassName } from "@/components/ui/select";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil"; import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { use24HourTime } from "@/hooks/use-date-utils"; import { use24HourTime } from "@/hooks/use-date-utils";
import FilterSwitch from "@/components/filter/FilterSwitch"; import FilterSwitch from "@/components/filter/FilterSwitch";
@ -814,41 +815,41 @@ export function CameraNotificationSwitch({
</div> </div>
{!isSuspended ? ( {!isSuspended ? (
<div className="flex items-center gap-2"> <DropdownMenu>
<Select onValueChange={handleSuspend}> <DropdownMenuTrigger
<SelectTrigger className="w-auto"> className={cn(selectTriggerClassName, "w-auto gap-2")}
<SelectValue >
placeholder={t("notification.suspendTime.suspend")} {t("notification.suspendTime.suspend")}
/> <LuChevronDown className="h-4 w-4 opacity-50" />
</SelectTrigger> </DropdownMenuTrigger>
<SelectContent> <DropdownMenuContent>
<SelectItem value="5"> <DropdownMenuItem onClick={() => handleSuspend("5")}>
{t("notification.suspendTime.5minutes")} {t("notification.suspendTime.5minutes")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="10"> <DropdownMenuItem onClick={() => handleSuspend("10")}>
{t("notification.suspendTime.10minutes")} {t("notification.suspendTime.10minutes")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="30"> <DropdownMenuItem onClick={() => handleSuspend("30")}>
{t("notification.suspendTime.30minutes")} {t("notification.suspendTime.30minutes")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="60"> <DropdownMenuItem onClick={() => handleSuspend("60")}>
{t("notification.suspendTime.1hour")} {t("notification.suspendTime.1hour")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="840"> <DropdownMenuItem onClick={() => handleSuspend("840")}>
{t("notification.suspendTime.12hours")} {t("notification.suspendTime.12hours")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="1440"> <DropdownMenuItem onClick={() => handleSuspend("1440")}>
{t("notification.suspendTime.24hours")} {t("notification.suspendTime.24hours")}
</SelectItem> </DropdownMenuItem>
<SelectItem value="off"> <DropdownMenuItem onClick={() => handleSuspend("off")}>
{t("notification.suspendTime.untilRestart")} {t("notification.suspendTime.untilRestart")}
</SelectItem> </DropdownMenuItem>
</SelectContent> <DropdownMenuSeparator />
</Select> <DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
<Button size="sm" onClick={() => setCustomDialogOpen(true)}> {t("notification.suspendTime.custom")}
{t("notification.suspendTime.custom")} </DropdownMenuItem>
</Button> </DropdownMenuContent>
</div> </DropdownMenu>
) : ( ) : (
<Button <Button
variant="destructive" variant="destructive"

2
web/src/components/menu/LiveContextMenu.tsx
View File

@ -275,7 +275,7 @@ export default function LiveContextMenu({
return ( return (
<div className={cn("w-full", className)}> <div className={cn("w-full", className)}>
<ContextMenu key={camera} onOpenChange={handleOpenChange}> <ContextMenu key={camera} modal={false} onOpenChange={handleOpenChange}>
<ContextMenuTrigger>{children}</ContextMenuTrigger> <ContextMenuTrigger>{children}</ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>
<div className="flex flex-col items-start gap-1 py-1 pl-2"> <div className="flex flex-col items-start gap-1 py-1 pl-2">

8
web/src/components/ui/select.tsx
View File

@ -10,16 +10,16 @@ const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value; const SelectValue = SelectPrimitive.Value;
export const selectTriggerClassName =
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-background_alt [&>span]:line-clamp-1";
const SelectTrigger = React.forwardRef< const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>, React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(selectTriggerClassName, className)}
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-background_alt [&>span]:line-clamp-1",
className,
)}
{...props} {...props}
> >
{children} {children}