administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-28 19:18:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

use icon only on mobile

Browse Source
This commit is contained in:
Josh Hawkins 2026-03-12 08:57:57 -05:00
parent 5a1ec5d729
commit 0f735bea37
5 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -1157,7 +1157,7 @@ export function ConfigSection({
<Badge <Badge
variant="secondary" variant="secondary"
className={cn( className={cn(
"cursor-default border-2 text-xs text-primary-variant", "cursor-default border-2 text-center text-xs text-primary-variant",
overrideSource === "profile" && profileBorderColor overrideSource === "profile" && profileBorderColor
? profileBorderColor ? profileBorderColor
: "border-selected", : "border-selected",

42
web/src/components/settings/ProfileSectionDropdown.tsx
View File

@ -1,5 +1,6 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Check, ChevronDown } from "lucide-react"; import { Check, ChevronDown } from "lucide-react";
import { LuLayers } from "react-icons/lu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { getProfileColor } from "@/utils/profileColors"; import { getProfileColor } from "@/utils/profileColors";
import { import {
@ -17,6 +18,8 @@ type ProfileSectionDropdownProps = {
editingProfile: string | null; editingProfile: string | null;
hasProfileData: (profileName: string) => boolean; hasProfileData: (profileName: string) => boolean;
onSelectProfile: (profileName: string | null) => void; onSelectProfile: (profileName: string | null) => void;
/** When true, show only an icon as the trigger (for mobile) */
iconOnly?: boolean;
}; };
export function ProfileSectionDropdown({ export function ProfileSectionDropdown({
@ -25,6 +28,7 @@ export function ProfileSectionDropdown({
editingProfile, editingProfile,
hasProfileData, hasProfileData,
onSelectProfile, onSelectProfile,
iconOnly = false,
}: ProfileSectionDropdownProps) { }: ProfileSectionDropdownProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings"]);
@ -39,22 +43,28 @@ export function ProfileSectionDropdown({
return ( return (
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="h-9 gap-2 font-normal"> {iconOnly ? (
{editingProfile ? ( <Button variant="outline" size="sm">
<> <LuLayers className="size-4" />
<span </Button>
className={cn( ) : (
"h-2 w-2 shrink-0 rounded-full", <Button variant="outline" className="h-9 gap-2 font-normal">
activeColor?.dot, {editingProfile ? (
)} <>
/> <span
{editingFriendlyName} className={cn(
</> "h-2 w-2 shrink-0 rounded-full",
) : ( activeColor?.dot,
t("profiles.baseConfig", { ns: "views/settings" }) )}
)} />
<ChevronDown className="h-3 w-3 opacity-50" /> {editingFriendlyName}
</Button> </>
) : (
t("profiles.baseConfig", { ns: "views/settings" })
)}
<ChevronDown className="h-3 w-3 opacity-50" />
</Button>
)}
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-[180px]"> <DropdownMenuContent align="end" className="min-w-[180px]">
<DropdownMenuItem onClick={() => onSelectProfile(null)}> <DropdownMenuItem onClick={() => onSelectProfile(null)}>

1
web/src/pages/Settings.tsx
View File

@ -1648,6 +1648,7 @@ export default function Settings() {
profile, profile,
) )
} }
iconOnly
/> />
)} )}
<CameraSelectButton <CameraSelectButton

2
web/src/views/settings/ProfilesView.tsx
View File

@ -409,7 +409,7 @@ export default function ProfilesView({
})} })}
</SelectContent> </SelectContent>
</Select> </Select>
{activating && <ActivityIndicator className="w-auto" size={18} />} {activating && <ActivityIndicator className="size-4" />}
</div> </div>
)} )}
<Button <Button

2
web/src/views/settings/SingleSectionPage.tsx
View File

@ -167,7 +167,7 @@ export function SingleSectionPage({
<Badge <Badge
variant="secondary" variant="secondary"
className={cn( className={cn(
"cursor-default border-2 text-xs text-primary-variant", "cursor-default border-2 text-center text-xs text-primary-variant",
sectionStatus.overrideSource === "profile" && sectionStatus.overrideSource === "profile" &&
profileColor profileColor
? profileColor.border ? profileColor.border