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

feat: wrap tree item text in span elements and improve text overflow handling with flexbox

Browse Source 
- Wrap vault, directory, and file names in span.tree-item-text elements
- Add flex: 1 to tree-item-text to enable proper text truncation
- Set min-width: 0 on tree-item and tree-item-text to allow flex shrinking
- Move overflow and text-overflow styles from tree-item to tree-item-text
- Update icon colors: use text-secondary for default, accent for active/vault items
This commit is contained in:
Bruno Charest 2026-03-30 21:50:29 -04:00
parent f51c4e848d
commit 10a312ae89
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app.js
View File

@ -1955,7 +1955,7 @@
const vaultsToShow = selectedContextVault === "all" ? allVaults : allVaults.filter((v) => v.name === selectedContextVault); const vaultsToShow = selectedContextVault === "all" ? allVaults : allVaults.filter((v) => v.name === selectedContextVault);
vaultsToShow.forEach((v) => { vaultsToShow.forEach((v) => {
const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), document.createTextNode(` ${v.name} `), smallBadge(v.file_count)]); const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name)); vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
vaultItem.addEventListener("contextmenu", (e) => { vaultItem.addEventListener("contextmenu", (e) => {
@ -2052,7 +2052,7 @@
vaults.forEach((v) => { vaults.forEach((v) => {
// Sidebar tree entry // Sidebar tree entry
const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), document.createTextNode(` ${v.name} `), smallBadge(v.file_count)]); const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name)); vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
vaultItem.addEventListener("contextmenu", (e) => { vaultItem.addEventListener("contextmenu", (e) => {
@ -2267,7 +2267,7 @@
} }
if (item.type === "directory") { if (item.type === "directory") {
const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), document.createTextNode(` ${item.name} `), smallBadge(item.children_count)]); const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), el("span", { class: "tree-item-text" }, [document.createTextNode(item.name)]), smallBadge(item.children_count)]);
attachTreeItemActionButton(dirItem, vaultName, item.path, "directory", false); attachTreeItemActionButton(dirItem, vaultName, item.path, "directory", false);
attachTreeItemLongPress(dirItem, () => ({ vault: vaultName, path: item.path, type: "directory", isReadonly: false })); attachTreeItemLongPress(dirItem, () => ({ vault: vaultName, path: item.path, type: "directory", isReadonly: false }));
fragment.appendChild(dirItem); fragment.appendChild(dirItem);
@ -2301,7 +2301,7 @@
} else { } else {
const fileIconName = getFileIcon(item.name); const fileIconName = getFileIcon(item.name);
const displayName = item.name.match(/\.md$/i) ? item.name.replace(/\.md$/i, "") : item.name; const displayName = item.name.match(/\.md$/i) ? item.name.replace(/\.md$/i, "") : item.name;
const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), document.createTextNode(` ${displayName}`)]); const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(displayName)])]);
attachTreeItemActionButton(fileItem, vaultName, item.path, "file", false); attachTreeItemActionButton(fileItem, vaultName, item.path, "file", false);
attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false })); attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
fileItem.addEventListener("click", () => { fileItem.addEventListener("click", () => {

11
frontend/style.css
View File

@ -830,8 +830,15 @@ select {
background 120ms ease, background 120ms ease,
color 120ms ease; color 120ms ease;
white-space: nowrap; white-space: nowrap;
min-width: 0; /* Allow flex item to shrink */
}
.tree-item > .tree-item-text {
flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
} }
.tree-item:hover { .tree-item:hover {
background: var(--bg-hover); background: var(--bg-hover);
@ -874,13 +881,13 @@ select {
width: 16px; width: 16px;
height: 16px; height: 16px;
flex-shrink: 0; flex-shrink: 0;
color: var(--text-muted); color: var(--text-secondary);
} }
.tree-item.active .icon { .tree-item.active .icon {
color: var(--accent); color: var(--accent);
} }
.tree-item.vault-item .icon { .tree-item.vault-item .icon {
color: var(--accent-green); color: var(--accent);
} }
.tree-item-action-btn { .tree-item-action-btn {