fnx_web/svelte/src/filesystem/Toolbar.svelte

<script lang="ts">
import { createEventDispatcher } from "svelte";
import { copy_text } from "util/Util.svelte";
import FileStats from "./FileStats.svelte";
import type { FSNavigator } from "./FSNavigator";
import EditWindow from "./edit_window/EditWindow.svelte";
import { fs_share_url } from "lib/FilesystemAPI";
import ShareDialog from "./ShareDialog.svelte";

let dispatch = createEventDispatcher()

export let nav: FSNavigator
export let details_visible = false
export let edit_window: EditWindow
export let edit_visible = false
let share_dialog: ShareDialog

$: share_url = fs_share_url($nav.path)
let link_copied = false
export const copy_link = () => {
	if (share_url === "") {
		edit_window.edit(nav.base, true, "share")
		return
	}

	copy_text(share_url)
	link_copied = true
	setTimeout(() => {link_copied = false}, 60000)
}
</script>

<div class="toolbar">
	<div class="grid">
		<FileStats nav={nav}/>

		<div class="button_row">
			<button on:click={() => {nav.open_sibling(-1)}}>
				<i class="icon">skip_previous</i>
			</button>
			<button on:click={() => {nav.shuffle = !nav.shuffle}} class:button_highlight={nav.shuffle}>
				<i class="icon">shuffle</i>
			</button>
			<button on:click={() => {nav.open_sibling(1)}}>
				<i class="icon">skip_next</i>
			</button>
		</div>

		<button on:click={() => dispatch("download")}>
			<i class="icon">save</i>
			<span>Download</span>
		</button>

		{#if share_url !== ""}
			<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}

		<!-- Share button is enabled when: The browser has a sharing API, or the user can edit the file (to enable sharing)-->
		{#if $nav.base.id !== "me" && (navigator.share !== undefined || $nav.permissions.write === true)}
			<button on:click={(e) => share_dialog.open(e, nav.path)}>
				<i class="icon">share</i>
				<span>Share</span>
			</button>
		{/if}

		<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 $nav.base.id !== "me" && $nav.permissions.write === true}
			<button on:click={() => edit_window.edit(nav.base, true, "file")} class:button_highlight={edit_visible}>
				<i class="icon">edit</i>
				<span><u>E</u>dit</span>
			</button>
		{/if}
	</div>
</div>

<ShareDialog nav={nav} bind:this={share_dialog}/>

<style>
.toolbar {
	flex: 0 0 auto;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: max-height 0.3s;
	border-top: 1px solid var(--separator);

	background: var(--shaded_background);
	backdrop-filter: blur(4px);
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
}
.button_row {
	display: flex;
	flex-direction: row;
}
.button_row > * {
	flex: 1 1 auto;
	justify-content: center;
}
</style>