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

Move the filemanager toolbar into the header to save vertical space

Browse Source
This commit is contained in:
Wim Brand
2026-10-01 11:14:34 +02:00
parent 58db683fc8
commit e37702d1aa
10 changed files with 136 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/filesystem/Breadcrumbs.svelte
View File

@@ -4,7 +4,7 @@ import { path_link, type FSNavigator } from "./FSNavigator";
import FileMenu from "./filemanager/FileMenu.svelte";
import EditWindow from "./edit_window/EditWindow.svelte";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
import { breadcrumbs_store } from "wrap/HeaderStore";
let {
nav,

4
svelte/src/filesystem/ErrorPage.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import TextBlock from "layout/TextBlock.svelte";
import TextBlock from "layout/TextBlock.svelte";
import { type FSNavigator } from "./FSNavigator";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
import { breadcrumbs_store } from "wrap/HeaderStore";
let {
nav

212
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -21,6 +21,8 @@ import FileMenu from "./FileMenu.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import SearchBar from "../SearchBar.svelte";
import type { GenericResponse } from "lib/NovaAPI";
import { onMount } from "svelte";
import { toolbar_store } from "wrap/HeaderStore";
let {
nav = $bindable(),
@@ -278,6 +280,12 @@ const move_here = async () => {
}
}
// The toolbar is shown in the bar at the top of the page, under the breadcrumbs.
// Other pages don't have it
onMount(() => {
toolbar_store.set(toolbar)
return () => toolbar_store.set(null)
})
</script>
<svelte:window
@@ -286,6 +294,98 @@ const move_here = async () => {
onscroll={() => scroll_positions.set(nav.base.path, window.scrollY)}
/>
{#snippet toolbar()}
{#if mode === "viewing"}
<div class="toolbar">
<div class="toolbar_left">
<button onclick={() => {search_bar.open()}} title="Press / to search">
<i class="icon">search</i>
</button>
<button onclick={navigate_back} title="Back">
<i class="icon">arrow_back</i>
</button>
<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
<i class="icon">north</i>
</button>
<button onclick={() => nav.reload()} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if $nav.children.some(c => c.name === ".Trash" && c.type === "dir")}
<button
onclick={() => nav.navigate($nav.children.find(c => c.name === ".Trash").path, true)}
title="Open trash bin"
>
<i class="icon">delete</i>
</button>
{/if}
</div>
<div class="toolbar_middle">
<button onclick={() => toggle_view()} title="Switch between gallery, list and compact view">
<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
</button>
<button class="button_large_icons" onclick={() => toggle_large_icons()} title="Switch between large and small icons">
{#if large_icons}
<i class="icon">zoom_out</i>
{:else}
<i class="icon">zoom_in</i>
{/if}
</button>
<button onclick={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
<i class="icon">visibility_off</i>
{:else}
<i class="icon">visibility</i>
{/if}
</button>
</div>
<div class="toolbar_right">
{#if $nav.permissions.write}
<button onclick={() => upload_widget.pick_files()} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
</button>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<button onclick={selecting_mode} title="Select and delete files">
<i class="icon">select_all</i>
</button>
{/if}
</div>
</div>
{:else if mode === "selecting"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<div class="toolbar_spacer">Selecting files</div>
<Button click={move_start} icon="drive_file_move" label="Move"/>
<button onclick={delete_selected} class="button_red">
<i class="icon">delete</i>
Delete
</button>
</div>
{:else if mode === "moving"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<Button click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} icon="north"/>
<div class="toolbar_spacer">
Moving {moving_files} files and {moving_directories} directories
</div>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<Button click={move_here} highlight icon="done" label="Move here"/>
</div>
{/if}
{#if creating_dir}
<CreateDirectory nav={nav} />
{/if}
{/snippet}
<div
class="container"
use:drop_target={{
@@ -293,98 +393,6 @@ const move_here = async () => {
shadow: "var(--accent_color) 0 0 10px 2px inset",
}}
>
<div class="width_container bubble">
{#if mode === "viewing"}
<div class="toolbar">
<div class="toolbar_left">
<button onclick={() => {search_bar.open()}} title="Press / to search">
<i class="icon">search</i>
</button>
<button onclick={navigate_back} title="Back">
<i class="icon">arrow_back</i>
</button>
<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
<i class="icon">north</i>
</button>
<button onclick={() => nav.reload()} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if $nav.children.some(c => c.name === ".Trash" && c.type === "dir")}
<button
onclick={() => nav.navigate($nav.children.find(c => c.name === ".Trash").path, true)}
title="Open trash bin"
>
<i class="icon">delete</i>
</button>
{/if}
</div>
<div class="toolbar_middle">
<button onclick={() => toggle_view()} title="Switch between gallery, list and compact view">
<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
</button>
<button class="button_large_icons" onclick={() => toggle_large_icons()} title="Switch between large and small icons">
{#if large_icons}
<i class="icon">zoom_out</i>
{:else}
<i class="icon">zoom_in</i>
{/if}
</button>
<button onclick={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
<i class="icon">visibility_off</i>
{:else}
<i class="icon">visibility</i>
{/if}
</button>
</div>
<div class="toolbar_right">
{#if $nav.permissions.write}
<button onclick={() => upload_widget.pick_files()} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
</button>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<button onclick={selecting_mode} title="Select and delete files">
<i class="icon">select_all</i>
</button>
{/if}
</div>
</div>
{:else if mode === "selecting"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<div class="toolbar_spacer">Selecting files</div>
<Button click={move_start} icon="drive_file_move" label="Move"/>
<button onclick={delete_selected} class="button_red">
<i class="icon">delete</i>
Delete
</button>
</div>
{:else if mode === "moving"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<Button click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} icon="north"/>
<div class="toolbar_spacer">
Moving {moving_files} files and {moving_directories} directories
</div>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<Button click={move_here} highlight icon="done" label="Move here"/>
</div>
{/if}
{#if creating_dir}
<CreateDirectory nav={nav} />
{/if}
</div>
{#if $nav.base.abuse_type !== undefined}
<div class="highlight_red">
This directory has received an abuse report. It cannot be
@@ -410,28 +418,20 @@ const move_here = async () => {
<style>
.container {
padding: 0;
display: block;
/* Keeps the margins of the views inside the container. As a normal block
they would collapse through it and push it out of the file preview, which
gives that a scrollbar */
display: flow-root;
min-height: 100%; /* Used for drop target */
}
.width_container {
position: sticky;
top: 0;
display: block;
margin-top: 0;
padding: 0;
background: var(--body_background);
}
.toolbar {
display: flex;
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
max-width: 1000px;
margin: auto;
padding-top: 2px;
padding-bottom: 2px;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--separator);
}
.toolbar > * {
flex: 0 0 content;

14
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -69,7 +69,7 @@ const load_settings = () => {
onMount(load_settings)
</script>
<table class="directory">
<table class="directory bubble">
<thead>
<tr class="header_row">
<td></td>
@@ -184,10 +184,13 @@ onMount(load_settings)
<style>
.directory {
background: var(--body_background);
border-collapse: collapse;
/* A table with collapsed borders can't have rounded corners */
border-collapse: separate;
border-spacing: 0;
/* Tables are 100% wide, this leaves room for the bubble's margin */
width: calc(100% - 8px);
backdrop-filter: blur(4px);
margin: auto; /* center */
overflow: hidden;
}
td {
padding-top: 0;
@@ -205,9 +208,6 @@ td {
color: var(--body_text_color);
cursor: pointer;
}
.node:not(:last-child) {
border-bottom: 1px solid var(--separator);
}
.node:hover:not(.node_selected) {
background: var(--input_hover_background);
color: var(--input_text);

2
svelte/src/filesystem/filemanager/TrashBin.svelte
View File

@@ -3,7 +3,7 @@ import { formatDataVolume, formatDate } from "util/Formatting";
import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
import { breadcrumbs_store } from "wrap/HeaderStore";
import { FSNavigator } from "filesystem/FSNavigator";
let {