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

Better layout for uploading thumbnails

Browse Source
This commit is contained in:
johnqiao 2023-11-24 19:44:58 -07:00
parent e32072ab34
commit bb2a2ece88
1 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,9 @@ const sectionStyle = {
padding: 0, padding: 0,
borderRadius: "8px", borderRadius: "8px",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)", boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
display: "flex",
flexDirection: "column",
justifyContent: "center",
}; };
export class OpenArtShareDialog extends ComfyDialog { export class OpenArtShareDialog extends ComfyDialog {
@ -109,7 +112,7 @@ export class OpenArtShareDialog extends ComfyDialog {
const labelStyle = { const labelStyle = {
color: "#f8f8f8", color: "#f8f8f8",
display: "block", display: "block",
margin: "10px 0", margin: "10px 0 0 0",
fontWeight: "bold", fontWeight: "bold",
textDecoration: "none", textDecoration: "none",
}; };
@ -157,7 +160,7 @@ export class OpenArtShareDialog extends ComfyDialog {
// preview image // preview image
this.previewImage = $el("img", { this.previewImage = $el("img", {
src: "", src: "",
style: { maxWidth: "100%", maxHeight: "100px", display: "none" }, style: { width: "100%", maxHeight: "100px", objectFit: "contain", display: "none" },
}); });
this.keyInput = $el("input", { this.keyInput = $el("input", {
@ -186,8 +189,7 @@ export class OpenArtShareDialog extends ComfyDialog {
style: { style: {
'text-align': 'center', 'text-align': 'center',
color: 'white', color: 'white',
padding: '10px', margin: '0 0 10px 0',
'margin-bottom': '10px',
} }
}); });
@ -222,15 +224,16 @@ export class OpenArtShareDialog extends ComfyDialog {
// Account Section // Account Section
const accountSection = $el("div", { style: sectionStyle }, [ const accountSection = $el("div", { style: sectionStyle }, [
$el("label", { style: labelStyle }, ["OpenArt API Key"]), $el("label", { style: labelStyle }, ["1️⃣ OpenArt API Key"]),
this.keyInput, this.keyInput,
]); ]);
// Output Upload Section // Output Upload Section
const outputUploadSection = $el("div", { style: sectionStyle }, [ const outputUploadSection = $el("div", { style: sectionStyle }, [
$el("label", { style: labelStyle }, ["Upload Image/Thumbnail (Required)"]), $el("label", { style: {...labelStyle, margin: "10px 0 0 0"} }, ["2️⃣ Image/Thumbnail (Required)"]),
this.uploadImagesInput, $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,
]); ]);
// Outputs Section // Outputs Section
@ -240,7 +243,7 @@ export class OpenArtShareDialog extends ComfyDialog {
// Additional Inputs Section // Additional Inputs Section
const additionalInputsSection = $el("div", { style: sectionStyle }, [ const additionalInputsSection = $el("div", { style: sectionStyle }, [
$el("label", { style: labelStyle }, ["Workflow Information"]), $el("label", { style: labelStyle }, ["3️⃣ Workflow Information"]),
this.NameInput, this.NameInput,
this.descriptionInput, this.descriptionInput,
]); ]);
@ -562,7 +565,7 @@ export class OpenArtShareDialog extends ComfyDialog {
id: "selectOutput-Options", id: "selectOutput-Options",
style: { style: {
'overflow-y': 'scroll', 'overflow-y': 'scroll',
'max-height': '250px', 'max-height': '200px',
'display': 'grid', 'display': 'grid',
'grid-template-columns': 'repeat(auto-fit, minmax(100px, 1fr))', 'grid-template-columns': 'repeat(auto-fit, minmax(100px, 1fr))',
@ -666,29 +669,17 @@ export class OpenArtShareDialog extends ComfyDialog {
}) })
); );
const header = $el("div", const header =
{
textContent: "Or choose an output below",
fontSize: '15px',
color: "white",
style: {
...sectionStyle,
color: 'white',
},
},
[
$el("p", { $el("p", {
textContent: "Scroll to see all", textContent: this.radioButtons.length === 0 ? "Queue Prompt to see the outputs" : "Outputs (scroll to see all)",
size: 2, size: 2,
color: "white", color: "white",
style: { style: {
color: 'white', color: 'white',
margin: '5px 0', margin: '0 0 5px 0',
fontSize: '12px', fontSize: '12px',
}, },
}, []) }, [])
]
);
this.outputsSection.innerHTML = ""; this.outputsSection.innerHTML = "";
this.outputsSection.appendChild(header); this.outputsSection.appendChild(header);
this.outputsSection.appendChild(new_radio_buttons); this.outputsSection.appendChild(new_radio_buttons);