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 FileMenu from "./filemanager/FileMenu.svelte";
import EditWindow from "./edit_window/EditWindow.svelte"; import EditWindow from "./edit_window/EditWindow.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore"; import { breadcrumbs_store } from "wrap/HeaderStore";
let { let {
nav, nav,

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

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import TextBlock from "layout/TextBlock.svelte"; import TextBlock from "layout/TextBlock.svelte";
import { type FSNavigator } from "./FSNavigator"; import { type FSNavigator } from "./FSNavigator";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore"; import { breadcrumbs_store } from "wrap/HeaderStore";
let { let {
nav 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 { loading_finish, loading_start } from "lib/Loading";
import SearchBar from "../SearchBar.svelte"; import SearchBar from "../SearchBar.svelte";
import type { GenericResponse } from "lib/NovaAPI"; import type { GenericResponse } from "lib/NovaAPI";
import { onMount } from "svelte";
import { toolbar_store } from "wrap/HeaderStore";
let { let {
nav = $bindable(), 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> </script>
<svelte:window <svelte:window
@@ -286,6 +294,98 @@ const move_here = async () => {
onscroll={() => scroll_positions.set(nav.base.path, window.scrollY)} 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 <div
class="container" class="container"
use:drop_target={{ use:drop_target={{
@@ -293,98 +393,6 @@ const move_here = async () => {
shadow: "var(--accent_color) 0 0 10px 2px inset", 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} {#if $nav.base.abuse_type !== undefined}
<div class="highlight_red"> <div class="highlight_red">
This directory has received an abuse report. It cannot be This directory has received an abuse report. It cannot be
@@ -410,28 +418,20 @@ const move_here = async () => {
<style> <style>
.container { .container {
padding: 0; 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 */ 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 { .toolbar {
display: flex; display: flex;
flex: 1 1 auto;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
max-width: 1000px;
margin: auto;
padding-top: 2px;
padding-bottom: 2px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-top: 1px solid var(--separator);
} }
.toolbar > * { .toolbar > * {
flex: 0 0 content; flex: 0 0 content;

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

@@ -69,7 +69,7 @@ const load_settings = () => {
onMount(load_settings) onMount(load_settings)
</script> </script>
<table class="directory"> <table class="directory bubble">
<thead> <thead>
<tr class="header_row"> <tr class="header_row">
<td></td> <td></td>
@@ -184,10 +184,13 @@ onMount(load_settings)
<style> <style>
.directory { .directory {
background: var(--body_background); /* A table with collapsed borders can't have rounded corners */
border-collapse: collapse; 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); backdrop-filter: blur(4px);
margin: auto; /* center */ overflow: hidden;
} }
td { td {
padding-top: 0; padding-top: 0;
@@ -205,9 +208,6 @@ td {
color: var(--body_text_color); color: var(--body_text_color);
cursor: pointer; cursor: pointer;
} }
.node:not(:last-child) {
border-bottom: 1px solid var(--separator);
}
.node:hover:not(.node_selected) { .node:hover:not(.node_selected) {
background: var(--input_hover_background); background: var(--input_hover_background);
color: var(--input_text); 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 { 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 { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore"; import { breadcrumbs_store } from "wrap/HeaderStore";
import { FSNavigator } from "filesystem/FSNavigator"; import { FSNavigator } from "filesystem/FSNavigator";
let { let {

2
svelte/src/util/TabMenu.svelte
View File

@@ -12,7 +12,7 @@ export type Tab = {
</script> </script>
<script lang="ts"> <script lang="ts">
import { onMount, type Component } from "svelte"; import { onMount, type Component } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore"; import { breadcrumbs_store } from "wrap/HeaderStore";
import { current_page_store } from "wrap/RouterStore"; import { current_page_store } from "wrap/RouterStore";
let { title = $bindable(""), pages = $bindable([]) }: { let { title = $bindable(""), pages = $bindable([]) }: {

4
svelte/src/wrap/BreadcrumbStore.ts
View File

@@ -1,4 +0,0 @@
import type { Snippet } from "svelte";
import { writable } from "svelte/store";
export let breadcrumbs_store = writable(null as Snippet);

7
svelte/src/wrap/HeaderStore.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { Snippet } from "svelte";
import { writable } from "svelte/store";
// The contents of the bar at the top of the page. The breadcrumbs show where
// the user is, the toolbar holds actions for the page, like the file manager's
export let breadcrumbs_store = writable(null as Snippet);
export let toolbar_store = writable(null as Snippet);

18
svelte/src/wrap/MainMenu.svelte
View File

@@ -17,7 +17,7 @@ import { get_user } from "lib/NovaAPI";
import Tree from "./Tree.svelte"; import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte"; import MenuEntry from "./MenuEntry.svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import { breadcrumbs_store } from "./BreadcrumbStore"; import { breadcrumbs_store, toolbar_store } from "./HeaderStore";
import ProgressBar from "util/ProgressBar.svelte"; import ProgressBar from "util/ProgressBar.svelte";
import NovaLogo, { update_favicon } from "util/NovaLogo.svelte"; import NovaLogo, { update_favicon } from "util/NovaLogo.svelte";
@@ -279,15 +279,19 @@ const set_offset = (off: number) => {
<div class="page"> <div class="page">
<div class="header bubble"> <div class="header bubble">
<button class="menu_button" onclick={toggle_menu}>
<i class="icon">menu</i>
</button>
<div class="breadcrumbs"> <div class="breadcrumbs">
<button class="menu_button" onclick={toggle_menu}>
<i class="icon">menu</i>
</button>
{#if $breadcrumbs_store !== null} {#if $breadcrumbs_store !== null}
{@render $breadcrumbs_store()} {@render $breadcrumbs_store()}
{/if} {/if}
</div> </div>
{#if $toolbar_store !== null}
{@render $toolbar_store()}
{/if}
</div> </div>
<Router/> <Router/>
@@ -365,9 +369,7 @@ const set_offset = (off: number) => {
.header { .header {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center;
justify-content: left;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
position: sticky; position: sticky;
top: 4px; top: 4px;

2
svelte/src/wrap/Router.svelte
View File

@@ -4,7 +4,7 @@ import NotFound from "./NotFound.svelte";
import Footer from "layout/Footer.svelte"; import Footer from "layout/Footer.svelte";
import { current_page_store, type Tab } from "./RouterStore"; import { current_page_store, type Tab } from "./RouterStore";
import { get_user, type User } from "lib/NovaAPI"; import { get_user, type User } from "lib/NovaAPI";
import { breadcrumbs_store } from "./BreadcrumbStore"; import { breadcrumbs_store } from "./HeaderStore";
import { loading_run } from "lib/Loading"; import { loading_run } from "lib/Loading";
// Pages are downloaded when they are opened for the first time. Someone who // Pages are downloaded when they are opened for the first time. Someone who