ali
/
jey_theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

icons: remap user menu lucide sprites and full-width button 

Rewrites <use href="#icon-NAME"> inside .frappe-menu dropdown items
(the user/settings menu at top-left) to semantically similar but
visually distinct lucide ids — home→house, sliders-horizontal→
settings-2, rotate-ccw→refresh-ccw, maximize→chevrons-left-right,
moon→moon-star, info→life-buoy, logout→log-out. Idempotent via
.jey-menu-remap-done marker. Wired into processAll + rebuildAllIcons
so it runs on boot, theme switch and DOM mutations.

Also switches the custom .jey-fullwidth-link button to the same
chevrons-left-right icon so its appearance matches the menu entry.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ali 2026-04-14 13:20:46 +00:00
parent 084c92466a
commit 7486c80656
1 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
jey_theme/public/js/jey_theme.js
View File

@ -343,6 +343,44 @@
});
}
/* ==================================================================
Frappe-menu lucide icon remap
Some dropdowns (the user/settings menu at the top-left) render as
<svg><use href="#icon-NAME"> from the lucide sprite. Rewrite those
to semantically-close-but-different sprite ids so the theme feels
distinct from stock Frappe. Idempotent via .jey-menu-remap-done.
================================================================== */
var MENU_LUCIDE_ICON_MAP = {
"home": "house",
"sliders-horizontal": "settings-2",
"rotate-ccw": "refresh-ccw",
"maximize": "chevrons-left-right",
"moon": "moon-star",
"info": "life-buoy",
"logout": "log-out"
};
function processMenuLucideIcons() {
document.querySelectorAll(".frappe-menu .dropdown-menu-item").forEach(function (item) {
if (item.classList.contains("jey-menu-remap-done")) return;
item.classList.add("jey-menu-remap-done");
item.querySelectorAll(".menu-item-icon svg > use[href^='#icon-']").forEach(function (useEl) {
// Leave chevron-right (submenu indicator) alone.
var from = useEl.getAttribute("href").slice("#icon-".length);
if (from === "chevron-right") return;
var to = MENU_LUCIDE_ICON_MAP[from];
if (!to || to === from) return;
var newHref = "#icon-" + to;
useEl.setAttribute("href", newHref);
if (useEl.hasAttribute("xlink:href")) {
useEl.setAttribute("xlink:href", newHref);
}
});
});
}
/* ==================================================================
Sidebar header icon replacement
Replaces <img> / alphabet SVGs inside .sidebar-header with
@ -579,6 +617,7 @@
});
processIcons();
processContextMenuIcons();
processMenuLucideIcons();
processSidebarIcons();
processSidebarItemIcons();
}
@ -590,7 +629,7 @@
Boot
================================================================== */
function processAll() { processIcons(); processContextMenuIcons(); processSidebarIcons(); processSidebarItemIcons(); }
function processAll() { processIcons(); processContextMenuIcons(); processMenuLucideIcons(); processSidebarIcons(); processSidebarItemIcons(); }
$(document).on("page-change", processAll);
@ -620,10 +659,8 @@
link.className = "jey-fullwidth-link";
function updateIcon() {
var on = JSON.parse(localStorage.getItem("container_fullwidth") || "false");
var iconName = on ? "minimize" : "maximize";
link.innerHTML =
frappe.utils.icon(iconName, "sm", "", "", "text-ink-gray-7 current-color", true) +
frappe.utils.icon("chevrons-left-right", "sm", "", "", "text-ink-gray-7 current-color", true) +
"<span>" + __("Full Width") + "</span>";
}