Add auto-expand vault functionality to sidebar filter with improved clear button visibility and restructured input layouts for both search and filter components
This commit is contained in:
parent
3a86450a73
commit
d9add8dcba
@ -623,20 +623,31 @@
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sidebar filter
|
||||
// ---------------------------------------------------------------------------
|
||||
function initSidebarFilter() {
|
||||
async 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", () => {
|
||||
input.addEventListener("input", async () => {
|
||||
const hasText = input.value.length > 0;
|
||||
clearBtn.style.display = hasText ? "flex" : "none";
|
||||
|
||||
if (hasText) {
|
||||
// Expand all vaults and load their contents for filtering
|
||||
await expandAllVaultsForFiltering();
|
||||
}
|
||||
|
||||
const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||||
filterSidebarTree(q);
|
||||
filterTagCloud(q);
|
||||
});
|
||||
|
||||
caseBtn.addEventListener("click", () => {
|
||||
caseBtn.addEventListener("click", async () => {
|
||||
sidebarFilterCaseSensitive = !sidebarFilterCaseSensitive;
|
||||
caseBtn.classList.toggle("active");
|
||||
if (input.value.trim()) {
|
||||
await expandAllVaultsForFiltering();
|
||||
}
|
||||
const q = sidebarFilterCaseSensitive ? input.value.trim() : input.value.trim().toLowerCase();
|
||||
filterSidebarTree(q);
|
||||
filterTagCloud(q);
|
||||
@ -644,11 +655,26 @@
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
input.value = "";
|
||||
clearBtn.style.display = "none";
|
||||
sidebarFilterCaseSensitive = false;
|
||||
caseBtn.classList.remove("active");
|
||||
filterSidebarTree("");
|
||||
filterTagCloud("");
|
||||
});
|
||||
|
||||
// Initially hide clear button
|
||||
clearBtn.style.display = "none";
|
||||
}
|
||||
|
||||
async function expandAllVaultsForFiltering() {
|
||||
const vaultItems = document.querySelectorAll(".vault-item");
|
||||
for (const vaultItem of vaultItems) {
|
||||
const vaultName = vaultItem.getAttribute("data-vault");
|
||||
const childContainer = document.getElementById(`vault-children-${vaultName}`);
|
||||
if (childContainer && childContainer.classList.contains("collapsed")) {
|
||||
await toggleVault(vaultItem, vaultName, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function filterSidebarTree(query) {
|
||||
@ -1263,7 +1289,13 @@
|
||||
const caseBtn = document.getElementById("search-case-btn");
|
||||
const clearBtn = document.getElementById("search-clear-btn");
|
||||
|
||||
// Initially hide clear button
|
||||
clearBtn.style.display = "none";
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
const hasText = input.value.length > 0;
|
||||
clearBtn.style.display = hasText ? "flex" : "none";
|
||||
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
const q = input.value.trim();
|
||||
@ -1284,6 +1316,7 @@
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
input.value = "";
|
||||
clearBtn.style.display = "none";
|
||||
searchCaseSensitive = false;
|
||||
caseBtn.classList.remove("active");
|
||||
showWelcome();
|
||||
|
||||
@ -78,13 +78,17 @@
|
||||
<div class="header-center">
|
||||
<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 class="search-input-wrapper">
|
||||
<input type="text" id="search-input" placeholder="Recherche..." autocomplete="off">
|
||||
<div class="search-actions">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -158,13 +162,17 @@
|
||||
<!-- 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 class="sidebar-filter-input-wrapper">
|
||||
<input type="text" id="sidebar-filter-input" placeholder="Filtrer fichiers et tags..." autocomplete="off">
|
||||
<div class="sidebar-filter-actions">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="custom-dropdown sidebar-dropdown" id="vault-quick-select-dropdown">
|
||||
|
||||
@ -153,11 +153,27 @@ a:hover {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-wrapper input {
|
||||
.search-wrapper .search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input-wrapper input {
|
||||
width: 100%;
|
||||
padding: 8px 14px 8px 38px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
@ -168,26 +184,29 @@ a:hover {
|
||||
outline: none;
|
||||
transition: border-color 200ms ease, background 200ms ease;
|
||||
}
|
||||
.search-wrapper input:focus {
|
||||
|
||||
.search-input-wrapper input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.search-wrapper .search-icon {
|
||||
|
||||
.search-actions {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-secondary);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
@ -196,6 +215,7 @@ a:hover {
|
||||
font-weight: 600;
|
||||
transition: all 150ms ease;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
@ -554,8 +574,16 @@ select {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.sidebar-filter input {
|
||||
|
||||
.sidebar-filter-input-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-filter-input-wrapper input {
|
||||
width: 100%;
|
||||
padding: 6px 10px 6px 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
@ -566,31 +594,44 @@ select {
|
||||
outline: none;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
.sidebar-filter input:focus {
|
||||
|
||||
.sidebar-filter-input-wrapper input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-filter-icon {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sidebar-filter-actions {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sidebar-filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
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-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
transition: all 150ms ease;
|
||||
padding: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user