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

Require login for file upload

Browse Source
This commit is contained in:
Wim Brand
2024-06-26 23:28:17 +02:00
parent f0db79cab1
commit 9cbf7d7c1e
9 changed files with 279 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
svelte/src/filesystem/Menu.svelte
View File

@@ -7,12 +7,31 @@ import { formatDataVolume } from "../util/Formatting.svelte";
let button
let dialog
export let no_login_label = "Pixeldrain"
export let hide_name = true
export let hide_logo = false
const open = () => {
// Show the window so we can get the location
dialog.showModal()
let rect = button.getBoundingClientRect()
dialog.style.top = Math.round(rect.bottom) + "px"
dialog.style.left = Math.round(rect.left) + "px"
const edge_offset = 5
// Get the egdes of the screen, so the window does not spawn off-screen
const window_rect = dialog.getBoundingClientRect()
const max_left = window.innerWidth - window_rect.width - edge_offset
const max_top = window.innerHeight - window_rect.height - edge_offset
// Get the location of the button
const button_rect = button.getBoundingClientRect()
// Prevent the window from being glued to the edges
const min_left = Math.max(button_rect.left, edge_offset)
const min_top = Math.max(button_rect.bottom, edge_offset)
// Place the window
dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
}
// Close the dialog when the user clicks the background
@@ -25,9 +44,11 @@ const click = e => {
<div class="wrapper">
<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
<PixeldrainLogo style="height: 1.8em; width: 1.8em; margin: 2px;"></PixeldrainLogo>
<span class="button_username">
{window.user.username === "" ? "Pixeldrain" : window.user.username}
{#if !hide_logo}
<PixeldrainLogo style="height: 1.8em; width: 1.8em; margin: 2px;"/>
{/if}
<span class="button_username" class:hide_name>
{window.user.username === "" ? no_login_label : window.user.username}
</span>
</button>
</div>
@@ -37,8 +58,10 @@ const click = e => {
<dialog bind:this={dialog} on:click={click}>
<div class="menu">
{#if window.user.username !== ""}
<div class="menu_username">{window.user.username}</div>
<Button link_href="/user" icon="person" label={window.user.username} />
<div class="separator"></div>
<div class="stats_table">
<div>Subscription</div>
<div>{window.user.subscription.name}</div>
@@ -54,13 +77,22 @@ const click = e => {
<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
</div>
<div class="separator"></div>
<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
{#if window.user.subscription.filesystem_access}
<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
{:else}
<Button link_href="/#pro" icon="star" label="Get Premium"/>
{/if}
<Button link_href="/filesystem" icon="description" label="Filesystem Guide"/>
<div class="separator"></div>
<Button link_href="/user/filemanager#files" icon="image" label="My Files"/>
<Button link_href="/user/filemanager#lists" icon="photo_library" label="My Albums"/>
<div class="separator"></div>
<Button link_href="/user" icon="person" label="Profile"/>
<Button link_href="/user/settings" icon="settings" label="Account Settings"/>
<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
@@ -108,10 +140,6 @@ dialog {
flex-direction: column;
max-width: 15em;
}
.menu_username {
text-align: center;
font-size: 1.1em;
}
.separator {
height: 1px;
margin: 2px 0;
@@ -127,7 +155,7 @@ dialog {
/* Hide username on small screen */
@media(max-width: 800px) {
.button_username {
.hide_name {
display: none;
}
}