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

feat: improve action button visibility with explicit styling and icon rendering

Browse Source 
- Add explicit border and background colors to action buttons for better visibility
- Ensure Lucide icons are properly rendered in action buttons with deferred safeCreateIcons call
- Adjust badge margin to prevent overlap with action buttons
- Add z-index to action buttons to ensure proper layering
This commit is contained in:
Bruno Charest 2026-03-30 21:12:22 -04:00
parent 9a812eb34a
commit 1a575020e6
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/app.js
View File

@ -4749,7 +4749,8 @@
button.className = "tree-item-action-btn"; button.className = "tree-item-action-btn";
button.setAttribute("aria-label", "Afficher le menu d’actions"); button.setAttribute("aria-label", "Afficher le menu d’actions");
button.setAttribute("title", "Actions"); button.setAttribute("title", "Actions");
button.appendChild(icon("ellipsis", 16)); const iconEl = icon("ellipsis", 16);
button.appendChild(iconEl);
button.addEventListener("click", (e) => { button.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -4757,6 +4758,10 @@
ContextMenuManager.show(pos.x, pos.y, vault, path, type, isReadonly); ContextMenuManager.show(pos.x, pos.y, vault, path, type, isReadonly);
}); });
itemEl.appendChild(button); itemEl.appendChild(button);
// Ensure Lucide icons are rendered for the button
setTimeout(() => {
safeCreateIcons(button);
}, 0);
} }
function attachTreeItemLongPress(itemEl, getMenuData) { function attachTreeItemLongPress(itemEl, getMenuData) {

7
frontend/style.css
View File

@ -838,7 +838,7 @@ select {
color: var(--text-primary); color: var(--text-primary);
} }
.tree-item > .badge-small { .tree-item > .badge-small {
margin-left: auto; margin-left: 4px;
} }
.tree-item.active { .tree-item.active {
background: var(--bg-hover); background: var(--bg-hover);
@ -890,9 +890,9 @@ select {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid transparent; border: 1px solid var(--border);
border-radius: 6px; border-radius: 6px;
background: transparent; background: var(--bg-secondary);
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
@ -903,6 +903,7 @@ select {
background 140ms ease, background 140ms ease,
border-color 140ms ease; border-color 140ms ease;
flex-shrink: 0; flex-shrink: 0;
z-index: 1;
} }
.tree-item-action-btn:hover, .tree-item-action-btn:hover,