change desktop and mobile edit camera groups icon to pencil and add desktop tooltip

This commit is contained in:
Josh Hawkins 2026-06-04 10:02:31 -05:00
parent b3f7aa124b
commit 9107c9581d
2 changed files with 21 additions and 9 deletions

View File

@ -5,6 +5,7 @@
"showAll": "Show all camera groups", "showAll": "Show all camera groups",
"showLess": "Show less", "showLess": "Show less",
"edit": "Edit Camera Group", "edit": "Edit Camera Group",
"editGroups": "Edit Camera Groups",
"delete": { "delete": {
"label": "Delete Camera Group", "label": "Delete Camera Group",
"confirm": { "confirm": {

View File

@ -283,7 +283,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
afterSelect?.(); afterSelect?.();
}} }}
> >
<LuPlus className="size-5 text-primary" /> <LuPencil className="size-5 text-primary" />
</Button>, </Button>,
); );
} }
@ -366,14 +366,25 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
})} })}
{isAdmin && ( {isAdmin && (
<Button <Tooltip open={tooltip == "edit"}>
className="bg-secondary text-muted-foreground" <TooltipTrigger asChild>
aria-label={t("group.add")} <Button
size="xs" className="bg-secondary text-muted-foreground"
onClick={() => setAddGroup(true)} aria-label={t("group.editGroups")}
> size="xs"
<LuPlus className="size-4 text-primary" /> onClick={() => setAddGroup(true)}
</Button> onMouseEnter={() => showTooltip("edit")}
onMouseLeave={() => showTooltip(undefined)}
>
<LuPencil className="size-4 text-primary" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
{t("group.editGroups")}
</TooltipContent>
</TooltipPortal>
</Tooltip>
)} )}
</div> </div>
) : ( ) : (