chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tweak ui styles

Browse Source
This commit is contained in:
bennykok 2024-11-13 17:24:11 +09:00
parent 2bd8b23c60
commit 603223741a
1 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web-plugin/index.js
View File

@ -4,6 +4,39 @@ import { ComfyWidgets, LGraphNode } from "./widgets.js";
import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.25";
import { ComfyDeploy } from "https://esm.sh/comfydeploy@0.0.19-beta.30";
const styles = `
.comfydeploy-menu-item {
background: linear-gradient(to right, rgba(74, 144, 226, 0.9), rgba(103, 178, 111, 0.9)) !important;
color: white !important;
position: relative !important;
padding-left: 20px !important;
}
.comfydeploy-menu-item:hover {
filter: brightness(1.1) !important;
cursor: pointer !important;
}
.comfydeploy-menu-item::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background-image: url('https://www.comfydeploy.com/icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
`;
// Add stylesheet to document
const styleSheet = document.createElement("style");
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg>`;
function sendEventToCD(event, data) {
@ -188,15 +221,14 @@ function convertToInput(node, widget, config) {
console.log(app.graph);
app.graph.add(inputNode);
const links = app.graph.links
const links = app.graph.links;
console.log(links);
currentOutputsLinks.forEach((link) => {
const llink = links[link]
const llink = links[link];
console.log(links[link]);
inputNode.connect(0, llink.target_id, llink.target_slot)
inputNode.connect(0, llink.target_id, llink.target_slot);
// const link = graph.links[link];
// console.log(link);
// inputNode.connect(0, )
@ -398,11 +430,12 @@ const ext = {
];
if (isConvertibleWidget(w, config)) {
toInput.push({
content: `Convert ${w.name} to input`,
content: `Convert ${w.name} to external input`,
callback: /* @__PURE__ */ __name(
() => convertToInput(this, w, config),
"callback",
),
className: "comfydeploy-menu-item",
});
}
}
@ -417,12 +450,14 @@ const ext = {
options.splice(
0,
0,
{
content: "[ComfyDeploy] Convert to External Input",
submenu: {
options: toInput,
},
},
// {
// content: "[ComfyDeploy] Convert to External Input",
// submenu: {
// options: toInput,
// },
// className: "comfydeploy-menu-item"
// },
...toInput,
null,
);
} else {