nodes/m0rtus59-ComfyUI-ComfySidebar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimize card action button styles

Browse Source
This commit is contained in:
m0rtus59
2026-07-26 23:34:19 +05:00
parent ad4e138eac
commit 689e020230
2 changed files with 43 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/styles.js
+31
View File
@@ -55,6 +55,37 @@ export function injectStyles() {
background-color: #991b1b !important;
color: #ffffff !important;
}
/* Optimized Card Action Buttons */
.comfy-sidebar-card-action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
background-color: rgba(0, 0, 0, 0.75) !important;
color: #e2e8f0 !important;
font-size: 14px !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
z-index: 20 !important;
transform: translateZ(0);
}
.comfy-sidebar-card-action-btn:hover {
background-color: rgba(0, 0, 0, 0.95) !important;
color: #ffffff !important;
}
/* Delete Confirmation Active State */
.comfy-sidebar-card-action-btn.confirm-delete,
.comfy-sidebar-card-action-btn.confirm-delete:hover {
background-color: #dc3545 !important;
color: #ffffff !important;
box-shadow: 0 0 8px rgba(220, 53, 69, 0.6) !important;
}
`;
document.head.appendChild(style);
}
js/ui.js
+12 -44
View File
@@ -252,7 +252,6 @@ export function setupSidebarUI() {
State.cardStack.style.columnGap = cols > 1 ? "12px" : "0";
}).observe(State.sidebarContainer);
// Optimized: Early-exit timer updates when no tasks are currently active
setInterval(() => {
if (State.currentlyActivePromptId === null) return;
for (const [pid, state] of promptStates.entries()) {
@@ -514,25 +513,6 @@ export function renderDOM() {
const headerSearchIcon = State.sidebarContainer.querySelector(".pi-search");
const headerActions = State.sidebarContainer.querySelector(".pi-eraser")?.parentNode;
const styleActionBtn = (btn) => {
Object.assign(btn.style, {
display: "inline-flex",
alignItems: "center", justifyContent: "center",
width: "32px", height: "32px",
backgroundColor: "rgba(0, 0, 0, 0.75)",
color: "#e2e8f0",
fontSize: "14px",
borderRadius: "6px",
cursor: "pointer",
transition: "all 0.15s ease",
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.3)",
zIndex: "20",
transform: "translateZ(0)"
});
btn.onmouseenter = () => { btn.style.backgroundColor = "rgba(0, 0, 0, 0.95)"; btn.style.color = "#fff"; };
btn.onmouseleave = () => { btn.style.backgroundColor = "rgba(0, 0, 0, 0.75)"; btn.style.color = "#e2e8f0"; };
};
if (State.activeSubmenuBatchImages) {
const batchInfo = State.activeSubmenuBatchImages;
@@ -590,9 +570,8 @@ export function renderDOM() {
});
const btnImg = document.createElement("span");
btnImg.className = "pi pi-image";
btnImg.className = "pi pi-image comfy-sidebar-card-action-btn";
btnImg.title = "Download Object";
styleActionBtn(btnImg);
hoverPanel.appendChild(btnImg);
const leftHoverPanel = document.createElement("div");
@@ -602,9 +581,8 @@ export function renderDOM() {
});
const btnFocus = document.createElement("span");
btnFocus.className = "pi pi-eye";
btnFocus.className = "pi pi-eye comfy-sidebar-card-action-btn";
btnFocus.title = "Show Node";
styleActionBtn(btnFocus);
leftHoverPanel.appendChild(btnFocus);
card.append(timerEl, dimEl, grid, p, hoverPanel, leftHoverPanel);
@@ -721,9 +699,8 @@ export function renderDOM() {
});
const btnImg = document.createElement("span");
btnImg.className = "pi pi-image";
btnImg.className = "pi pi-image comfy-sidebar-card-action-btn";
btnImg.title = "Download Object";
styleActionBtn(btnImg);
hoverPanel.appendChild(btnImg);
const leftHoverPanel = document.createElement("div");
@@ -733,9 +710,8 @@ export function renderDOM() {
});
const btnFocus = document.createElement("span");
btnFocus.className = "pi pi-eye";
btnFocus.className = "pi pi-eye comfy-sidebar-card-action-btn";
btnFocus.title = "Show Node";
styleActionBtn(btnFocus);
leftHoverPanel.appendChild(btnFocus);
card.append(timerEl, dimEl, grid, p, hoverPanel, leftHoverPanel);
@@ -843,9 +819,9 @@ export function renderDOM() {
flexDirection: "column", gap: "4px", zIndex: "20"
});
const btnImg = document.createElement("span"); btnImg.className = "pi pi-image"; btnImg.title = "Download Object"; styleActionBtn(btnImg);
const btnJson = document.createElement("span"); btnJson.className = "pi pi-file"; btnJson.title = "Download JSON"; styleActionBtn(btnJson);
const btnDel = document.createElement("span"); btnDel.className = "pi pi-trash"; btnDel.title = "Delete Card"; styleActionBtn(btnDel);
const btnImg = document.createElement("span"); btnImg.className = "pi pi-image comfy-sidebar-card-action-btn"; btnImg.title = "Download Object";
const btnJson = document.createElement("span"); btnJson.className = "pi pi-file comfy-sidebar-card-action-btn"; btnJson.title = "Download JSON";
const btnDel = document.createElement("span"); btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn"; btnDel.title = "Delete Card";
const leftHoverPanel = document.createElement("div");
Object.assign(leftHoverPanel.style, {
@@ -854,14 +830,12 @@ export function renderDOM() {
});
const btnFocus = document.createElement("span");
btnFocus.className = "pi pi-eye";
btnFocus.className = "pi pi-eye comfy-sidebar-card-action-btn";
btnFocus.title = "Show Node";
styleActionBtn(btnFocus);
const leftHoverBtn = document.createElement("span");
leftHoverBtn.className = "pi pi-images";
leftHoverBtn.className = "pi pi-images comfy-sidebar-card-action-btn";
leftHoverBtn.title = "View all intermediate outputs";
styleActionBtn(leftHoverBtn);
leftHoverBtn.onclick = (ev) => {
ev.stopPropagation();
@@ -982,10 +956,7 @@ export function renderDOM() {
let deleteTimeout = null, isDeletePending = false;
const resetDeleteBtn = () => {
isDeletePending = false;
Object.assign(cardObj.btnDel.style, {
color: "#e2e8f0",
backgroundColor: "rgba(0, 0, 0, 0.75)"
});
cardObj.btnDel.classList.remove("confirm-delete");
cardObj.btnDel.title = "Delete Card";
if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; }
};
@@ -994,12 +965,9 @@ export function renderDOM() {
ev.stopPropagation();
if (!isDeletePending) {
isDeletePending = true;
Object.assign(cardObj.btnDel.style, {
color: "#fff",
backgroundColor: "#dc3545"
});
cardObj.btnDel.classList.add("confirm-delete");
cardObj.btnDel.title = "Click again to confirm deletion";
deleteTimeout = setTimeout(resetDeleteBtn, 1000);
deleteTimeout = setTimeout(resetDeleteBtn, 1500);
} else {
resetDeleteBtn();
promptStates.delete(state.pid);