awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 15:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4378 from Infisical/animation-for-commit-popover

Browse Source 
improvement(frontend): make commit popover animated
This commit is contained in:
Scott Wilson
2025-08-19 18:11:13 +08:00
committed by GitHub
parent 2389c64e69 b986ff9a21
commit 7748e03612
1 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+55 -40
View File
@@ -8,6 +8,7 @@ import {
faSave faSave
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, motion } from "framer-motion";
import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2"; import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
import { PendingAction } from "@app/hooks/api/secretFolders/types"; import { PendingAction } from "@app/hooks/api/secretFolders/types";
@@ -302,47 +303,61 @@ export const CommitForm: React.FC<CommitFormProps> = ({
<> <>
{/* Floating Panel */} {/* Floating Panel */}
{!isModalOpen && ( {!isModalOpen && (
<div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl lg:left-auto lg:translate-x-0"> <div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center lg:left-auto lg:translate-x-0">
<div className="flex items-center justify-between p-4"> <AnimatePresence mode="wait">
{/* Left Content */} <motion.div
<div className="flex-1"> key="commit-panel"
{/* Header */} transition={{ duration: 0.3 }}
<div className="flex items-center gap-2"> initial={{ opacity: 0, translateY: 30 }}
<div className="h-2 w-2 rounded-full bg-yellow-500" /> animate={{ opacity: 1, translateY: 0 }}
<span className="font-medium text-mineshaft-100">Pending Changes</span> exit={{ opacity: 0, translateY: -30 }}
<Badge variant="primary" className="text-xs"> >
{totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""} <div className="rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl">
</Badge> <div className="flex items-center justify-between p-4">
{/* Left Content */}
<div className="flex-1">
{/* Header */}
<div className="flex items-center gap-2">
<div className="h-2 w-2 rounded-full bg-yellow-500" />
<span className="font-medium text-mineshaft-100">Pending Changes</span>
<Badge variant="primary" className="text-xs">
{totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
</Badge>
</div>
{/* Description */}
<p className="text-sm leading-5 text-mineshaft-400">
Review pending changes and commit them to apply the updates.
</p>
</div>
{/* Right Buttons */}
<div className="ml-6 mt-0.5 flex items-center gap-3">
<Button
size="sm"
onClick={() =>
clearAllPendingChanges({ workspaceId, environment, secretPath })
}
isDisabled={totalChangesCount === 0}
variant="outline_bg"
className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
>
Discard
</Button>
<Button
variant="solid"
leftIcon={<FontAwesomeIcon icon={faSave} />}
onClick={() => setIsModalOpen(true)}
isDisabled={totalChangesCount === 0}
className="px-6"
>
Save Changes
</Button>
</div>
</div>
</div> </div>
</motion.div>
{/* Description */} </AnimatePresence>
<p className="text-sm leading-5 text-mineshaft-400">
Review pending changes and commit them to apply the updates.
</p>
</div>
{/* Right Buttons */}
<div className="ml-6 mt-0.5 flex items-center gap-3">
<Button
size="sm"
onClick={() => clearAllPendingChanges({ workspaceId, environment, secretPath })}
isDisabled={totalChangesCount === 0}
variant="outline_bg"
className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
>
Discard
</Button>
<Button
variant="solid"
leftIcon={<FontAwesomeIcon icon={faSave} />}
onClick={() => setIsModalOpen(true)}
isDisabled={totalChangesCount === 0}
className="px-6"
>
Save Changes
</Button>
</div>
</div>
</div> </div>
)} )}