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

Make filesystem view more responsive by moving the toolbar

Browse Source
This commit is contained in:
Fornax
2023-11-15 15:50:54 +01:00
parent b53baa32f5
commit 6e30ce896f
8 changed files with 194 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,24 +5,35 @@ export let state = {}
export let fs_navigator
</script>
{#each state.path as node, i (node.path)}
{@const shared = node.id !== undefined && node.id !== "me"}
<a
href={"/d"+fs_encode_path(node.path)}
class="breadcrumb button"
class:button_highlight={state.base_index === i}
on:click|preventDefault={() => {fs_navigator.navigate(node.path, true)}}
>
{#if shared}
<i class="icon small">share</i>
{/if}
<div class="node_name" class:nopad={shared}>
{node.name}
</div>
</a>
{/each}
<div class="breadcrumbs">
{#each state.path as node, i (node.path)}
{@const shared = node.id !== undefined && node.id !== "me"}
<a
href={"/d"+fs_encode_path(node.path)}
class="breadcrumb button"
class:button_highlight={state.base_index === i}
on:click|preventDefault={() => {fs_navigator.navigate(node.path, true)}}
>
{#if shared}
<i class="icon small">share</i>
{/if}
<div class="node_name" class:nopad={shared} class:base={state.base_index === i}>
{node.name}
</div>
</a>
{/each}
</div>
<style>
.breadcrumbs {
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.breadcrumb {
min-width: 1em;
text-align: center;
@@ -34,6 +45,14 @@ export let fs_navigator
}
.node_name {
margin: 6px 8px;
max-width: 20vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.node_name.base {
max-width: none;
white-space: unset;
}
.nopad {
margin-left: 0;

70
svelte/src/filesystem/FileStats.svelte
View File

@@ -65,29 +65,79 @@ const close_socket = () => {
}
}
// Tallys
$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
onDestroy(close_socket)
</script>
<div>
{#if error_msg !== ""}
{error_msg}
{:else}
<div class="label">Downloads</div>
<div class="stat">{formatThousands(downloads)}</div>
<div class="label">Transfer used</div>
<div class="stat">{formatDataVolume(transfer_used, 3)}</div>
<div class="container">
{#if state.base.type === "file"}
{#if error_msg !== ""}
{error_msg}
{:else}
<div class="group">
<div class="label">Downloads</div>
<div class="stat">{formatThousands(downloads)}</div>
</div>
<div class="group">
<div class="label">Transfer used</div>
<div class="stat">{formatDataVolume(transfer_used, 3)}</div>
</div>
{/if}
<div class="group">
<div class="label">Size</div>
<div class="stat">{formatDataVolume(state.base.file_size, 3)}</div>
</div>
{:else if state.base.type === "dir" || state.base.type === "bucket"}
<div class="group">
<div class="label">Directories</div>
<div class="stat">{formatThousands(total_directories, 3)}</div>
</div>
<div class="group">
<div class="label">Files</div>
<div class="stat">{formatThousands(total_files, 3)}</div>
</div>
<div class="group">
<div class="label">Total size</div>
<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
</div>
{/if}
</div>
<style>
.container {
display: flex;
flex-direction: column;
}
.group {
flex: 1 1 auto;
}
.label {
padding-left: 0.5em;
text-align: left;
padding-left: 10px;
font-size: 0.8em;
font-size: 0.75em;
line-height: 0.7em;
margin-top: 0.5em;
}
.stat {
text-align: center;
}
@media (orientation: portrait) {
.container {
flex-direction: row;
}
.label {
text-align: center;
padding-left: 0;
}
}
</style>

103
svelte/src/filesystem/Filesystem.svelte
View File

@@ -10,10 +10,10 @@ import Navigator from './Navigator.svelte';
import FilePreview from './viewers/FilePreview.svelte';
import SearchView from './SearchView.svelte';
import UploadWidget from './upload_widget/UploadWidget.svelte';
import HomeButton from '../file_viewer/HomeButton.svelte';
import { fs_path_url } from './FilesystemUtil';
let loading = true
let toolbar_visible = (window.innerWidth > 600)
let upload_widget
let download_frame
let details_visible = false
@@ -112,23 +112,26 @@ const loading_evt = e => {
<div class="file_viewer">
<div class="headerbar">
<button
on:click={() => toolbar_visible = !toolbar_visible}
class="button_toggle_toolbar round"
class:button_highlight={toolbar_visible}
>
<i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home round">
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"/>
</a>
<div class="breadcrumbs">
<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
<div>
<HomeButton/>
</div>
<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
</div>
<div class="viewer_area">
<div class="file_preview checkers" class:toolbar_visible>
<Toolbar
fs_navigator={fs_navigator}
state={state}
bind:details_visible={details_visible}
edit_window={edit_window}
bind:edit_visible={edit_visible}
bind:view={view}
on:download={download}
on:search={search}
/>
<div class="file_preview checkers">
{#if view === "file"}
<FilePreview
fs_navigator={fs_navigator}
@@ -148,18 +151,6 @@ const loading_evt = e => {
/>
{/if}
</div>
<Toolbar
visible={toolbar_visible}
fs_navigator={fs_navigator}
state={state}
bind:details_visible={details_visible}
edit_window={edit_window}
bind:edit_visible={edit_visible}
bind:view={view}
on:download={download}
on:search={search}
/>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
@@ -195,20 +186,19 @@ const loading_evt = e => {
/* Viewer container */
.file_viewer {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--body_background);
}
/* Headerbar (row 1) */
.headerbar {
flex-grow: 0;
flex-shrink: 0;
flex: 0 0 0;
display: flex;
flex-direction: row;
text-align: left;
@@ -225,54 +215,23 @@ const loading_evt = e => {
display: inline;
align-self: center;
}
.button_toggle_toolbar > .icon {
font-size: 1.6em;
}
.breadcrumbs {
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
}
.button_home::after {
content: "pixeldrain";
}
@media (max-width: 600px) {
.button_home::after {
content: "pd";
}
}
/* File preview area (row 2) */
.viewer_area {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
flex: 1 1 0;
display: flex;
flex-direction: row;
overflow: hidden;
}
@media (orientation: portrait) {
.viewer_area {
flex-direction: column-reverse;
}
}
.file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
min-height: 100px;
min-width: 100px;
transition: left 0.25s;
overflow: auto;
text-align: center;
flex: 1 1 0;
border-radius: 8px;
overflow: auto;
border: 2px solid var(--separator);
}
.file_preview.toolbar_visible {
left: 8em;
}
</style>

152
svelte/src/filesystem/Toolbar.svelte
View File

@@ -1,7 +1,6 @@
<script>
import { createEventDispatcher } from "svelte";
import Sharebar, { generate_share_url } from "./Sharebar.svelte";
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
import { copy_text } from "../util/Util.svelte";
import FileStats from "./FileStats.svelte";
@@ -22,19 +21,6 @@ export let details_visible = false
export let edit_window
export let edit_visible = false
export let visible = true
let sharebar_visible = false
$: {
if (!visible) {
sharebar_visible = false
}
}
// Tallys
$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
$: share_url = generate_share_url(state.path)
let link_copied = false
const copy_link = () => {
@@ -60,92 +46,77 @@ let share = async () => {
url: share_url
})
} else {
console.debug("Navigator does not support sharing")
sharebar_visible = !sharebar_visible
alert("Navigator does not support sharing")
}
}
</script>
<div class="toolbar" class:toolbar_visible={visible}>
{#if state.base.type === "file"}
<FileStats state={state}/>
<div class="toolbar_label">Size</div>
<div class="toolbar_statistic">{formatDataVolume(state.base.file_size, 3)}</div>
{:else if state.base.type === "dir" || state.base.type === "bucket"}
<div class="toolbar_label">Directories</div>
<div class="toolbar_statistic">{formatThousands(total_directories, 3)}</div>
<div class="toolbar_label">Files</div>
<div class="toolbar_statistic">{formatThousands(total_files, 3)}</div>
<div class="toolbar_label">Total size</div>
<div class="toolbar_statistic">{formatDataVolume(total_file_size, 3)}</div>
{/if}
<div class="toolbar">
<FileStats state={state}/>
<div class="separator"></div>
<div class="grid">
<div class="button_row">
<button on:click={() => {fs_navigator.open_sibling(-1)}}>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
<i class="icon">shuffle</i>
</button>
<button on:click={() => {fs_navigator.open_sibling(1)}}>
<i class="icon">skip_next</i>
<div class="button_row">
<button on:click={() => {fs_navigator.open_sibling(-1)}}>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
<i class="icon">shuffle</i>
</button>
<button on:click={() => {fs_navigator.open_sibling(1)}}>
<i class="icon">skip_next</i>
</button>
</div>
{#if state.path[0].id === "me"}
<button on:click={() => dispatch("search")} class="toolbar_button" class:button_highlight={view === "search"}>
<i class="icon">search</i> Search
</button>
{/if}
{#if state.base.type === "file"}
<button on:click={() => dispatch("download")} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
{#if share_url !== ""}
<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
</button>
{/if}
{#if navigator.share}
<button on:click={share} class="toolbar_button">
<i class="icon">share</i> Share
</button>
{/if}
<button on:click={() => details_visible = !details_visible} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
{#if state.path.length > 1}
<button on:click={() => edit_window.edit(state.base, true)} class="toolbar_button" class:button_highlight={edit_visible}>
<i class="icon">edit</i> <u>E</u>dit
</button>
{/if}
</div>
{#if state.path[0].id === "me"}
<button on:click={() => dispatch("search")} class="toolbar_button" class:button_highlight={view === "search"}>
<i class="icon">search</i> Search
</button>
{/if}
{#if state.base.type === "file"}
<button on:click={() => dispatch("download")} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
{#if share_url !== ""}
<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
</button>
{/if}
<button on:click={share} class="toolbar_button" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={() => details_visible = !details_visible} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
{#if state.path.length > 1}
<button on:click={() => edit_window.edit(state.base, true)} class="toolbar_button" class:button_highlight={edit_visible}>
<i class="icon">edit</i> <u>E</u>dit
</button>
{/if}
</div>
<Sharebar visible={sharebar_visible} state={state} fs_navigator={fs_navigator} share_url={share_url}/>
<style>
.toolbar {
position: absolute;
width: 8em;
overflow: hidden;
float: left;
left: -8em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.25s;
flex: 0 0 auto;
overflow-x: hidden;
overflow-y: scroll;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}
.toolbar_visible { left: 0; }
.toolbar > .separator {
.separator {
height: 2px;
width: 100%;
margin: 4px 0;
@@ -153,17 +124,6 @@ let share = async () => {
}
.toolbar_button {
text-align: left;
width: calc(100% - 6px);
}
.toolbar_label {
text-align: left;
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
margin-top: 0.5em;
}
.toolbar_statistic {
text-align: center;
}
.button_row {

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

@@ -226,8 +226,9 @@ onMount(() => {
height: 100%;
width: 100%;
padding: 0;
overflow-y: auto;
overflow: auto;
text-align: center;
display: block;
}
.width_container {
position: relative;
@@ -238,7 +239,8 @@ onMount(() => {
background: var(--shaded_background);
}
.toolbar {
position: relative;
position: sticky;
top: 0;
display: inline-flex;
flex-direction: row;
width: 100%;

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

@@ -40,13 +40,13 @@ export let show_hidden = false
<a
href="/d/{child.id}"
on:click|preventDefault|stopPropagation={() => {dispatch("node_share_click", index)}}
class="button small_button"
class="button action_button"
>
<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
</a>
{/if}
{#if state.permissions.update}
<button class="small_button" on:click|preventDefault|stopPropagation={() => {dispatch("node_settings", index)}}>
<button class="action_button" on:click|preventDefault|stopPropagation={() => {dispatch("node_settings", index)}}>
<i class="icon">edit</i>
</button>
{/if}
@@ -117,6 +117,11 @@ td {
.node_icons {
white-space: nowrap;
text-align: right;
padding: 0;
}
.action_button {
margin: 0;
background: none;
}
.hidden {
display: none;

2
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -65,8 +65,6 @@ onMount(() => {
<style>
.container {
height: 100%;
width: 100%;
margin: 50px 0 0 0;
padding: 0;
overflow-y: auto;

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

@@ -111,7 +111,7 @@ const keydown = e => {
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0.7);
}
/* The modal looks weird when it's in the dead center of the page, so we use
these padding divs to move it 25% up */