xinyun/ComfyUI-Manager
1
0
Fork 0
mirror of https://git.datalinker.icu/ltdrdata/ComfyUI-Manager synced 2025-12-24 21:44:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update the style when switching between upload thumbnail and select output

Browse Source
This commit is contained in:
johnqiao 2023-11-25 02:05:56 -07:00
parent e6f9027015
commit 33293bd0a6
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
js/comfyui-share-openart.js
View File

@ -153,6 +153,11 @@ export class OpenArtShareDialog extends ComfyDialog {
ele.checked = false; ele.checked = false;
ele.parentElement.classList.remove("checked"); ele.parentElement.classList.remove("checked");
}); });
// Add the opacity style toggle here to indicate that they only need
// to upload one image or choose one from the outputs.
this.outputsSection.style.opacity = 0.35;
this.uploadImagesInput.style.opacity = 1;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}); });
@ -160,7 +165,13 @@ export class OpenArtShareDialog extends ComfyDialog {
// preview image // preview image
this.previewImage = $el("img", { this.previewImage = $el("img", {
src: "", src: "",
style: { width: "100%", maxHeight: "100px", objectFit: "contain", display: "none" }, style: {
width: "100%",
maxHeight: "100px",
objectFit: "contain",
display: "none",
marginTop: '10px',
},
}); });
this.keyInput = $el("input", { this.keyInput = $el("input", {
@ -231,7 +242,6 @@ export class OpenArtShareDialog extends ComfyDialog {
// Output Upload Section // Output Upload Section
const outputUploadSection = $el("div", { style: sectionStyle }, [ const outputUploadSection = $el("div", { style: sectionStyle }, [
$el("label", { style: {...labelStyle, margin: "10px 0 0 0"} }, ["2️⃣ Image/Thumbnail (Required)"]), $el("label", { style: {...labelStyle, margin: "10px 0 0 0"} }, ["2️⃣ Image/Thumbnail (Required)"]),
$el("div", { style: { ...labelStyle, margin: "5px 0 10px 0", fontSize: '12px', fontWeight: "normal"} }, ["Upload or choose one from the outputs"]),
this.previewImage, this.previewImage,
this.uploadImagesInput, this.uploadImagesInput,
]); ]);
@ -644,6 +654,11 @@ export class OpenArtShareDialog extends ComfyDialog {
this.previewImage.style.display = "block"; this.previewImage.style.display = "block";
this.selectedFile = file; this.selectedFile = file;
}) })
// Add the opacity style toggle here to indicate that they only need
// to upload one image or choose one from the outputs.
this.outputsSection.style.opacity = 1;
this.uploadImagesInput.style.opacity = 0.35;
}; };
if (radio_button.checked) { if (radio_button.checked) {
@ -655,6 +670,10 @@ export class OpenArtShareDialog extends ComfyDialog {
this.previewImage.style.display = "block"; this.previewImage.style.display = "block";
this.selectedFile = file; this.selectedFile = file;
}) })
// Add the opacity style toggle here to indicate that they only need
// to upload one image or choose one from the outputs.
this.outputsSection.style.opacity = 1;
this.uploadImagesInput.style.opacity = 0.35;
} }
this.radioButtons.push(radio_button); this.radioButtons.push(radio_button);
@ -675,7 +694,7 @@ export class OpenArtShareDialog extends ComfyDialog {
const header = const header =
$el("p", { $el("p", {
textContent: this.radioButtons.length === 0 ? "Queue Prompt to see the outputs" : "Outputs (scroll to see all)", textContent: this.radioButtons.length === 0 ? "Queue Prompt to see the outputs" : "Or choose one from the outputs (scroll to see all)",
size: 2, size: 2,
color: "white", color: "white",
style: { style: {