pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI overhaul, import fixes, fix user store

Browse Source
This commit is contained in:
Wim Brand
2026-07-30 17:07:46 +02:00
parent 773149169b
commit 4b8bd11a4c
75 changed files with 1106 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
svelte/src/wrap/MainMenu.svelte
View File

@@ -9,7 +9,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.svelte";
import { fs_get_node } from "lib/FilesystemAPI";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
@@ -32,12 +32,12 @@ const min_screen_size_fullscreen_menu = 500
// If the screen is smaller than this the menu will be closed by default
const min_screen_size_menu_open = 800
onMount(() => {
onMount(async () => {
if (document.documentElement.clientWidth < min_screen_size_menu_open) {
menu_close()
}
loading_run(async () => {
await loading_run(async () => {
const user = await get_user()
if (user.username === undefined || user.username === "") {
return
@@ -79,10 +79,14 @@ const touchmove = (e: TouchEvent) => {
// The cursor must have moved at least swipe_dead_zone pixels and twice as
// much on the x axis than the y axis for it to count as a swipe
if (abs_x > swipe_dead_zone && abs_x / 2 > abs_y) {
set_offset(initial_offset+(x*2))
} else {
touchend(e)
if (abs_x > swipe_dead_zone) {
if (abs_x > abs_y) {
e.preventDefault()
e.stopPropagation()
set_offset(initial_offset+(x*2))
} else {
touchend(e)
}
}
}
@@ -151,7 +155,7 @@ const set_offset = (off: number) => {
<div class="wrap">
<div class="nav_container" bind:this={menu}>
<div class="scroll_container">
<nav class="nav" bind:this={nav}>
<nav class="nav bubble" bind:this={nav}>
{#if document.documentElement.clientWidth < min_screen_size_menu_open}
<button class="button" onclick={toggle_menu}>
<i class="icon">menu</i>
@@ -159,26 +163,12 @@ const set_offset = (off: number) => {
</button>
{/if}
<MenuEntry id="home" collapsed={false} no_border>
{#snippet title()}
<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
<span style="flex: 1 1 auto;">Nova.storage</span>
<img src="/res/img/nova_64.png" style="width: 1.5em; height: 1.5em; flex: 0 0 auto;" alt="Nova.storage logo">
</a>
{/snippet}
{#snippet body()}
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span>Themes</span>
</a>
{/snippet}
</MenuEntry>
<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
<span style="flex: 1 1 auto;">Nova.storage</span>
<img src="/res/img/nova_64.png" style="width: 1.5em; height: 1.5em; flex: 0 0 auto;" alt="Nova.storage logo">
</a>
{#if $user.username !== undefined && $user.username !== ""}
{#if $user !== null}
<MenuEntry id="subscription_info" collapsed={false}>
{#snippet title()}
<div class="username">{$user.username}</div>
@@ -202,6 +192,10 @@ const set_offset = (off: number) => {
{/snippet}
</MenuEntry>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon">person</i>
<span>Account</span>
</a>
<a class="button" href="/d/me" use:highlight_current_page>
<i class="icon">folder</i>
<span>Filesystem</span>
@@ -210,10 +204,6 @@ const set_offset = (off: number) => {
<i class="icon">delete</i>
<span>Trash</span>
</a>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon">person</i>
<span>Account</span>
</a>
{#if $user.is_admin}
<a class="button" href="/admin" use:highlight_current_page>
<i class="icon">admin_panel_settings</i>
@@ -231,6 +221,24 @@ const set_offset = (off: number) => {
</a>
{/if}
<MenuEntry id="other_pages" collapsed={false}>
{#snippet title()}
<span style="flex: 1 1 auto;">
<span style="flex: 1 1 auto;">Other pages</span>
</span>
{/snippet}
{#snippet body()}
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span>Themes</span>
</a>
{/snippet}
</MenuEntry>
<Bookmarks/>
<Tree/>
</nav>
@@ -238,7 +246,7 @@ const set_offset = (off: number) => {
</div>
<div class="page">
<div class="header">
<div class="header bubble">
<button class="menu_button" onclick={toggle_menu}>
<i class="icon">menu</i>
</button>
@@ -253,7 +261,6 @@ const set_offset = (off: number) => {
<Router/>
</div>
{#if $loading_store !== 0}
<div class="spinner">
<Spinner/>
@@ -279,8 +286,6 @@ const set_offset = (off: number) => {
}
.nav_container {
flex: 0 0 auto;
border-right: 1px solid var(--separator);
background: var(--body_background);
backdrop-filter: blur(3px);
z-index: 9;
}
@@ -291,11 +296,15 @@ const set_offset = (off: number) => {
overflow-y: auto;
max-height: 100vh;
height: 100vh;
padding: 4px;
scrollbar-gutter: stable;
}
.nav {
display: flex;
flex-direction: column;
width: 15em;
margin: 0;
padding: 4px;
}
.button {
background: none;
@@ -326,11 +335,9 @@ const set_offset = (off: number) => {
flex-direction: row;
align-items: center;
justify-content: left;
background: var(--body_background);
border-bottom: 1px solid var(--separator);
backdrop-filter: blur(3px);
position: sticky;
top: 0;
top: 4px;
z-index: 8; /* below navigation, on top of most other things */
}
.menu_button {
@@ -344,6 +351,7 @@ const set_offset = (off: number) => {
flex-wrap: wrap;
flex-direction: row;
align-items: center;
overflow-x: hidden;
}
.spinner {
@@ -352,5 +360,6 @@ const set_offset = (off: number) => {
right: 10px;
height: 120px;
width: 120px;
z-index: 11; /* One above the menu */
}
</style>