feat: replace context menu text icons with SVG icons for consistent UI styling

This commit is contained in:
Dariusz L
2026-06-07 15:20:42 +02:00
parent 6e78489cd6
commit b9c9867472
3 changed files with 23 additions and 5 deletions
+12 -2
View File
@@ -2871,9 +2871,19 @@
background: rgba(255,255,255,0.1);
}
.mr-context-menu-item-icon {
font-size: 14px;
width: 20px;
text-align: center;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
flex: 0 0 20px;
}
.mr-context-menu-item-icon svg,
.mr-context-menu-item-svg {
width: 14px;
height: 14px;
display: block;
}
.mr-context-menu-divider {
height: 1px;
+10 -3
View File
@@ -13,6 +13,7 @@ import { queueMethods } from "./actions/queue_methods.js";
import { resolveDownloadMethods } from "./actions/resolve_download_methods.js";
import { selectionMethods } from "./actions/selection_methods.js";
import { renderFormatMethods } from "./utils/render_format_methods.js";
import { getSvgIcon } from "../utils/icon_utils.js";
export class ResolverManagerDialog extends ComfyDialog {
constructor() {
super();
@@ -86,21 +87,27 @@ export class ResolverManagerDialog extends ComfyDialog {
$el("div.mr-context-menu-item", {
onclick: () => this.handleContextMenuAction('showInfo')
}, [
$el("span.mr-context-menu-item-icon", { textContent: "?" }),
$el("span.mr-context-menu-item-icon", {
innerHTML: getSvgIcon('eye', 'currentColor', 'mr-context-menu-item-svg')
}),
$el("span", { textContent: "Show Info" })
]),
$el("div.mr-context-menu-divider"),
$el("div.mr-context-menu-item", {
onclick: () => this.handleContextMenuAction('civitai')
}, [
$el("span.mr-context-menu-item-icon", { textContent: "??" }),
$el("span.mr-context-menu-item-icon", {
innerHTML: getSvgIcon('civitai', 'currentColor', 'mr-context-menu-item-svg')
}),
$el("span", { textContent: "Open in CivitAI" })
]),
$el("div.mr-context-menu-divider"),
$el("div.mr-context-menu-item", {
onclick: () => this.handleContextMenuAction('openFolder')
}, [
$el("span.mr-context-menu-item-icon", { textContent: "??" }),
$el("span.mr-context-menu-item-icon", {
innerHTML: getSvgIcon('folderOpen', 'currentColor', 'mr-context-menu-item-svg')
}),
$el("span", { textContent: "Open Containing Folder" })
])
]);
+1
View File
@@ -19,6 +19,7 @@ const SVG_ICONS = {
globe: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3a14.5 14.5 0 0 1 0 18"></path><path d="M12 3a14.5 14.5 0 0 0 0 18"></path></svg>`,
eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"></path><circle cx="12" cy="12" r="3"></circle></svg>`,
eyeOff: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 19C5 19 1 12 1 12a21.77 21.77 0 0 1 5.06-5.94"></path><path d="M9.9 4.24A10.93 10.93 0 0 1 12 4c7 0 11 8 11 8a21.72 21.72 0 0 1-4.31 5.18"></path><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"></path><path d="M1 1l22 22"></path></svg>`,
folderOpen: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 17.5h11.5a2 2 0 0 0 1.92-1.45l1.36-4.75A1.8 1.8 0 0 0 19.05 9H8.5a2 2 0 0 0-1.92 1.45L5 16"></path><path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H9l2 2h7.5A2.5 2.5 0 0 1 21 8.5V9"></path><path d="M3 6.5v10A2.5 2.5 0 0 0 5.5 19h12"></path></svg>`,
windowMaximize: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5.5" y="5.5" width="13" height="13"></rect></svg>`,
windowRestore: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 9h8v8H8z"></path><path d="M6 15H4.5V5.5H14V7"></path></svg>`,
x: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"></path><path d="M17.5 6.5l-11 11"></path></svg>`,