wangbo/ComfyUI-Manager
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI-Manager.git synced 2025-12-22 12:50:50 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: updated share UI

Browse Source
This commit is contained in:
pingren 2023-11-17 15:32:30 +08:00
parent 06307b75b3
commit bc6083647a
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,27 @@ import { api } from "../../scripts/api.js"
import { ComfyDialog, $el } from "../../scripts/ui.js"; import { ComfyDialog, $el } from "../../scripts/ui.js";
const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key"; const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key";
const DEFAULT_HOMEPAGE_URL = "https://openart.ai/workflows/dev?developer=true";
const style = `
.openart-share-dialog a {
color: #f8f8f8;
}
.openart-share-dialog a:hover {
color: #007bff;
}
`;
export class OpenArtShareDialog extends ComfyDialog { export class OpenArtShareDialog extends ComfyDialog {
static instance = null; static instance = null;
constructor() { constructor() {
super(); super();
this.element = $el("div.comfy-modal", { $el("style", {
textContent: style,
parent: document.head,
});
this.element = $el("div.comfy-modal.openart-share-dialog", {
parent: document.body, style: { parent: document.body, style: {
'overflow-y': "auto", 'overflow-y': "auto",
} }
@ -45,12 +59,10 @@ export class OpenArtShareDialog extends ComfyDialog {
boxSizing: 'border-box' boxSizing: 'border-box'
}; };
const headerLabelStyle = { const hyperLinkStyle = {
color: "#f8f8f8",
display: 'block', display: 'block',
marginBottom: '15px', marginBottom: '15px',
fontWeight: 'bold', fontWeight: 'bold',
textDecoration: 'none',
fontSize: '20px', fontSize: '20px',
}; };
@ -94,8 +106,8 @@ export class OpenArtShareDialog extends ComfyDialog {
this.keyInput = $el("input", { type: 'text', placeholder: "Copy & paste your API key", style: inputStyle }) this.keyInput = $el("input", { type: 'text', placeholder: "Copy & paste your API key", style: inputStyle })
// Account Section // Account Section
const AccountSection = $el("div", { style: sectionStyle }, [ const AccountSection = $el("div", { style: sectionStyle }, [
$el("a", { style: headerLabelStyle, href: "https://openart.ai/workflows" }, ["Check out 1000+ workflows others have uploaded."]), $el("a", { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL }, ["Check out 1000+ workflows others have uploaded."]),
$el("a", { style: headerLabelStyle, href: "https://openart.ai/workflows" }, ["You can get API key at https://openart.ai/"]), $el("a", { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL }, ["You can get API key at here."]),
$el("label", { style: labelStyle }, ["OpenArt API Key"]), $el("label", { style: labelStyle }, ["OpenArt API Key"]),
this.keyInput, this.keyInput,
]); ]);
@ -106,7 +118,7 @@ export class OpenArtShareDialog extends ComfyDialog {
this.uploadImagesInput, this.uploadImagesInput,
this.previewImage, this.previewImage,
$el("label", { style: labelStyle }, ["Workflow Information"]), $el("label", { style: labelStyle }, ["Workflow Information"]),
$el("input", { type: "text", placeholder: "Title (required)", style: inputStyle }), $el("input", { type: "text", placeholder: "Name (required)", style: inputStyle }),
$el("textarea", { placeholder: "Description (optional)", style: { $el("textarea", { placeholder: "Description (optional)", style: {
...inputStyle, ...inputStyle,
minHeight: '100px', minHeight: '100px',