sidebar: restore jey buttons under Frappe v16

v16 removed the .collapse-sidebar-link anchor the Full Width / Switch
Theme buttons inserted before, so they silently stopped rendering.
Add a jeySidebarAnchor() helper that falls back to .body-sidebar-bottom,
and re-add a Collapse/Expand button (calls frappe.app.sidebar.toggle_width)
to replace the default v15 link Frappe dropped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ali 2026-04-20 09:42:32 +00:00
parent 953bf8b2c8
commit fe9dc89eb6
2 changed files with 75 additions and 9 deletions

View File

@ -254,7 +254,8 @@ input.list-header-checkbox:checked::after {
========================================================================== */ ========================================================================== */
.jey-fullwidth-link, .jey-fullwidth-link,
.jey-theme-switch-link { .jey-theme-switch-link,
.jey-collapse-link {
text-decoration: none; text-decoration: none;
font-size: var(--text-sm); font-size: var(--text-sm);
display: flex; display: flex;
@ -264,13 +265,15 @@ input.list-header-checkbox:checked::after {
} }
.jey-fullwidth-link svg, .jey-fullwidth-link svg,
.jey-theme-switch-link svg { .jey-theme-switch-link svg,
.jey-collapse-link svg {
margin: 0; margin: 0;
flex: 0 0 auto; flex: 0 0 auto;
} }
.jey-fullwidth-link span, .jey-fullwidth-link span,
.jey-theme-switch-link span { .jey-theme-switch-link span,
.jey-collapse-link span {
margin-left: 10px; margin-left: 10px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View File

@ -651,9 +651,20 @@
(function () { (function () {
"use strict"; "use strict";
// Frappe v15 had a "Collapse" link we inserted before; v16 removed it.
// Fall back to body-sidebar-bottom as the parent in v16.
window.jeySidebarAnchor = window.jeySidebarAnchor || function () {
var v15 = document.querySelector(".collapse-sidebar-link");
if (v15) return { parent: v15.parentNode, before: v15 };
var bottom = document.querySelector(".body-sidebar .body-sidebar-bottom");
if (bottom) return { parent: bottom, before: bottom.firstChild };
return null;
};
function addFullWidthButton() { function addFullWidthButton() {
var collapse = document.querySelector(".collapse-sidebar-link"); if (document.querySelector(".jey-fullwidth-link")) return;
if (!collapse || document.querySelector(".jey-fullwidth-link")) return; var anchor = window.jeySidebarAnchor();
if (!anchor) return;
var link = document.createElement("a"); var link = document.createElement("a");
link.className = "jey-fullwidth-link"; link.className = "jey-fullwidth-link";
@ -670,7 +681,7 @@
}); });
updateIcon(); updateIcon();
collapse.parentNode.insertBefore(link, collapse); anchor.parent.insertBefore(link, anchor.before);
} }
$(document).ready(addFullWidthButton); $(document).ready(addFullWidthButton);
@ -685,8 +696,9 @@
"use strict"; "use strict";
function addThemeSwitchButton() { function addThemeSwitchButton() {
var collapse = document.querySelector(".collapse-sidebar-link"); if (document.querySelector(".jey-theme-switch-link")) return;
if (!collapse || document.querySelector(".jey-theme-switch-link")) return; var anchor = window.jeySidebarAnchor && window.jeySidebarAnchor();
if (!anchor) return;
var link = document.createElement("a"); var link = document.createElement("a");
link.className = "jey-theme-switch-link"; link.className = "jey-theme-switch-link";
@ -698,13 +710,64 @@
new frappe.ui.ThemeSwitcher().show(); new frappe.ui.ThemeSwitcher().show();
}); });
collapse.parentNode.insertBefore(link, collapse); anchor.parent.insertBefore(link, anchor.before);
} }
$(document).ready(addThemeSwitchButton); $(document).ready(addThemeSwitchButton);
$(document).on("page-change", addThemeSwitchButton); $(document).on("page-change", addThemeSwitchButton);
})(); })();
/* ==========================================================================
Collapse / Expand Sidebar button (restored; v16 removed the default)
========================================================================== */
(function () {
"use strict";
function isExpanded() {
var c = document.querySelector(".body-sidebar-container");
return !!(c && c.classList.contains("expanded"));
}
function render(link) {
var expanded = isExpanded();
var iconName = expanded ? "chevrons-left" : "chevrons-right";
var label = expanded ? __("Collapse Sidebar") : __("Expand Sidebar");
link.innerHTML =
frappe.utils.icon(iconName, "sm", "", "", "text-ink-gray-7 current-color", true) +
"<span>" + label + "</span>";
}
function addCollapseButton() {
if (document.querySelector(".jey-collapse-link")) return;
var anchor = window.jeySidebarAnchor && window.jeySidebarAnchor();
if (!anchor) return;
var link = document.createElement("a");
link.className = "jey-collapse-link";
render(link);
link.addEventListener("click", function () {
if (frappe.app && frappe.app.sidebar && frappe.app.sidebar.toggle_width) {
frappe.app.sidebar.toggle_width();
}
// toggle_width updates class synchronously; re-render
render(link);
});
anchor.parent.insertBefore(link, anchor.before);
// Keep label in sync if sidebar state changes elsewhere
$(document).off("sidebar-expand.jey-collapse").on("sidebar-expand.jey-collapse", function () {
var el = document.querySelector(".jey-collapse-link");
if (el) render(el);
});
}
$(document).ready(addCollapseButton);
$(document).on("page-change", addCollapseButton);
})();
/* ========================================================================== /* ==========================================================================
Hide "Website" item from sidebar user dropdown Hide "Website" item from sidebar user dropdown
========================================================================== */ ========================================================================== */