The great button centerification

svelte/src/filesystem/Breadcrumbs.svelte

@@ -33,6 +33,7 @@ export let fs_navigator
 	justify-content: center;
 	flex-wrap: wrap;
 	flex-direction: row;
+	overflow: hidden;
 }
 .breadcrumb {
 	min-width: 1em;
@@ -44,15 +45,15 @@ export let fs_navigator
 	flex-direction: row;
 }
 .node_name {
-	margin: 6px 8px;
+	margin: 2px 8px;
 	max-width: 20vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 .node_name.base {
-	max-width: none;
-	white-space: unset;
+	/* The base name uses all available space */
+	max-width: unset;
 }
 .nopad {
 	margin-left: 0;

svelte/src/filesystem/EditWindow.svelte

@@ -2,6 +2,7 @@
 import { fs_delete_all, fs_rename, fs_update } from "./FilesystemAPI";
 import Modal from "../util/Modal.svelte";
 import { createEventDispatcher } from "svelte";
+import Button from "../layout/Button.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -66,7 +67,9 @@ const save = async () => {
 		fs_navigator.reload()
 	}
 }
-const delete_file = async () => {
+const delete_file = async e => {
+	e.preventDefault()
+
 	try {
 		dispatch("loading", true)
 		await fs_delete_all(file.path)
@@ -110,9 +113,7 @@ const delete_file = async () => {
 					Delete this file or directory. If this is a directory then all
 					subfiles will be deleted as well. This action cannot be undone.
 				</p>
-				<button on:click|preventDefault={delete_file} class="button_red" style="align-self: flex-start;">
-					<i class="icon small">delete</i> Delete
-				</button>
+				<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
 			</div>
 		{:else if tab === "share"}
 			<div class="form">

svelte/src/filesystem/FileStats.svelte

@@ -113,18 +113,16 @@ onDestroy(close_socket)
 <style>
 .group {
 	flex: 1 1 auto;
+	text-align: center;
 }
 .label {
 	padding-left: 0.5em;
 	text-align: left;
 	font-size: 0.75em;
-	line-height: 0.7em;
+	line-height: 0.75em;
 	margin-top: 0.5em;
 }
-.stat {
-	text-align: center;
-}
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.label {
 		text-align: center;
 		padding-left: 0;

svelte/src/filesystem/Filesystem.svelte

@@ -1,6 +1,5 @@
 <script>
 import { onMount } from 'svelte';
-import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
 import LoadingIndicator from '../util/LoadingIndicator.svelte';
 import EditWindow from './EditWindow.svelte';
 import Toolbar from './Toolbar.svelte';
@@ -14,6 +13,7 @@ import HomeButton from '../file_viewer/HomeButton.svelte';
 import { fs_path_url } from './FilesystemUtil';
 
 let loading = true
+let toolbar
 let upload_widget
 let download_frame
 let details_visible = false
@@ -47,6 +47,9 @@ const keydown = e => {
 	}
 
 	switch (e.key) {
+		case "c":
+			toolbar.copy_link()
+			break;
 		case "i":
 			details_visible = !details_visible
 			break;
@@ -113,7 +116,7 @@ const loading_evt = e => {
 <div class="file_viewer">
 	<div class="headerbar">
 		<div>
-			<HomeButton/>
+			<HomeButton nobg/>
 		</div>
 
 		<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
@@ -121,6 +124,7 @@ const loading_evt = e => {
 
 	<div class="viewer_area">
 		<Toolbar
+			bind:this={toolbar}
 			fs_navigator={fs_navigator}
 			state={state}
 			bind:details_visible={details_visible}
@@ -220,7 +224,7 @@ const loading_evt = e => {
 	flex-direction: row;
 	overflow: hidden;
 }
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.viewer_area {
 		flex-direction: column-reverse;
 	}

svelte/src/filesystem/Toolbar.svelte

@@ -23,7 +23,7 @@ export let edit_visible = false
 
 $: share_url = generate_share_url(state.path)
 let link_copied = false
-const copy_link = () => {
+export const copy_link = () => {
 	if (share_url === "") {
 		edit_window.edit(state.base, "share", true)
 		return
@@ -86,34 +86,40 @@ let expand = e => {
 		</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 on:click={() => dispatch("search")} class:button_highlight={view === "search"}>
+				<i class="icon">search</i>
+				<span>Search</span>
 			</button>
 		{/if}
 
 		{#if state.base.type === "file"}
-			<button on:click={() => dispatch("download")} class="toolbar_button">
-				<i class="icon">save</i> Download
+			<button on:click={() => dispatch("download")}>
+				<i class="icon">save</i>
+				<span>Download</span>
 			</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 on:click={copy_link} class:button_highlight={link_copied}>
+				<i class="icon">content_copy</i>
+				<span><u>C</u>opy Link</span>
 			</button>
 		{/if}
 
-		<button on:click={share} class="toolbar_button">
-			<i class="icon">share</i> Share
+		<button on:click={share}>
+			<i class="icon">share</i>
+			<span>Share</span>
 		</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 on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
+			<i class="icon">help</i>
+			<span>Deta<u>i</u>ls</span>
 		</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 on:click={() => edit_window.edit(state.base, true)} class:button_highlight={edit_visible}>
+				<i class="icon">edit</i>
+				<span><u>E</u>dit</span>
 			</button>
 		{/if}
 	</div>
@@ -134,12 +140,8 @@ let expand = e => {
 .separator {
 	height: 2px;
 	width: 100%;
-	margin: 4px 0;
 	background-color: var(--separator);
 }
-.toolbar_button {
-	text-align: left;
-}
 
 .button_row {
 	display: flex;
@@ -147,6 +149,7 @@ let expand = e => {
 }
 .button_row > * {
 	flex: 1 1 auto;
+	justify-content: center;
 }
 
 .stats_container {
@@ -156,14 +159,14 @@ let expand = e => {
 .button_expand {
 	display: none;
 }
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.toolbar {
 		overflow-y: hidden;
 		max-height: 2.5em;
 	}
 	.toolbar.expanded {
 		overflow-y: scroll;
-		max-height: 25vh;
+		max-height: 40vh;
 	}
 	.stats_container {
 		flex-direction: row;