Rename entrypoint to main.ts. Tweak text contrast
This commit is contained in:
446
svelte/src/wrap/App.svelte
Normal file
446
svelte/src/wrap/App.svelte
Normal file
@@ -0,0 +1,446 @@
|
||||
<script lang="ts">
|
||||
import { highlight_current_page } from "lib/HighlightCurrentPage";
|
||||
import { user } from "lib/UserStore";
|
||||
import Euro from "util/Euro.svelte";
|
||||
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 { css_from_path } from "filesystem/edit_window/Branding";
|
||||
import { loading_run, loading_store } from "lib/Loading";
|
||||
import Spinner from "util/Spinner.svelte";
|
||||
import { get_user } from "lib/NovaAPI";
|
||||
import Tree from "./Tree.svelte";
|
||||
import MenuEntry from "./MenuEntry.svelte";
|
||||
import { breadcrumbs_store, toolbar_store } from "./HeaderStore";
|
||||
import ProgressBar from "util/ProgressBar.svelte";
|
||||
import NovaLogo, { update_favicon } from "util/NovaLogo.svelte";
|
||||
|
||||
// The menu swipe will be detected if it was less than this much pixels from the
|
||||
// screen edge
|
||||
const screen_edge_offset = 40
|
||||
|
||||
// Dead zone before the swipe action gets detected
|
||||
const swipe_dead_zone = screen_edge_offset/4
|
||||
|
||||
// If the screen is less wide than this, the menu will appear full screen
|
||||
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
|
||||
|
||||
// The two background glows get a random position on each page load, in percent
|
||||
// of the viewport. The second one is rerolled until it's at least 40% away from
|
||||
// the first
|
||||
const glow = [Math.random() * 100, Math.random() * 100, 0, 0]
|
||||
do {
|
||||
glow[2] = Math.random() * 100
|
||||
glow[3] = Math.random() * 100
|
||||
} while (Math.hypot(glow[0] - glow[2], glow[1] - glow[3]) < 40)
|
||||
|
||||
onMount(async () => {
|
||||
if (document.documentElement.clientWidth < min_screen_size_menu_open) {
|
||||
menu_close()
|
||||
}
|
||||
|
||||
// The page template already applied the branding saved on the previous
|
||||
// visit, the favicon follows it
|
||||
update_favicon()
|
||||
|
||||
await loading_run(async () => {
|
||||
const user = await get_user()
|
||||
if (!user?.username) {
|
||||
// Forget the branding of a user who logged out
|
||||
localStorage.removeItem("branding")
|
||||
document.documentElement.style = ""
|
||||
update_favicon()
|
||||
return
|
||||
}
|
||||
const root = await fs_get_node("/me")
|
||||
const branding = css_from_path(root.path)
|
||||
document.documentElement.style = branding
|
||||
localStorage.setItem("branding", branding)
|
||||
update_favicon()
|
||||
})
|
||||
})
|
||||
|
||||
let menu: HTMLDivElement
|
||||
let nav: HTMLElement
|
||||
let dragging: boolean = false
|
||||
let start_x: number
|
||||
let start_y: number
|
||||
let render_offset: number
|
||||
let initial_offset: number
|
||||
const touchstart = (e: TouchEvent) => {
|
||||
start_x = e.touches[0].clientX
|
||||
start_y = e.touches[0].clientY
|
||||
const rect = menu.getBoundingClientRect()
|
||||
if (start_x < Math.max(screen_edge_offset, (rect.width+rect.left))) {
|
||||
dragging = true
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
render_offset = rect.left
|
||||
initial_offset = rect.left
|
||||
}
|
||||
|
||||
const touchmove = (e: TouchEvent) => {
|
||||
if (!dragging) {
|
||||
return
|
||||
}
|
||||
|
||||
const x = e.touches[0].clientX - start_x
|
||||
const y = e.touches[0].clientY - start_y
|
||||
const abs_x = Math.abs(x)
|
||||
const abs_y = Math.abs(y)
|
||||
|
||||
// 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) {
|
||||
if (abs_x > abs_y) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
set_offset(initial_offset+(x*2))
|
||||
} else {
|
||||
touchend(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const touchend = (e: TouchEvent) => {
|
||||
if (!dragging) {
|
||||
return
|
||||
}
|
||||
dragging = false
|
||||
|
||||
const menu_width = menu.getBoundingClientRect().width
|
||||
if (render_offset > -(menu_width/2)) {
|
||||
menu_open()
|
||||
} else {
|
||||
menu_close()
|
||||
}
|
||||
}
|
||||
|
||||
const toggle_menu = (e: MouseEvent) => {
|
||||
if (menu.style.transform === "") {
|
||||
menu_close()
|
||||
} else {
|
||||
menu_open()
|
||||
}
|
||||
}
|
||||
const menu_open = () => {
|
||||
set_offset(0)
|
||||
if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
|
||||
menu.style.position = "fixed"
|
||||
menu.style.width = "100%"
|
||||
nav.style.width = "100%"
|
||||
nav.style.maxWidth = "100%"
|
||||
} else {
|
||||
menu.style.position = "relative"
|
||||
menu.style.width = ""
|
||||
nav.style.width = ""
|
||||
nav.style.maxWidth = ""
|
||||
}
|
||||
}
|
||||
const menu_close = () => {
|
||||
set_offset(-menu.getBoundingClientRect().width)
|
||||
// A closed menu is only moved off-screen, hiding it makes sure the browser
|
||||
// doesn't render its backdrop blur and keeps its links out of the tab order
|
||||
menu.style.visibility = "hidden"
|
||||
menu.style.position = "fixed"
|
||||
|
||||
if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
|
||||
menu.style.width = ""
|
||||
nav.style.width = ""
|
||||
nav.style.maxWidth = ""
|
||||
}
|
||||
}
|
||||
|
||||
const set_offset = (off: number) => {
|
||||
render_offset = off
|
||||
menu.style.visibility = ""
|
||||
|
||||
if (off > -swipe_dead_zone) {
|
||||
// Clear the transformation if the offset is zero
|
||||
menu.style.transform = ""
|
||||
} else {
|
||||
menu.style.transform = "translateX(" + off + "px)"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
|
||||
|
||||
<div
|
||||
class="wrap"
|
||||
style:--glow1_x="{glow[0]}%"
|
||||
style:--glow1_y="{glow[1]}%"
|
||||
style:--glow2_x="{glow[2]}%"
|
||||
style:--glow2_y="{glow[3]}%"
|
||||
>
|
||||
<div class="nav_container" bind:this={menu}>
|
||||
<div class="scroll_container">
|
||||
<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>
|
||||
Menu
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
|
||||
<span style="flex: 1 1 auto;">Nova.storage</span>
|
||||
<NovaLogo style="width: 1.5em; height: 1.5em; flex: 0 0 auto;"/>
|
||||
</a>
|
||||
|
||||
{#if $user !== null}
|
||||
<MenuEntry id="subscription_info" collapsed={false}>
|
||||
{#snippet title()}
|
||||
<div class="username">{$user.username}</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet body()}
|
||||
<div class="stats_table">
|
||||
<div>Sub</div>
|
||||
<div>
|
||||
{$user.subscription.name}
|
||||
{#if $user.subscription_months === 1}
|
||||
(monthly)
|
||||
{:else if $user.subscription_months === 6}
|
||||
(bi-yearly)
|
||||
{:else if $user.subscription_months === 12}
|
||||
(yearly)
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>Credit</div>
|
||||
<div><Euro amount={$user.balance_micro_eur}/></div>
|
||||
|
||||
<div>Storage</div>
|
||||
<div>
|
||||
{formatDataVolume($user.filesystem_storage_used, 3)} /
|
||||
{formatDataVolume($user.subscription.storage_limit, 3)}
|
||||
</div>
|
||||
<div style="grid-column: span 2">
|
||||
<ProgressBar used={$user.storage_space_used} total={$user.subscription.storage_limit}/>
|
||||
</div>
|
||||
<div>Transfer</div>
|
||||
<div>
|
||||
{formatDataVolume($user.monthly_transfer_used, 3)} /
|
||||
{formatDataVolume($user.subscription.monthly_transfer_cap, 3)}
|
||||
</div>
|
||||
<div style="grid-column: span 2">
|
||||
<ProgressBar used={$user.monthly_transfer_used} total={$user.subscription.monthly_transfer_cap}/>
|
||||
</div>
|
||||
</div>
|
||||
{/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>
|
||||
</a>
|
||||
<a class="button" href="/d/me/.Trash" use:highlight_current_page>
|
||||
<i class="icon">delete</i>
|
||||
<span>Trash</span>
|
||||
</a>
|
||||
{#if $user.is_admin}
|
||||
<a class="button" href="/admin" use:highlight_current_page>
|
||||
<i class="icon">admin_panel_settings</i>
|
||||
<span>Admin Panel</span>
|
||||
</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<a class="button" href="/login" use:highlight_current_page>
|
||||
<i class="icon">login</i>
|
||||
<span>Login</span>
|
||||
</a>
|
||||
<a class="button" href="/register" use:highlight_current_page>
|
||||
<i class="icon">how_to_reg</i>
|
||||
<span>Register</span>
|
||||
</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="https://docs.nova.storage" use:highlight_current_page>
|
||||
<i class="icon">text_snippet</i>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
{/snippet}
|
||||
</MenuEntry>
|
||||
|
||||
<Bookmarks/>
|
||||
<Tree/>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
<div class="header bubble">
|
||||
<div class="breadcrumbs">
|
||||
<button class="menu_button" onclick={toggle_menu}>
|
||||
<i class="icon">menu</i>
|
||||
</button>
|
||||
|
||||
{#if $breadcrumbs_store !== null}
|
||||
{@render $breadcrumbs_store()}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $toolbar_store !== null}
|
||||
{@render $toolbar_store()}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Router/>
|
||||
</div>
|
||||
|
||||
{#if $loading_store !== 0}
|
||||
<div class="spinner">
|
||||
<Spinner/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
color: var(--body_text_color);
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/* The page background is a layer of its own which stays in place while the page
|
||||
scrolls. Mobile browsers repaint a background-attachment: fixed background on
|
||||
every scroll frame, and iOS doesn't support it at all */
|
||||
.wrap::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
/* Without a branding image there are two faint glows in the accent colour,
|
||||
at positions which are randomized on each page load */
|
||||
--glow: color-mix(in srgb, var(--accent_color) 7%, transparent);
|
||||
/* Browsers don't dither gradients, so the glows show up as bands of a
|
||||
single colour step each. A tile of black and white noise on top, at an
|
||||
opacity of two colour steps, hides the edges of the bands */
|
||||
--noise: url("data:image/svg+xml,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'>\
|
||||
<filter id='n' color-interpolation-filters='sRGB'>\
|
||||
<feTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/>\
|
||||
<feColorMatrix values='4 0 0 0 -1.5 4 0 0 0 -1.5 4 0 0 0 -1.5 0 0 0 0 1'/>\
|
||||
</filter>\
|
||||
<rect width='128' height='128' filter='url(%23n)' opacity='.008'/>\
|
||||
</svg>");
|
||||
background-image: var(
|
||||
--background_image,
|
||||
var(--noise),
|
||||
radial-gradient(
|
||||
ellipse 70% 60% at var(--glow1_x) var(--glow1_y),
|
||||
var(--glow),
|
||||
transparent
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 70% 60% at var(--glow2_x) var(--glow2_y),
|
||||
var(--glow),
|
||||
transparent
|
||||
)
|
||||
);
|
||||
background-color: var(--background_color);
|
||||
background-size: var(--background_image_size, initial);
|
||||
background-position: var(--background_image_position, initial);
|
||||
background-repeat: var(--background_image_repeat, repeat);
|
||||
}
|
||||
.nav_container {
|
||||
flex: 0 0 auto;
|
||||
z-index: 9;
|
||||
}
|
||||
.scroll_container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
height: 100vh;
|
||||
padding: 4px;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 16em;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.button {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.page {
|
||||
flex: 1 1 auto;
|
||||
max-width: 100vw;
|
||||
min-width: 0; /* prevents overflow */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.username {
|
||||
flex: 1 1 auto;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.stats_table {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.2em 1em;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 4px;
|
||||
z-index: 8; /* below navigation, on top of most other things */
|
||||
}
|
||||
.menu_button {
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.breadcrumbs {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
z-index: 11; /* One above the menu */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user