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

Make bottom menu collapsible

Browse Source
This commit is contained in:
Fornax
2023-11-15 16:40:55 +01:00
parent 6e30ce896f
commit c2372dbcb3
3 changed files with 82 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,51 +73,44 @@ $: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
onDestroy(close_socket)
</script>
<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}
{#if state.base.type === "file"}
{#if error_msg !== ""}
{error_msg}
{:else}
<div class="group">
<div class="label">Size</div>
<div class="stat">{formatDataVolume(state.base.file_size, 3)}</div>
<div class="label">Downloads</div>
<div class="stat">{formatThousands(downloads)}</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 class="label">Transfer used</div>
<div class="stat">{formatDataVolume(transfer_used, 3)}</div>
</div>
{/if}
</div>
<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}
<style>
.container {
display: flex;
flex-direction: column;
}
.group {
flex: 1 1 auto;
}
@@ -131,10 +124,7 @@ onDestroy(close_socket)
.stat {
text-align: center;
}
@media (orientation: portrait) {
.container {
flex-direction: row;
}
@media (max-width: 700px) {
.label {
text-align: center;
padding-left: 0;

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

@@ -210,8 +210,6 @@ const loading_evt = e => {
.headerbar > * {
flex-grow: 0;
flex-shrink: 0;
margin-left: 4px;
margin-right: 4px;
display: inline;
align-self: center;
}
@@ -222,7 +220,7 @@ const loading_evt = e => {
flex-direction: row;
overflow: hidden;
}
@media (orientation: portrait) {
@media (max-width: 700px) {
.viewer_area {
flex-direction: column-reverse;
}

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

@@ -1,6 +1,6 @@
<script>
import { createEventDispatcher } from "svelte";
import Sharebar, { generate_share_url } from "./Sharebar.svelte";
import { generate_share_url } from "./Sharebar.svelte";
import { copy_text } from "../util/Util.svelte";
import FileStats from "./FileStats.svelte";
@@ -46,13 +46,29 @@ let share = async () => {
url: share_url
})
} else {
alert("Navigator does not support sharing")
alert("Navigator does not support sharing, use copy link button to copy the link instead")
}
}
let expanded = false
let expand = e => {
e.preventDefault()
e.stopPropagation()
expanded = !expanded
}
</script>
<div class="toolbar">
<FileStats state={state}/>
<div class="toolbar" class:expanded>
<div class="stats_container" on:click={expand} on:keypress={expand} role="button" tabindex="0">
<button class="button_expand" on:click={expand}>
{#if expanded}
<i class="icon">expand_more</i>
{:else}
<i class="icon">expand_less</i>
{/if}
</button>
<FileStats state={state}/>
</div>
<div class="separator"></div>
<div class="grid">
@@ -87,11 +103,9 @@ let share = async () => {
</button>
{/if}
{#if navigator.share}
<button on:click={share} class="toolbar_button">
<i class="icon">share</i> Share
</button>
{/if}
<button on:click={share} class="toolbar_button">
<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
@@ -110,6 +124,7 @@ let share = async () => {
flex: 0 0 auto;
overflow-x: hidden;
overflow-y: scroll;
transition: max-height 0.3s;
}
.grid {
display: grid;
@@ -133,4 +148,29 @@ let share = async () => {
.button_row > * {
flex: 1 1 auto;
}
.stats_container {
display: flex;
flex-direction: column;
}
.button_expand {
display: none;
}
@media (max-width: 700px) {
.toolbar {
overflow-y: hidden;
max-height: 2.5em;
}
.toolbar.expanded {
overflow-y: scroll;
max-height: 25vh;
}
.stats_container {
flex-direction: row;
}
.button_expand {
display: inline-block;
}
}
</style>