Enable searching when in file view

This commit is contained in:
2023-05-25 20:19:37 +02:00
parent 88676a928e
commit 4c9f3914b7
3 changed files with 26 additions and 27 deletions

View File

@@ -71,7 +71,7 @@ const keydown = e => {
break; break;
case "/": case "/":
case "f": case "f":
view = "search" search()
break break
case "a": case "a":
case "ArrowLeft": case "ArrowLeft":
@@ -89,6 +89,19 @@ const keydown = e => {
const download = () => { const download = () => {
download_frame.src = fs_file_url(state.root.id, state.base.path) + "?attach" download_frame.src = fs_file_url(state.root.id, state.base.path) + "?attach"
} }
const search = async () => {
if (view === "search") {
view = "file"
return
}
if (state.base.type !== "dir") {
await fs_navigator.navigate(state.path[state.path.length-2].path)
}
view = "search"
}
</script> </script>
<svelte:window on:keydown={keydown} /> <svelte:window on:keydown={keydown} />
@@ -98,12 +111,11 @@ const download = () => {
<Navigator <Navigator
bind:this={fs_navigator} bind:this={fs_navigator}
bind:state bind:state
on:navigation_complete={async () => {
view = "file";
await tick();
file_preview.state_update();
}}
on:loading={e => loading = e.detail} on:loading={e => loading = e.detail}
on:navigation_complete={() => {
// Reset the view to the file view if we were in search view
view = "file"
}}
/> />
<div class="file_viewer"> <div class="file_viewer">
@@ -133,6 +145,7 @@ const download = () => {
bind:edit_visible={edit_visible} bind:edit_visible={edit_visible}
bind:view={view} bind:view={view}
on:download={download} on:download={download}
on:search={search}
/> />
<div class="file_preview checkers" class:toolbar_visible> <div class="file_preview checkers" class:toolbar_visible>

View File

@@ -64,13 +64,6 @@ let share = async () => {
sharebar_visible = !sharebar_visible sharebar_visible = !sharebar_visible
} }
} }
let toggle_search = () => {
if (view === "search") {
view = "file"
} else {
view = "search"
}
}
</script> </script>
<div class="toolbar" class:toolbar_visible={visible}> <div class="toolbar" class:toolbar_visible={visible}>
@@ -102,8 +95,8 @@ let toggle_search = () => {
</button> </button>
</div> </div>
{#if state.root.id === "me" && state.base.type === "dir"} {#if state.root.id === "me"}
<button on:click={toggle_search} class="toolbar_button" class:button_highlight={view === "search"}> <button on:click={() => dispatch("search")} class="toolbar_button" class:button_highlight={view === "search"}>
<i class="icon">search</i> Search <i class="icon">search</i> Search
</button> </button>
{/if} {/if}
@@ -114,10 +107,6 @@ let toggle_search = () => {
</button> </button>
{/if} {/if}
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
{#if share_url !== ""} {#if share_url !== ""}
<button id="btn_copy" class="toolbar_button" on:click={copy_link} class:button_highlight={link_copied}> <button id="btn_copy" class="toolbar_button" on:click={copy_link} class:button_highlight={link_copied}>
<i class="icon">content_copy</i> <u>C</u>opy Link <i class="icon">content_copy</i> <u>C</u>opy Link

View File

@@ -1,5 +1,5 @@
<script> <script>
import { onMount, tick } from "svelte"; import { tick } from "svelte";
import Spinner from "../../util/Spinner.svelte"; import Spinner from "../../util/Spinner.svelte";
import { fs_node_type } from "../FilesystemUtil"; import { fs_node_type } from "../FilesystemUtil";
import FileManager from "../filemanager/FileManager.svelte"; import FileManager from "../filemanager/FileManager.svelte";
@@ -19,11 +19,12 @@ export let state
let viewer let viewer
let viewer_type = "" let viewer_type = ""
export const state_update = async () => { $: state_update(state.base)
const state_update = async (base) => {
// Update the viewer area with the right viewer type // Update the viewer area with the right viewer type
viewer_type = fs_node_type(state.base) viewer_type = fs_node_type(base)
console.debug("Previewing file", state.base, "viewer type", viewer_type) console.debug("Previewing file", base, "viewer type", viewer_type)
// Render the viewer component and set the file type // Render the viewer component and set the file type
await tick() await tick()
@@ -31,10 +32,6 @@ export const state_update = async () => {
viewer.update() viewer.update()
} }
} }
onMount(() => {
state_update()
})
</script> </script>
{#if viewer_type === ""} {#if viewer_type === ""}