admin/ComfyUI-OpenClaw
1
0
Fork 0
mirror of https://github.com/rookiestar28/ComfyUI-OpenClaw.git synced 2026-08-14 00:48:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make png info header scroll with content

Browse Source
This commit is contained in:
rookiestar28
2026-04-08 23:45:06 +08:00
parent dd20639802
commit a44001fcab
2 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/tabs/png_info_tab.js
+26 -27
View File
@@ -164,42 +164,41 @@ export const PngInfoTab = {
render(container) {
container.innerHTML = `
<div class="openclaw-panel">
<div class="openclaw-card" style="border-radius:0;border:none;border-bottom:1px solid var(--openclaw-color-border);">
<div class="openclaw-section-header">PNG Info</div>
<div class="openclaw-error-box" style="display:none"></div>
<div class="openclaw-pnginfo-top">
<div id="pnginfo-dropzone" class="openclaw-pnginfo-dropzone" tabindex="0" role="button" aria-label="PNG Info dropzone">
<input id="pnginfo-file-input" type="file" accept="image/*" hidden />
<div class="openclaw-pnginfo-dropzone-title">Drop an image here</div>
<div class="openclaw-pnginfo-dropzone-copy">Click to browse, or focus this panel and paste an image.</div>
<div class="openclaw-pnginfo-dropzone-actions">
<button type="button" id="pnginfo-select-btn" class="openclaw-btn openclaw-btn-sm openclaw-btn-primary">Choose Image</button>
</div>
</div>
<div class="openclaw-card openclaw-pnginfo-preview-card">
<div class="openclaw-pnginfo-card-header">
<div class="openclaw-section-header" style="margin-bottom:0;border-bottom:none;padding-bottom:0;">Preview</div>
<div id="pnginfo-status" class="openclaw-status">Idle</div>
</div>
<div id="pnginfo-preview-empty" class="openclaw-empty-state">No image loaded yet.</div>
<img id="pnginfo-preview-image" class="openclaw-pnginfo-preview-image" alt="PNG Info preview" style="display:none" />
</div>
</div>
<div class="openclaw-note">
Read-only metadata inspection only. This tab does not send prompt data into other tabs or workflows.
</div>
</div>
<div class="openclaw-scroll-area">
<div class="openclaw-card">
<div class="openclaw-section-header">PNG Info</div>
<div class="openclaw-error-box" style="display:none"></div>
<div class="openclaw-pnginfo-top">
<div id="pnginfo-dropzone" class="openclaw-pnginfo-dropzone" tabindex="0" role="button" aria-label="PNG Info dropzone">
<input id="pnginfo-file-input" type="file" accept="image/*" hidden />
<div class="openclaw-pnginfo-dropzone-title">Drop an image here</div>
<div class="openclaw-pnginfo-dropzone-copy">Click to browse, or focus this panel and paste an image.</div>
<div class="openclaw-pnginfo-dropzone-actions">
<button type="button" id="pnginfo-select-btn" class="openclaw-btn openclaw-btn-sm openclaw-btn-primary">Choose Image</button>
</div>
</div>
<div class="openclaw-card openclaw-pnginfo-preview-card">
<div class="openclaw-pnginfo-card-header">
<div class="openclaw-section-header" style="margin-bottom:0;border-bottom:none;padding-bottom:0;">Preview</div>
<div id="pnginfo-status" class="openclaw-status">Idle</div>
</div>
<div id="pnginfo-preview-empty" class="openclaw-empty-state">No image loaded yet.</div>
<img id="pnginfo-preview-image" class="openclaw-pnginfo-preview-image" alt="PNG Info preview" style="display:none" />
</div>
</div>
<div class="openclaw-note">
Read-only metadata inspection only. This tab does not send prompt data into other tabs or workflows.
</div>
</div>
<div id="pnginfo-empty-state" class="openclaw-empty-state">
Load an image to inspect embedded A1111 or ComfyUI metadata.
</div>
<div id="pnginfo-results" style="display:none;" class="openclaw-split-v">
<div id="pnginfo-summary-card" class="openclaw-card"></div>
<div class="openclaw-grid-2 openclaw-pnginfo-prompts">
<div id="pnginfo-positive"></div>
<div id="pnginfo-negative"></div>
</div>
<div id="pnginfo-summary-card" class="openclaw-card"></div>
<div>
<div class="openclaw-section-header">Raw Metadata</div>
<div id="pnginfo-raw" class="openclaw-split-v"></div>
web/tests/unit/png_info_tab.test.js
+8
View File
@@ -70,6 +70,14 @@ describe("png_info_tab", () => {
expect(apiMock.parsePngInfo).toHaveBeenCalledTimes(1);
});
const scrollArea = container.querySelector(".openclaw-scroll-area");
const firstCard = scrollArea.firstElementChild;
expect(firstCard.querySelector("#pnginfo-dropzone")).toBeTruthy();
expect(firstCard.querySelector("#pnginfo-preview-image")).toBeTruthy();
const results = container.querySelector("#pnginfo-results");
expect(results.firstElementChild.className).toContain("openclaw-pnginfo-prompts");
expect(container.querySelector("#pnginfo-summary-card").textContent).toContain("demoModel");
expect(container.querySelector("#pnginfo-positive").textContent).toContain("portrait lighting");
expect(container.querySelector("#pnginfo-negative").textContent).toContain("lowres");