dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Enhance inline editing visual design and UX

Browse Source 
- Replace harsh white/black input with softer blue-tinted design
- Grid view: light blue background (bg-blue-50) with subtle styling
- List view: improved padding and rounded corners
- Add smooth transitions and focus ring effects
- Enhanced hover states with semi-transparent white overlay
- Better visual feedback for interactive file names
- Tooltip improvements: '(点击重命名)' for user guidance
- More professional and polished appearance
- Consistent with modern design systems
This commit is contained in:
ZacharyZcR
2025-09-16 18:30:49 +08:00
parent bce3fcc41e
commit 86a7ef8914
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx
View File

@@ -535,13 +535,13 @@ export function FileManagerGrid({
onChange={(e) => setEditingName(e.target.value)}
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className="w-full text-xs bg-white text-black px-1 py-0.5 rounded border-2 border-blue-500 text-center"
className="w-full text-xs bg-blue-50 text-gray-900 px-2 py-1 rounded border border-blue-300 text-center shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
onClick={(e) => e.stopPropagation()}
/>
) : (
<p
className="text-xs text-white truncate cursor-pointer"
title={file.name}
className="text-xs text-white truncate cursor-pointer hover:bg-white/10 px-1 py-0.5 rounded transition-colors duration-150"
title={`${file.name} (点击重命名)`}
onClick={(e) => {
// 阻止文件选择事件
if (onStartEdit) {
@@ -600,13 +600,13 @@ export function FileManagerGrid({
onChange={(e) => setEditingName(e.target.value)}
onKeyDown={handleEditKeyDown}
onBlur={handleEditConfirm}
className="w-full text-sm bg-white text-black px-2 py-1 rounded border-2 border-blue-500"
className="w-full text-sm bg-blue-50 text-gray-900 px-3 py-1.5 rounded-md border border-blue-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
onClick={(e) => e.stopPropagation()}
/>
) : (
<p
className="text-sm text-white truncate cursor-pointer"
title={file.name}
className="text-sm text-white truncate cursor-pointer hover:bg-white/10 px-2 py-1 rounded transition-colors duration-150"
title={`${file.name} (点击重命名)`}
onClick={(e) => {
// 阻止文件选择事件
if (onStartEdit) {