Add case-sensitive toggle and clear buttons to search and sidebar filter inputs with visual active states and improved layout
This commit is contained in:
parent
bed8e93624
commit
3a86450a73
@ -18,6 +18,8 @@
|
||||
let editorVault = null;
|
||||
let editorPath = null;
|
||||
let fallbackEditorEl = null;
|
||||
let sidebarFilterCaseSensitive = false;
|
||||
let searchCaseSensitive = false;
|
||||
const panelState = {
|
||||
vault: true,
|
||||
tag: true,
|
||||
@ -623,11 +625,30 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
function initSidebarFilter() {
|
||||
const input = document.getElementById("sidebar-filter-input");
|
||||
const caseBtn = document.getElementById("sidebar-filter-case-btn");
|
||||
const clearBtn = document.getElementById("sidebar-filter-clear-btn");
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
const q = input.value.trim().toLowerCase();
|
||||
const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||||
filterSidebarTree(q);
|
||||
filterTagCloud(q);
|
||||
});
|
||||
|
||||
caseBtn.addEventListener("click", () => {
|
||||
sidebarFilterCaseSensitive = !sidebarFilterCaseSensitive;
|
||||
caseBtn.classList.toggle("active");
|
||||
const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||||
filterSidebarTree(q);
|
||||
filterTagCloud(q);
|
||||
});
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
input.value = "";
|
||||
sidebarFilterCaseSensitive = false;
|
||||
caseBtn.classList.remove("active");
|
||||
filterSidebarTree("");
|
||||
filterTagCloud("");
|
||||
});
|
||||
}
|
||||
|
||||
function filterSidebarTree(query) {
|
||||
@ -646,8 +667,9 @@
|
||||
|
||||
// Second pass: show matching items and their ancestors
|
||||
items.forEach((item) => {
|
||||
const text = item.textContent.toLowerCase();
|
||||
if (text.includes(query)) {
|
||||
const text = sidebarFilterCaseSensitive ? item.textContent : item.textContent.toLowerCase();
|
||||
const searchQuery = sidebarFilterCaseSensitive ? query : query.toLowerCase();
|
||||
if (text.includes(searchQuery)) {
|
||||
item.classList.remove("filtered-out");
|
||||
// Show all ancestor containers
|
||||
let parent = item.parentElement;
|
||||
@ -665,8 +687,9 @@
|
||||
function filterTagCloud(query) {
|
||||
const tags = document.querySelectorAll("#tag-cloud .tag-item");
|
||||
tags.forEach((tag) => {
|
||||
const text = tag.textContent.toLowerCase();
|
||||
if (!query || text.includes(query)) {
|
||||
const text = sidebarFilterCaseSensitive ? tag.textContent : tag.textContent.toLowerCase();
|
||||
const searchQuery = sidebarFilterCaseSensitive ? query : query.toLowerCase();
|
||||
if (!query || text.includes(searchQuery)) {
|
||||
tag.classList.remove("filtered-out");
|
||||
} else {
|
||||
tag.classList.add("filtered-out");
|
||||
@ -1237,6 +1260,9 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
function initSearch() {
|
||||
const input = document.getElementById("search-input");
|
||||
const caseBtn = document.getElementById("search-case-btn");
|
||||
const clearBtn = document.getElementById("search-clear-btn");
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
@ -1250,6 +1276,18 @@
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
caseBtn.addEventListener("click", () => {
|
||||
searchCaseSensitive = !searchCaseSensitive;
|
||||
caseBtn.classList.toggle("active");
|
||||
});
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
input.value = "";
|
||||
searchCaseSensitive = false;
|
||||
caseBtn.classList.remove("active");
|
||||
showWelcome();
|
||||
});
|
||||
}
|
||||
|
||||
async function performSearch(query, vaultFilter, tagFilter) {
|
||||
|
||||
@ -79,6 +79,12 @@
|
||||
<div class="search-wrapper">
|
||||
<i data-lucide="search" class="search-icon" style="width:16px;height:16px"></i>
|
||||
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
|
||||
<button class="search-btn" id="search-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
|
||||
<span>Aa</span>
|
||||
</button>
|
||||
<button class="search-btn" id="search-clear-btn" type="button" title="Effacer la recherche" aria-label="Effacer la recherche">
|
||||
<i data-lucide="x" style="width:14px;height:14px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -148,13 +154,19 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-tree" id="sidebar-tree">
|
||||
<!-- Sidebar filter -->
|
||||
<div class="sidebar-filter">
|
||||
<i data-lucide="filter" class="sidebar-filter-icon" style="width:14px;height:14px"></i>
|
||||
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
|
||||
<button class="sidebar-filter-btn" id="sidebar-filter-case-btn" type="button" title="Respecter la casse" aria-label="Respecter la casse">
|
||||
<span>Aa</span>
|
||||
</button>
|
||||
<button class="sidebar-filter-btn" id="sidebar-filter-clear-btn" type="button" title="Effacer le filtrage" aria-label="Effacer le filtrage">
|
||||
<i data-lucide="x" style="width:14px;height:14px"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tree" id="sidebar-tree">
|
||||
<div class="custom-dropdown sidebar-dropdown" id="vault-quick-select-dropdown">
|
||||
<button class="custom-dropdown-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
|
||||
<span class="custom-dropdown-selected">Tous les vaults</span>
|
||||
|
||||
@ -151,17 +151,20 @@ a:hover {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-wrapper input {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 8px 14px 8px 38px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--search-bg);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 200ms ease, background 200ms ease;
|
||||
}
|
||||
@ -173,10 +176,40 @@ a:hover {
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: all 150ms ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
|
||||
}
|
||||
|
||||
.search-btn.active {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
position: relative;
|
||||
}
|
||||
@ -517,9 +550,12 @@ select {
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.sidebar-filter input {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding: 6px 10px 6px 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
@ -542,6 +578,37 @@ select {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar-filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
transition: all 150ms ease;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-filter-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
|
||||
}
|
||||
|
||||
.sidebar-filter-btn.active {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user