UI tweaks (#20687)
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions

* add blurred icon button component

* apply component to explore, face, and classification views

* apply to exports and fix bug where play button was unclickable
This commit is contained in:
Josh Hawkins
2025-10-27 07:44:34 -05:00
committed by GitHub
parent 5ff7a47ba9
commit 893fe79d22
6 changed files with 142 additions and 94 deletions
+8 -12
View File
@@ -5,6 +5,7 @@ import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
import FaceSelectionDialog from "@/components/overlay/FaceSelectionDialog";
import { Button, buttonVariants } from "@/components/ui/button";
import BlurredIconButton from "@/components/button/BlurredIconButton";
import {
AlertDialog,
AlertDialogAction,
@@ -858,20 +859,15 @@ function FaceAttemptGroup({
faceNames={faceNames}
onTrainAttempt={(name) => onTrainAttempt(data, name)}
>
<div className="group relative inline-flex items-center justify-center">
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
<AddFaceIcon className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white" />
</div>
<BlurredIconButton>
<AddFaceIcon className="size-5" />
</BlurredIconButton>
</FaceSelectionDialog>
<Tooltip>
<TooltipTrigger>
<div className="group relative inline-flex items-center justify-center">
<div className="pointer-events-none absolute inset-0 m-auto size-5 scale-95 rounded-full bg-black opacity-0 blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100 group-hover:blur-xl" />
<LuRefreshCw
className="relative z-10 size-5 cursor-pointer text-white/85 hover:text-white"
onClick={() => onReprocess(data)}
/>
</div>
<TooltipTrigger asChild>
<BlurredIconButton onClick={() => onReprocess(data)}>
<LuRefreshCw className="size-5" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("button.reprocessFace")}</TooltipContent>
</Tooltip>