d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-10 23:09:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added animations to git panel

Browse Source
This commit is contained in:
simos
2025-07-12 22:04:08 +00:00
parent 7329f89c96
commit 71ac848d60
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/GitPanel.jsx
View File

@@ -473,7 +473,7 @@ function GitPanel({ selectedProject, isMobile }) {
onClick={() => toggleFileExpanded(filePath)} onClick={() => toggleFileExpanded(filePath)}
> >
<div className={`p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded ${isMobile ? 'mr-1' : 'mr-2'}`}> <div className={`p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 rounded ${isMobile ? 'mr-1' : 'mr-2'}`}>
{isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />} <ChevronRight className={`w-3 h-3 transition-transform duration-200 ease-in-out ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
</div> </div>
<span className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'}`}>{filePath}</span> <span className={`flex-1 truncate ${isMobile ? 'text-xs' : 'text-sm'}`}>{filePath}</span>
<span <span
@@ -489,10 +489,10 @@ function GitPanel({ selectedProject, isMobile }) {
</span> </span>
</div> </div>
</div> </div>
<div className={`bg-gray-50 dark:bg-gray-900 transition-all duration-300 ease-in-out overflow-hidden ${ <div className={`bg-gray-50 dark:bg-gray-900 transition-all duration-400 ease-in-out overflow-hidden ${
isExpanded && diff isExpanded && diff
? 'max-h-[600px] opacity-100' ? 'max-h-[600px] opacity-100 translate-y-0'
: 'max-h-0 opacity-0' : 'max-h-0 opacity-0 -translate-y-1'
}`}> }`}>
{/* Operation header */} {/* Operation header */}
<div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700"> <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700">
@@ -525,10 +525,9 @@ function GitPanel({ selectedProject, isMobile }) {
)} )}
</div> </div>
<div className="max-h-96 overflow-y-auto p-2"> <div className="max-h-96 overflow-y-auto p-2">
{diff.split('\n').map((line, index) => renderDiffLine(line, index))} {diff && diff.split('\n').map((line, index) => renderDiffLine(line, index))}
</div> </div>
</div> </div>
)}
</div> </div>
); );
}; };