Gitpub/Gitpub-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show inline image previews for binary files

Browse Source 
Add inline image preview support for binary image files in diffs and the file viewer. Frontend: new CSS rules for diff/viewer image panels and macOS window radius, JS templates to render base64 image previews and wire previewMime/previewBase64 into rendering flow, plus applyPlatformChrome to set platform-specific chrome. Backend (Tauri): add base64 and ico deps and expose image preview data (mime + base64) on GitFileDiff and LocalRepoFile; implement mime detection, size-limited preview generation (5MB), .ico → PNG extraction, and integration into get_file_diff and local_repo_file to return previews when available. Also updates icon asset.
This commit is contained in:
Andrew Zambazos
2026-05-13 18:28:48 +12:00
parent 0f3f73be9c
commit 37fc1dc626
6 changed files with 245 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/components.css
+65 -1
View File
@@ -4,10 +4,13 @@
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--radius-window);
background: var(--bg-app);
}
#app[data-platform="macos"] {
border-radius: var(--radius-window);
}
.layout {
display: grid;
grid-template-rows: 48px 1fr;
@@ -998,6 +1001,67 @@
.diff-line-hunk { color: var(--accent); background: var(--accent-subtle); }
.diff-line-meta { color: var(--text-muted); background: rgba(156, 166, 181, 0.06); }
.diff-binary-image-panel {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 200px;
padding: 12px;
}
.diff-image-preview-frame {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
padding: 12px;
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.12);
}
.diff-image-preview {
min-width: 96px;
min-height: 96px;
max-width: 100%;
max-height: min(70vh, 720px);
object-fit: contain;
border-radius: var(--radius-md);
}
.diff-binary-caption {
margin: 0;
padding: 12px;
font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
font-size: 11px;
line-height: 1.5;
color: var(--text-muted);
white-space: pre-wrap;
word-break: break-word;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: rgba(0, 0, 0, 0.15);
}
.viewer-image-preview-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
padding: 16px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-code);
}
.viewer-image-preview {
min-width: 96px;
min-height: 96px;
max-width: 100%;
max-height: min(75vh, 800px);
object-fit: contain;
border-radius: var(--radius-md);
}
/* ── Workflow empty state ─────────────────────────────────────────────────── */
.workflow-empty-state {