feat: replace context menu text icons with SVG icons for consistent UI styling
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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" })
|
||||
])
|
||||
]);
|
||||
|
||||
@@ -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>`,
|
||||
|
||||
Reference in New Issue
Block a user