Replace event dispatcher with a callback in filemanager
This commit is contained in:
@@ -1,22 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
|
||||
import { fs_encode_path } from "lib/FilesystemAPI";
|
||||
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
|
||||
import { highlight_current_page } from "lib/HighlightCurrentPage";
|
||||
|
||||
let editing = $state(false)
|
||||
|
||||
const toggle_edit = () => {
|
||||
editing = !editing
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="title">
|
||||
<div class="hide_small">Bookmarks</div>
|
||||
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
|
||||
<i class="icon">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#each $bookmarks_store as bookmark}
|
||||
<div class="row">
|
||||
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
|
||||
<i class="icon">{bookmark.icon}</i>
|
||||
<span class="hide_small">{bookmark.label}</span>
|
||||
</a>
|
||||
<button onclick={() => bookmark_del(bookmark.id)}>
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
{#if editing}
|
||||
<button onclick={() => bookmark_del(bookmark.id)}>
|
||||
<i class="icon">delete</i>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.title > div {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.title > button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -6,7 +6,7 @@ import { formatDataVolume } from "util/Formatting";
|
||||
import Router from "wrap/Router.svelte";
|
||||
import Bookmarks from "./Bookmarks.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { fs_get_node } from "lib/FilesystemAPI";
|
||||
import { fs_get_node } from "lib/FilesystemAPI.svelte";
|
||||
import { css_from_path } from "filesystem/edit_window/Branding";
|
||||
import { loading_run, loading_store } from "lib/Loading";
|
||||
import Spinner from "util/Spinner.svelte";
|
||||
@@ -25,82 +25,84 @@ onMount(async () => {
|
||||
</script>
|
||||
|
||||
<div class="nav_container">
|
||||
<nav class="nav">
|
||||
<a class="button" href="/" use:highlight_current_page>
|
||||
<i class="icon">home</i>
|
||||
<span class="hide_small">Home</span>
|
||||
</a>
|
||||
<div class="scroll_container">
|
||||
<nav class="nav">
|
||||
<a class="button" href="/" use:highlight_current_page>
|
||||
<i class="icon">home</i>
|
||||
<span class="hide_small">Home</span>
|
||||
</a>
|
||||
|
||||
{#if $user.username !== undefined && $user.username !== ""}
|
||||
<div class="separator hide_small"></div>
|
||||
{#if $user.username !== undefined && $user.username !== ""}
|
||||
<div class="separator hide_small"></div>
|
||||
|
||||
<div class="username hide_small">
|
||||
{$user.username}
|
||||
</div>
|
||||
<div class="username hide_small">
|
||||
{$user.username}
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="stats_table hide_small">
|
||||
<div>Subscription</div>
|
||||
<div>{$user.subscription.name}</div>
|
||||
|
||||
{#if $user.subscription.type === "prepaid"}
|
||||
<div>Credit</div>
|
||||
<div><Euro amount={$user.balance_micro_eur}/></div>
|
||||
{/if}
|
||||
|
||||
<div>Storage used</div>
|
||||
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
|
||||
<div>Transfer used</div>
|
||||
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
|
||||
</div>
|
||||
|
||||
<div class="separator hide_small"></div>
|
||||
|
||||
<a class="button" href="/d/me" use:highlight_current_page>
|
||||
<i class="icon">folder</i>
|
||||
<span class="hide_small">Filesystem</span>
|
||||
</a>
|
||||
<a class="button" href="/user" use:highlight_current_page>
|
||||
<i class="icon">dashboard</i>
|
||||
<span class="hide_small">Dashboard</span>
|
||||
</a>
|
||||
{#if $user.is_admin}
|
||||
<a class="button" href="/admin" use:highlight_current_page>
|
||||
<i class="icon">admin_panel_settings</i>
|
||||
<span class="hide_small">Admin Panel</span>
|
||||
</a>
|
||||
{/if}
|
||||
<button class="button" onclick={()=> logout_user("/")}>
|
||||
<i class="icon">logout</i>
|
||||
<span class="hide_small">Log out</span>
|
||||
</button>
|
||||
{:else}
|
||||
<a class="button" href="/login" use:highlight_current_page>
|
||||
<i class="icon">login</i>
|
||||
<span class="hide_small">Login</span>
|
||||
</a>
|
||||
<a class="button" href="/register" use:highlight_current_page>
|
||||
<i class="icon">how_to_reg</i>
|
||||
<span class="hide_small">Register</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="stats_table hide_small">
|
||||
<div>Subscription</div>
|
||||
<div>{$user.subscription.name}</div>
|
||||
|
||||
{#if $user.subscription.type === "prepaid"}
|
||||
<div>Credit</div>
|
||||
<div><Euro amount={$user.balance_micro_eur}/></div>
|
||||
{/if}
|
||||
|
||||
<div>Storage used</div>
|
||||
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
|
||||
<div>Transfer used</div>
|
||||
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
|
||||
</div>
|
||||
|
||||
<div class="separator hide_small"></div>
|
||||
|
||||
<a class="button" href="/d/me" use:highlight_current_page>
|
||||
<i class="icon">folder</i>
|
||||
<span class="hide_small">Filesystem</span>
|
||||
<a class="button" href="/speedtest" use:highlight_current_page>
|
||||
<i class="icon">speed</i>
|
||||
<span class="hide_small">Speedtest</span>
|
||||
</a>
|
||||
<a class="button" href="/user" use:highlight_current_page>
|
||||
<i class="icon">dashboard</i>
|
||||
<span class="hide_small">Dashboard</span>
|
||||
<a class="button" href="/appearance" use:highlight_current_page>
|
||||
<i class="icon">palette</i>
|
||||
<span class="hide_small">Themes</span>
|
||||
</a>
|
||||
{#if $user.is_admin}
|
||||
<a class="button" href="/admin" use:highlight_current_page>
|
||||
<i class="icon">admin_panel_settings</i>
|
||||
<span class="hide_small">Admin Panel</span>
|
||||
</a>
|
||||
{/if}
|
||||
<button class="button" onclick={()=> logout_user("/")}>
|
||||
<i class="icon">logout</i>
|
||||
<span class="hide_small">Log out</span>
|
||||
</button>
|
||||
{:else}
|
||||
<a class="button" href="/login" use:highlight_current_page>
|
||||
<i class="icon">login</i>
|
||||
<span class="hide_small">Login</span>
|
||||
</a>
|
||||
<a class="button" href="/register" use:highlight_current_page>
|
||||
<i class="icon">how_to_reg</i>
|
||||
<span class="hide_small">Register</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="separator"></div>
|
||||
|
||||
<a class="button" href="/speedtest" use:highlight_current_page>
|
||||
<i class="icon">speed</i>
|
||||
<span class="hide_small">Speedtest</span>
|
||||
</a>
|
||||
<a class="button" href="/appearance" use:highlight_current_page>
|
||||
<i class="icon">palette</i>
|
||||
<span class="hide_small">Themes</span>
|
||||
</a>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<Bookmarks/>
|
||||
</nav>
|
||||
<Bookmarks/>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
@@ -133,13 +135,17 @@ onMount(async () => {
|
||||
background: var(--shaded_background);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.scroll_container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 15em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
.nav > .button {
|
||||
background: none;
|
||||
@@ -165,7 +171,7 @@ onMount(async () => {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.2em 1em;
|
||||
margin: 3px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
|
||||
Reference in New Issue
Block a user