pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close search with escape

Browse Source
This commit is contained in:
Fornax
2023-05-29 12:33:22 +02:00
parent 71538e5d7a
commit 34bd15fa8b
3 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
svelte/src/filesystem/SearchView.svelte
View File

@@ -59,15 +59,24 @@ const search = async (limit = 10) => {
}
}
// Submitting opens the first result
const submit_search = () => {
if (search_results.length !== 0) {
fs_navigator.navigate(search_results[0], true)
const keyup = e => {
if (e.key === "Escape") {
dispatch("done")
} else {
search()
}
}
const node_click = index => {
// Submitting opens the first result
const submit_search = () => {
if (search_results.length !== 0) {
open_result(0)
}
}
const open_result = index => {
fs_navigator.navigate(search_results[index], true)
dispatch("done")
}
</script>
@@ -84,12 +93,19 @@ const node_click = index => {
</div>
{/if}
<form class="search_bar highlight_shaded center" on:submit|preventDefault={submit_search}>
<i class="icon">search</i>
<!-- svelte-ignore a11y-autofocus -->
<input class="term" type="text" style="width: 100%;" bind:value={search_term} on:keyup={() => search()} autofocus />
<input class="submit" type="submit" value="Search"/>
</form>
<div class="search_bar highlight_shaded center">
<div>
Currently searching in <b>{state.base.path}</b>. Use the navigation buttons
above to search in a different location.
</div>
<form class="search_form" on:submit|preventDefault={submit_search}>
<i class="icon">search</i>
<!-- svelte-ignore a11y-autofocus -->
<input class="term" type="text" style="width: 100%;" bind:value={search_term} on:keyup={keyup} autofocus />
<input class="submit" type="submit" value="Search"/>
</form>
</div>
<div class="directory center">
<tr>
@@ -99,7 +115,7 @@ const node_click = index => {
{#each search_results as result, index}
<a
href={state.path_root+result}
on:click|preventDefault={() => node_click(index)}
on:click|preventDefault={() => open_result(index)}
class="node"
>
<td>
@@ -132,10 +148,14 @@ const node_click = index => {
}
.search_bar {
display: flex;
flex-direction: column;
margin-top: 10px;
}
.search_form {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
}
.term {
flex: 1 1 auto;