administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 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,
} from "react";
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 { Link } from "react-router-dom";
import { toast } from "sonner";
@ -36,12 +36,13 @@ import {
useNotificationTest,
} from "@/api/ws";
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select";
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { selectTriggerClassName } from "@/components/ui/select";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { use24HourTime } from "@/hooks/use-date-utils";
import FilterSwitch from "@/components/filter/FilterSwitch";
@ -814,41 +815,41 @@ export function CameraNotificationSwitch({
</div>
{!isSuspended ? (
<div className="flex items-center gap-2">
<Select onValueChange={handleSuspend}>
<SelectTrigger className="w-auto">
<SelectValue
placeholder={t("notification.suspendTime.suspend")}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="5">
{t("notification.suspendTime.5minutes")}
</SelectItem>
<SelectItem value="10">
{t("notification.suspendTime.10minutes")}
</SelectItem>
<SelectItem value="30">
{t("notification.suspendTime.30minutes")}
</SelectItem>
<SelectItem value="60">
{t("notification.suspendTime.1hour")}
</SelectItem>
<SelectItem value="840">
{t("notification.suspendTime.12hours")}
</SelectItem>
<SelectItem value="1440">
{t("notification.suspendTime.24hours")}
</SelectItem>
<SelectItem value="off">
{t("notification.suspendTime.untilRestart")}
</SelectItem>
</SelectContent>
</Select>
<Button size="sm" onClick={() => setCustomDialogOpen(true)}>
{t("notification.suspendTime.custom")}
</Button>
</div>
<DropdownMenu>
<DropdownMenuTrigger
className={cn(selectTriggerClassName, "w-auto gap-2")}
>
{t("notification.suspendTime.suspend")}
<LuChevronDown className="h-4 w-4 opacity-50" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => handleSuspend("5")}>
{t("notification.suspendTime.5minutes")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("10")}>
{t("notification.suspendTime.10minutes")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("30")}>
{t("notification.suspendTime.30minutes")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("60")}>
{t("notification.suspendTime.1hour")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("840")}>
{t("notification.suspendTime.12hours")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("1440")}>
{t("notification.suspendTime.24hours")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleSuspend("off")}>
{t("notification.suspendTime.untilRestart")}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
{t("notification.suspendTime.custom")}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<Button
variant="destructive"

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

@ -275,7 +275,7 @@ export default function LiveContextMenu({
return (
<div className={cn("w-full", className)}>
<ContextMenu key={camera} onOpenChange={handleOpenChange}>
<ContextMenu key={camera} modal={false} onOpenChange={handleOpenChange}>
<ContextMenuTrigger>{children}</ContextMenuTrigger>
<ContextMenuContent>
<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;
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<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"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,
)}
className={cn(selectTriggerClassName, className)}
{...props}
>
{children}