From c2372dbcb3617ea514a20ebc98b05ddee65f1da2 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Wed, 15 Nov 2023 16:40:55 +0100
Subject: [PATCH] Make bottom menu collapsible

---
 svelte/src/filesystem/FileStats.svelte  | 74 +++++++++++--------------
 svelte/src/filesystem/Filesystem.svelte |  4 +-
 svelte/src/filesystem/Toolbar.svelte    | 58 ++++++++++++++++---
 3 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte
index ff2c368..a6b32ee 100644
--- a/svelte/src/filesystem/FileStats.svelte
+++ b/svelte/src/filesystem/FileStats.svelte
@@ -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;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 5d7e027..8575c7e 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -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;
 	}
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index dc8ace3..ce86fb5 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -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>