Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance breadcrumb navigation with path-selected highlighting, improved scroll positioning, and pulsing animation for focused tree items

Browse Source
This commit is contained in:
Bruno Charest 2026-03-22 01:11:28 -04:00
parent 565c3c8a27
commit 5dc1907ace
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/app.js
View File

@ -368,7 +368,7 @@
const currentTop = scrollContainer.scrollTop; const currentTop = scrollContainer.scrollTop;
const offsetTop = element.offsetTop; const offsetTop = element.offsetTop;
const targetTop = alignToTop const targetTop = alignToTop
? Math.max(0, offsetTop - 8) ? Math.max(0, offsetTop - 60)
: Math.max(0, currentTop + (elementRect.top - containerRect.top) - (containerRect.height * 0.35)); : Math.max(0, currentTop + (elementRect.top - containerRect.top) - (containerRect.height * 0.35));
scrollContainer.scrollTo({ scrollContainer.scrollTo({
@ -502,6 +502,8 @@
} }
if (!targetPath) { if (!targetPath) {
// Clear any previous path selection
document.querySelectorAll(".tree-item.path-selected").forEach((el) => el.classList.remove("path-selected"));
scrollTreeItemIntoView(vaultItem, options && options.alignToTop); scrollTreeItemIntoView(vaultItem, options && options.alignToTop);
return; return;
} }
@ -509,6 +511,7 @@
const segments = targetPath.split("/").filter(Boolean); const segments = targetPath.split("/").filter(Boolean);
let currentContainer = vaultContainer; let currentContainer = vaultContainer;
let cumulativePath = ""; let cumulativePath = "";
let lastTargetItem = null;
for (let index = 0; index < segments.length; index++) { for (let index = 0; index < segments.length; index++) {
cumulativePath += (cumulativePath ? "/" : "") + segments[index]; cumulativePath += (cumulativePath ? "/" : "") + segments[index];
@ -524,6 +527,8 @@
return; return;
} }
lastTargetItem = targetItem;
const isLastSegment = index === segments.length - 1; const isLastSegment = index === segments.length - 1;
if (!isLastSegment) { if (!isLastSegment) {
const nextContainer = document.getElementById(`dir-${vaultName}-${cumulativePath}`); const nextContainer = document.getElementById(`dir-${vaultName}-${cumulativePath}`);
@ -535,9 +540,15 @@
currentContainer = nextContainer; currentContainer = nextContainer;
} }
} }
scrollTreeItemIntoView(targetItem, Boolean(options && options.alignToTop && isLastSegment));
} }
// Clear previous path selections and highlight the final target
document.querySelectorAll(".tree-item.path-selected").forEach((el) => el.classList.remove("path-selected"));
if (lastTargetItem) {
lastTargetItem.classList.add("path-selected");
}
scrollTreeItemIntoView(lastTargetItem, options && options.alignToTop);
} }
async function loadDirectory(vaultName, dirPath, container) { async function loadDirectory(vaultName, dirPath, container) {

12
frontend/style.css
View File

@ -637,6 +637,17 @@ select {
color: var(--text-primary); color: var(--text-primary);
box-shadow: inset 2px 0 0 var(--accent); box-shadow: inset 2px 0 0 var(--accent);
} }
.tree-item.path-selected {
background: color-mix(in srgb, var(--accent) 20%, transparent);
color: var(--accent);
box-shadow: inset 0 0 0 2px var(--accent), inset 2px 0 0 var(--accent);
border-radius: 6px;
animation: pathPulse 1.5s ease-out;
}
@keyframes pathPulse {
0% { background: color-mix(in srgb, var(--accent) 40%, transparent); }
100% { background: color-mix(in srgb, var(--accent) 20%, transparent); }
}
.tree-item.filtered-out { .tree-item.filtered-out {
display: none; display: none;
} }
@ -1758,7 +1769,6 @@ body.resizing-v {
#vault-panel-content { #vault-panel-content {
max-height: none; max-height: none;
} }
#tag-panel-content { #tag-panel-content {
max-height: none; max-height: none;
} }