mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-08-28 05:27:24 +00:00
Apply missing FCO theming changes from backup branch
From commit 71c63f9a6 'language files, theming, bug fix, Test improvements': Theming Updates: - Convert from Tailwind CSS classes to inline styles for consistent theming - Make Files Changed Overview match TodoList theming (slim and compact) - Simplify formatLineChanges to show only '+X, -Y' format (no translations) - Remove parentheses from count format in summary - Update FileItem to use thinner rows (32px instead of 60px) - Apply compact padding and margins throughout component Visual Changes: - Smaller button sizes and padding for compact look - Consistent inline styling using CSS variables - Better alignment with VS Code theming system - Matches TodoList component styling for unified look 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shawn
Hannes Rudolph
parent
390c500d40
commit
90d9306534
2 changed files with 154 additions and 59 deletions
|
|
@ -179,29 +179,19 @@ const FilesChangedOverview: React.FC = () => {
|
|||
}, [filesChangedEnabled])
|
||||
|
||||
/**
|
||||
* Formats line change counts for display based on file type
|
||||
* Formats line change counts for display - shows only plus/minus numbers
|
||||
* @param file - The file change to format
|
||||
* @returns Formatted string describing the changes
|
||||
* @returns Formatted string with just the line change counts
|
||||
*/
|
||||
const formatLineChanges = (file: FileChange): string => {
|
||||
const added = file.linesAdded || 0
|
||||
const removed = file.linesRemoved || 0
|
||||
|
||||
if (file.type === "create") {
|
||||
return t("file-changes:line_changes.added", { count: added })
|
||||
} else if (file.type === "delete") {
|
||||
return t("file-changes:line_changes.deleted")
|
||||
} else {
|
||||
if (added > 0 && removed > 0) {
|
||||
return t("file-changes:line_changes.added_removed", { added, removed })
|
||||
} else if (added > 0) {
|
||||
return t("file-changes:line_changes.added", { count: added })
|
||||
} else if (removed > 0) {
|
||||
return t("file-changes:line_changes.removed", { count: removed })
|
||||
} else {
|
||||
return t("file-changes:line_changes.modified")
|
||||
}
|
||||
}
|
||||
const parts = []
|
||||
if (added > 0) parts.push(`+${added}`)
|
||||
if (removed > 0) parts.push(`-${removed}`)
|
||||
|
||||
return parts.length > 0 ? parts.join(", ") : ""
|
||||
}
|
||||
|
||||
// Memoize expensive total calculations
|
||||
|
|
@ -222,11 +212,29 @@ const FilesChangedOverview: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="files-changed-overview border border-vscode-panel-border rounded p-3 my-2 bg-vscode-editor-background"
|
||||
data-testid="files-changed-overview">
|
||||
className="files-changed-overview"
|
||||
data-testid="files-changed-overview"
|
||||
style={{
|
||||
border: "1px solid var(--vscode-panel-border)",
|
||||
borderTop: 0,
|
||||
borderRadius: 0,
|
||||
padding: "6px 10px",
|
||||
margin: 0,
|
||||
backgroundColor: "var(--vscode-editor-background)",
|
||||
}}>
|
||||
{/* Collapsible header */}
|
||||
<div
|
||||
className={`flex justify-between items-center ${isCollapsed ? "" : "mb-3 border-b border-vscode-panel-border pb-2"} cursor-pointer select-none`}
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: "0 2px",
|
||||
//marginBottom: isCollapsed ? "0" : "6px",
|
||||
borderBottom: isCollapsed ? "none" : "1px solid var(--vscode-panel-border)",
|
||||
// paddingBottom: "0px",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
}}
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
|
|
@ -244,11 +252,15 @@ const FilesChangedOverview: React.FC = () => {
|
|||
: t("file-changes:accessibility.expanded"),
|
||||
})}
|
||||
title={isCollapsed ? t("file-changes:header.expand") : t("file-changes:header.collapse")}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<span
|
||||
className={`codicon ${isCollapsed ? "codicon-chevron-right" : "codicon-chevron-down"} text-[12px] transition-transform`}
|
||||
className={`codicon ${isCollapsed ? "codicon-chevron-right" : "codicon-chevron-down"}`}
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
transition: "transform 0.2s ease",
|
||||
}}
|
||||
/>
|
||||
<h3 className="m-0 text-sm font-bold" data-testid="files-changed-header">
|
||||
<h3 style={{ margin: 0, fontSize: "14px", fontWeight: "bold" }} data-testid="files-changed-header">
|
||||
{t("file-changes:summary.count_with_changes", {
|
||||
count: files.length,
|
||||
changes: totalChanges,
|
||||
|
|
@ -258,7 +270,7 @@ const FilesChangedOverview: React.FC = () => {
|
|||
|
||||
{/* Action buttons always visible for quick access */}
|
||||
<div
|
||||
className="flex gap-2"
|
||||
style={{ display: "flex", gap: "8px" }}
|
||||
onClick={(e) => e.stopPropagation()} // Prevent collapse toggle when clicking buttons
|
||||
>
|
||||
<button
|
||||
|
|
@ -266,7 +278,16 @@ const FilesChangedOverview: React.FC = () => {
|
|||
disabled={isProcessing}
|
||||
tabIndex={0}
|
||||
data-testid="reject-all-button"
|
||||
className={`bg-vscode-button-secondaryBackground text-vscode-button-secondaryForeground border border-vscode-button-border rounded px-2 py-1 text-xs ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
|
||||
style={{
|
||||
backgroundColor: "var(--vscode-button-secondaryBackground)",
|
||||
color: "var(--vscode-button-secondaryForeground)",
|
||||
border: "none",
|
||||
borderRadius: "3px",
|
||||
padding: "4px 8px",
|
||||
fontSize: "13px",
|
||||
cursor: isProcessing ? "not-allowed" : "pointer",
|
||||
opacity: isProcessing ? 0.6 : 1,
|
||||
}}
|
||||
title={t("file-changes:actions.reject_all")}>
|
||||
{t("file-changes:actions.reject_all")}
|
||||
</button>
|
||||
|
|
@ -275,7 +296,16 @@ const FilesChangedOverview: React.FC = () => {
|
|||
disabled={isProcessing}
|
||||
tabIndex={0}
|
||||
data-testid="accept-all-button"
|
||||
className={`bg-vscode-button-background text-vscode-button-foreground border border-vscode-button-border rounded px-2 py-1 text-xs ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
|
||||
style={{
|
||||
backgroundColor: "var(--vscode-button-background)",
|
||||
color: "var(--vscode-button-foreground)",
|
||||
border: "none",
|
||||
borderRadius: "3px",
|
||||
padding: "4px 8px",
|
||||
fontSize: "13px",
|
||||
cursor: isProcessing ? "not-allowed" : "pointer",
|
||||
opacity: isProcessing ? 0.6 : 1,
|
||||
}}
|
||||
title={t("file-changes:actions.accept_all")}>
|
||||
{t("file-changes:actions.accept_all")}
|
||||
</button>
|
||||
|
|
@ -285,7 +315,14 @@ const FilesChangedOverview: React.FC = () => {
|
|||
{/* Collapsible content area */}
|
||||
{!isCollapsed && (
|
||||
<div
|
||||
className={`max-h-[300px] overflow-y-auto transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0" : "opacity-100"} relative`}
|
||||
style={{
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
transition: "opacity 0.2s ease-in-out",
|
||||
opacity: isCollapsed ? 0 : 1,
|
||||
position: "relative",
|
||||
paddingTop: "8px",
|
||||
}}
|
||||
onScroll={handleScroll}>
|
||||
{shouldVirtualize && (
|
||||
<div style={{ height: totalHeight, position: "relative" }}>
|
||||
|
|
@ -357,41 +394,99 @@ const FileItem: React.FC<FileItemProps> = React.memo(
|
|||
({ file, formatLineChanges, onViewDiff, onAcceptFile, onRejectFile, handleWithDebounce, isProcessing, t }) => (
|
||||
<div
|
||||
data-testid={`file-item-${file.uri}`}
|
||||
className="flex justify-between items-center px-2 py-1.5 mb-1 bg-vscode-list-hoverBackground rounded text-[13px] min-h-[60px]">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs text-vscode-editor-foreground overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "6px 8px",
|
||||
marginBottom: "3px",
|
||||
backgroundColor: "var(--vscode-list-hoverBackground)",
|
||||
borderRadius: "3px",
|
||||
fontSize: "13px",
|
||||
minHeight: "32px", // Thinner rows
|
||||
lineHeight: "1.3",
|
||||
}}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "var(--vscode-editor-font-family)",
|
||||
fontSize: "13px",
|
||||
color: "var(--vscode-editor-foreground)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
{file.uri}
|
||||
</div>
|
||||
<div className="text-[11px] text-vscode-descriptionForeground mt-0.5">
|
||||
{t(`file-changes:file_types.${file.type}`)} • {formatLineChanges(file)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 ml-2">
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onViewDiff(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.view_diff")}
|
||||
data-testid={`diff-${file.uri}`}
|
||||
className={`bg-transparent text-vscode-button-foreground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[50px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
|
||||
{t("file-changes:actions.view_diff")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onRejectFile(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.reject_file")}
|
||||
data-testid={`reject-${file.uri}`}
|
||||
className={`bg-vscode-button-secondaryBackground text-vscode-button-secondaryForeground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[20px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
|
||||
✗
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onAcceptFile(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.accept_file")}
|
||||
data-testid={`accept-${file.uri}`}
|
||||
className={`bg-vscode-button-background text-vscode-button-foreground border border-vscode-button-border rounded px-1.5 py-0.5 text-[11px] min-w-[20px] ${isProcessing ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}>
|
||||
✓
|
||||
</button>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px", marginLeft: "8px" }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "var(--vscode-descriptionForeground)",
|
||||
whiteSpace: "nowrap",
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
{formatLineChanges(file)}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onViewDiff(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.view_diff")}
|
||||
data-testid={`diff-${file.uri}`}
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--vscode-button-foreground)",
|
||||
border: "1px solid var(--vscode-button-border)",
|
||||
borderRadius: "3px",
|
||||
padding: "2px 6px",
|
||||
fontSize: "11px",
|
||||
cursor: isProcessing ? "not-allowed" : "pointer",
|
||||
minWidth: "50px",
|
||||
opacity: isProcessing ? 0.6 : 1,
|
||||
}}>
|
||||
{t("file-changes:actions.view_diff")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onRejectFile(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.reject_file")}
|
||||
data-testid={`reject-${file.uri}`}
|
||||
style={{
|
||||
backgroundColor: "var(--vscode-button-secondaryBackground)",
|
||||
color: "var(--vscode-button-secondaryForeground)",
|
||||
border: "1px solid var(--vscode-button-border)",
|
||||
borderRadius: "3px",
|
||||
padding: "2px 6px",
|
||||
fontSize: "11px",
|
||||
cursor: isProcessing ? "not-allowed" : "pointer",
|
||||
minWidth: "20px",
|
||||
opacity: isProcessing ? 0.6 : 1,
|
||||
}}>
|
||||
✗
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWithDebounce(() => onAcceptFile(file.uri))}
|
||||
disabled={isProcessing}
|
||||
title={t("file-changes:actions.accept_file")}
|
||||
data-testid={`accept-${file.uri}`}
|
||||
style={{
|
||||
backgroundColor: "var(--vscode-button-background)",
|
||||
color: "var(--vscode-button-foreground)",
|
||||
border: "1px solid var(--vscode-button-border)",
|
||||
borderRadius: "3px",
|
||||
padding: "2px 6px",
|
||||
fontSize: "11px",
|
||||
cursor: isProcessing ? "not-allowed" : "pointer",
|
||||
minWidth: "20px",
|
||||
opacity: isProcessing ? 0.6 : 1,
|
||||
}}>
|
||||
✓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"modified": "modified"
|
||||
},
|
||||
"summary": {
|
||||
"count_with_changes": "({{count}}) Files Changed{{changes}}",
|
||||
"count_with_changes": "{{count}} Files Changed{{changes}}",
|
||||
"changes_format": " ({{changes}})"
|
||||
},
|
||||
"accessibility": {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue