125 lines
3.2 KiB
Svelte
125 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { copy_text } from "util/Util";
|
|
import FileStats from "./FileStats.svelte";
|
|
import type { FSNavigator } from "./FSNavigator";
|
|
import EditWindow from "./edit_window/EditWindow.svelte";
|
|
import { fs_share_url, path_is_shared } from "lib/FilesystemAPI.svelte";
|
|
import ShareDialog from "./ShareDialog.svelte";
|
|
import { bookmark_add, bookmark_del, bookmarks_store, is_bookmark } from "lib/Bookmarks";
|
|
|
|
let {
|
|
nav = $bindable(),
|
|
details_visible = $bindable(false),
|
|
edit_window,
|
|
edit_visible = $bindable(false)
|
|
}: {
|
|
nav: FSNavigator;
|
|
details_visible?: boolean;
|
|
edit_window: EditWindow;
|
|
edit_visible?: boolean;
|
|
} = $props();
|
|
|
|
let share_dialog: ShareDialog = $state()
|
|
let link_copied = $state(false)
|
|
export const copy_link = () => {
|
|
const share_url = fs_share_url($nav.path)
|
|
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 onclick={() => {nav.open_sibling(-1)}}>
|
|
<i class="icon">skip_previous</i>
|
|
</button>
|
|
<button onclick={() => {nav.shuffle = !nav.shuffle}} class:button_highlight={nav.shuffle}>
|
|
<i class="icon">shuffle</i>
|
|
</button>
|
|
<button onclick={() => {nav.open_sibling(1)}}>
|
|
<i class="icon">skip_next</i>
|
|
</button>
|
|
</div>
|
|
|
|
<button onclick={() => $nav.base.download()}>
|
|
<i class="icon">save</i>
|
|
<span>Download</span>
|
|
</button>
|
|
|
|
{#if is_bookmark($bookmarks_store, $nav.base.id)}
|
|
<button onclick={() => bookmark_del($nav.base.id)}>
|
|
<i class="icon">bookmark_remove</i>
|
|
<span>Bookmark</span>
|
|
</button>
|
|
{:else}
|
|
<button onclick={() => bookmark_add($nav.base)}>
|
|
<i class="icon">bookmark_add</i>
|
|
<span>Bookmark</span>
|
|
</button>
|
|
{/if}
|
|
|
|
{#if path_is_shared($nav.path)}
|
|
<button onclick={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 navigator.share !== undefined || $nav.permissions.write === true}
|
|
<button onclick={(e) => share_dialog.open(e, nav.path)}>
|
|
<i class="icon">share</i>
|
|
<span>Share</span>
|
|
</button>
|
|
{/if}
|
|
|
|
<button onclick={() => 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 onclick={() => 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>
|