Make filesystem view more responsive by moving the toolbar

svelte/src/filesystem/Breadcrumbs.svelte

@@ -5,6 +5,7 @@ export let state = {}
 export let fs_navigator
 </script>
 
+<div class="breadcrumbs">
 	{#each state.path as node, i (node.path)}
 		{@const shared = node.id !== undefined && node.id !== "me"}
 		<a
@@ -16,13 +17,23 @@ export let fs_navigator
 			{#if shared}
 				<i class="icon small">share</i>
 			{/if}
-		<div class="node_name" class:nopad={shared}>
+			<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;

svelte/src/filesystem/FileStats.svelte

@@ -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>
+<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.75em;
-	font-size: 0.8em;
 	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>

svelte/src/filesystem/Filesystem.svelte

@@ -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
+		<div>
-			on:click={() => toolbar_visible = !toolbar_visible}
+			<HomeButton/>
-			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>
+
+		<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: 0 0 0;
-	flex-shrink: 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: 1 1 0;
-	flex-shrink: 1;
+	display: flex;
-	position: relative;
+	flex-direction: row;
-	display: inline-block;
+	overflow: hidden;
-	width: auto;
+}
-	height: auto;
+@media (orientation: portrait) {
-	margin: 0;
+	.viewer_area {
+		flex-direction: column-reverse;
+	}
 }
 
 .file_preview {
-	position: absolute;
+	flex: 1 1 0;
-	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;
 	border-radius: 8px;
+	overflow: auto;
 	border: 2px solid var(--separator);
 }
-
-.file_preview.toolbar_visible {
-	left: 8em;
-}
 </style>

svelte/src/filesystem/Toolbar.svelte

@@ -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,28 +46,16 @@ let share = async () => {
 			url: share_url
 		})
 	} else {
-		console.debug("Navigator does not support sharing")
+		alert("Navigator does not support sharing")
-		sharebar_visible = !sharebar_visible
 	}
 }
 </script>
 
-<div class="toolbar" class:toolbar_visible={visible}>
+<div class="toolbar">
-	{#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="separator"></div>
+	<div class="grid">
 
 		<div class="button_row">
 			<button on:click={() => {fs_navigator.open_sibling(-1)}}>
@@ -113,9 +87,11 @@ let share = async () => {
 			</button>
 		{/if}
 
-	<button on:click={share} class="toolbar_button" class:button_highlight={sharebar_visible}>
+		{#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
@@ -127,25 +103,20 @@ let share = async () => {
 			</button>
 		{/if}
 	</div>
-
+</div>
-<Sharebar visible={sharebar_visible} state={state} fs_navigator={fs_navigator} share_url={share_url}/>
 
 <style>
 .toolbar {
-	position: absolute;
+	flex: 0 0 auto;
-	width: 8em;
+	overflow-x: hidden;
-	overflow: hidden;
+	overflow-y: scroll;
-	float: left;
+}
-	left: -8em;
+.grid {
-	bottom: 0;
+	display: grid;
-	top: 0;
+	grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-	padding: 0;
-	text-align: left;
-	transition: left 0.25s;
 }
-.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 {

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -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%;

svelte/src/filesystem/filemanager/ListView.svelte

@@ -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;

svelte/src/filesystem/viewers/Audio.svelte

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

svelte/src/util/Modal.svelte

@@ -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 */