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

Split filesystem up in components

Browse Source 
Also thumbnails work now
This commit is contained in:
Fornax
2023-05-17 15:34:56 +02:00
parent c4cd2e1ee5
commit 277637511c
18 changed files with 711 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
svelte/src/filesystem/Toolbar.svelte Normal file
View File

@@ -0,0 +1,133 @@
<script>
import { createEventDispatcher } from "svelte";
import Sharebar from "./Sharebar.svelte";
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
let dispatch = createEventDispatcher()
export let navigator
export let state = {
base: {
type: "",
path: "",
},
children: [],
shuffle: false
}
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)
</script>
<div class="toolbar" class:toolbar_visible={visible}>
{#if state.base.type === "file"}
<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="separator"></div>
<div class="button_row">
<button on:click={() => {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={() => {navigator.open_sibling(1)}}>
<i class="icon">skip_next</i>
</button>
</div>
{#if state.base.type === "file"}
<button on:click={() => dispatch("download")} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={() => sharebar_visible = !sharebar_visible} 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.base.path !== "/"}
<button on:click={() => edit_window.edit(state.base)} class="toolbar_button" class:button_highlight={edit_visible}>
<i class="icon">edit</i> <u>E</u>dit
</button>
{/if}
</div>
<Sharebar visible={sharebar_visible}/>
<style>
.toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
left: -8em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.5s;
}
.toolbar_visible { left: 0; }
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 4px 0;
background-color: var(--separator);
}
.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 {
display: flex;
flex-direction: row;
}
.button_row > * {
flex: 1 1 auto;
}
</style>