gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

client/menus: improve the multicolumn breaking strategy

Browse Source
This commit is contained in:
Adorian Doran 2025-09-20 04:02:46 +03:00
parent 053a84483c
commit f30da3d13b
1 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/menus/context_menu.ts
View File

@ -157,7 +157,8 @@ class ContextMenu {
} }
addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[], multicolumn = false) { addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[], multicolumn = false) {
let $group = $parent; let $group = $parent; // The current group or parent element to which items are being appended
let shouldStartNewGroup = false; // If true, the next item will start a new group
let shouldResetGroup = false; // If true, the next item will be the last one from the group let shouldResetGroup = false; // If true, the next item will be the last one from the group
for (let index = 0; index < items.length; index++) { for (let index = 0; index < items.length; index++) {
@ -166,24 +167,37 @@ class ContextMenu {
continue; continue;
} }
// If the next item is a separator or header, create a new group to avoid column breaks // If the current item is a header, start a new group. This group will contain the
// before and after the seaparator/header. // header and the next item that follows the header.
// This is a workaround for Firefox not supporting break-after: avoid on columns. if ("kind" in item && item.kind === "header") {
if (multicolumn && !shouldResetGroup) {
shouldStartNewGroup = true;
}
}
// If the next item is a separator, start a new group. This group will contain the
// current item, the separator, and the next item after the separator.
const nextItem = (index < items.length - 1) ? items[index + 1] : null; const nextItem = (index < items.length - 1) ? items[index + 1] : null;
if (multicolumn && nextItem && "kind" in nextItem) { if (multicolumn && nextItem && "kind" in nextItem && nextItem.kind === "separator") {
if (nextItem.kind === "separator" || nextItem.kind === "header") {
if (!shouldResetGroup) { if (!shouldResetGroup) {
shouldStartNewGroup = true;
} else {
shouldResetGroup = true; // Continue the current group
}
}
// Create a new group to avoid column breaks before and after the seaparator / header.
// This is a workaround for Firefox not supporting break-before / break-after: avoid
// for columns.
if (shouldStartNewGroup) {
$group = $("<div class='dropdown-no-break'>"); $group = $("<div class='dropdown-no-break'>");
$parent.append($group); $parent.append($group);
} else { shouldStartNewGroup = false;
shouldResetGroup = false; // Continue the current group
}
}
} }
if ("kind" in item && item.kind === "separator") { if ("kind" in item && item.kind === "separator") {
$group.append($("<div>").addClass("dropdown-divider")); $group.append($("<div>").addClass("dropdown-divider"));
shouldResetGroup = true; shouldResetGroup = true; // End the group after the next item
} else if ("kind" in item && item.kind === "header") { } else if ("kind" in item && item.kind === "header") {
$group.append($("<h6>").addClass("dropdown-header").text(item.title)); $group.append($("<h6>").addClass("dropdown-header").text(item.title));
shouldResetGroup = true; shouldResetGroup = true;