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

Add menu button to filesystem

Browse Source
This commit is contained in:
Fornax
2024-03-12 17:53:53 +01:00
parent 8d61e9d4cd
commit 6376e67cd7
10 changed files with 162 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
svelte/src/admin_panel/PeerTable.svelte
View File

@@ -1,4 +1,5 @@
<script>
import { flip } from "svelte/animate";
import { formatDataVolume } from "../util/Formatting.svelte";
import SortButton from "./SortButton.svelte";
@@ -66,11 +67,12 @@ let sort = (field) => {
</tr>
</thead>
<tbody>
{#each peers as peer}
{#each peers as peer (peer.address)}
<tr style="border: none;"
class:highlight_red={peer.free_space < peer.min_free_space / 2 || !peer.reachable}
class:highlight_yellow={peer.free_space < peer.min_free_space}
class:highlight_green={peer.reachable}
animate:flip={{duration: 1000}}
>
<td>{peer.address}</td>
<td>{peer.unreachable_count}</td>

25
svelte/src/filesystem/Filesystem.svelte
View File

@@ -9,9 +9,9 @@ import Navigator from './Navigator.svelte';
import FilePreview from './viewers/FilePreview.svelte';
import SearchView from './SearchView.svelte';
import UploadWidget from './upload_widget/UploadWidget.svelte';
import HomeButton from '../file_viewer/HomeButton.svelte';
import { fs_path_url } from './FilesystemUtil.js';
import { branding_from_path } from './edit_window/Branding.js'
import Menu from './Menu.svelte';
let loading = true
let toolbar
@@ -44,6 +44,7 @@ const keydown = e => {
return // Prevent shortcuts from interfering with input fields
}
let action_performed = true
switch (e.key) {
case "c":
toolbar.copy_link()
@@ -76,9 +77,13 @@ const keydown = e => {
case "ArrowRight":
fs_navigator.open_sibling(1)
break;
default:
action_performed = false
}
e.preventDefault()
if (action_performed) {
e.preventDefault()
}
};
const download = () => {
@@ -116,10 +121,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
<div class="file_viewer">
<div class="headerbar">
<div>
<HomeButton nobg/>
</div>
<Menu/>
<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
</div>
@@ -158,10 +160,6 @@ const update_css = path => document.documentElement.style = branding_from_path(p
</div>
</div>
<div class="highlight_yellow">
The filesystem is experimental! <a href="/filesystem">Please read the guide</a>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
<iframe
bind:this={download_frame}
@@ -228,13 +226,6 @@ const update_css = path => document.documentElement.style = branding_from_path(p
padding: 4px;
}
/* Headerbar components */
.headerbar > * {
flex-grow: 0;
flex-shrink: 0;
display: inline;
align-self: center;
}
/* File preview area (row 2) */
.viewer_area {
flex: 1 1 0;

103
svelte/src/filesystem/Menu.svelte Normal file
View File

@@ -0,0 +1,103 @@
<script>
import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
import Button from "../layout/Button.svelte";
import Euro from "../util/Euro.svelte";
import { formatDataVolume } from "../util/Formatting.svelte";
let button
let dialog
const open = () => {
dialog.showModal()
let rect = button.getBoundingClientRect()
dialog.style.top = Math.round(rect.bottom) + "px"
dialog.style.left = Math.round(rect.left) + "px"
}
// Close the dialog when the user clicks the background
const click = e => {
if (e.target === dialog) {
dialog.close()
}
}
</script>
<div class="wrapper">
<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
<span>
{window.user.username === "" ? "Pixeldrain" : window.user.username}
</span>
</button>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog bind:this={dialog} on:click={click}>
<div class="menu">
{#if window.user.username !== ""}
<div class="stats_table">
<div>Subscription</div>
<div>{window.user.subscription.name}</div>
{#if window.user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={window.user.balance_micro_eur}/></div>
{/if}
<div>Storage used</div>
<div>{formatDataVolume(window.user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
</div>
<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
<Button link_href="/user" icon="person" label="Profile"/>
<Button link_href="/user/settings" icon="settings" label="Settings"/>
<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
{:else}
<Button link_href="/" icon="home" label="Home"/>
<Button link_href="/#pro" icon="star" label="Get Premium"/>
<Button link_href="/login" icon="person" label="Log in"/>
<Button link_href="/register" icon="person" label="Register"/>
{/if}
</div>
</dialog>
<style>
.wrapper {
flex-grow: 0;
flex-shrink: 0;
display: inline;
align-self: center;
}
.button {
flex: 0 0 content;
background: none;
margin: 0;
color: var(--body_text_color);
box-shadow: none;
}
dialog {
background-color: var(--card_color);
color: var(--body_text_color);
border-radius: 8px;
border: none;
padding: 4px;
margin: 0;
box-shadow: 2px 2px 10px var(--shadow_color);
}
.menu {
display: flex;
flex-direction: column;
}
.stats_table {
display: grid;
grid-template-columns: auto auto;
gap: 0.2em 1em;
margin: 3px;
}
</style>

7
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -350,6 +350,13 @@ onMount(() => {
on:loading
/>
{/if}
{#if state.base.path === "/me"}
<div class="highlight_shaded" style="background-color: rgba(255, 255, 0, 0.05); border-radius: 0;">
The filesystem is experimental!
<a href="/filesystem">Please read the guide</a>
</div>
{/if}
</div>
<slot></slot>

4
svelte/src/layout/Button.svelte
View File

@@ -10,7 +10,7 @@ export let icon_small = false;
export let label = ""
export let title = ""
export let link_href = ""
export let link_target = ""
export let link_target = "_self"
export let click = e => {}
export let style = ""
export let type = ""
@@ -31,7 +31,7 @@ let click_int = e => {
}
</script>
{#if link_target === ""}
{#if link_href === ""}
<button
on:click={click_int}
class="button"

35
svelte/src/user_home/PatreonActivationResult.svelte
View File

@@ -29,21 +29,28 @@ onMount(() => {
{#if patreon_result !== ""}
{#if patreon_result === "error"}
<div class="highlight_red">
An error occurred while linking Patreon subscription. Please try
again later.
{#if patreon_error === "patreon_authentication_denied"}
<div class="highlight_yellow">
Please press "Allow" when asked if pixeldrain can access your
profile.
</div>
{:else if patreon_result === "error"}
<div class="highlight_red">
<p>
An error occurred while linking Patreon subscription. Please try
again later.
</p>
<p>
If it has been more than 30 minutes, your payment is complete and
the upgrade still fails please contact me on Patreon or through
e-mail at support@pixeldrain.com.
<p/>
<p>
When contacting support please provide the following information:<br/>
Server response: {patreon_message}<br/>
Server error code: {patreon_error}
</p>
</div>
<p>
If it has been more than 30 minutes, your payment is complete and
the upgrade still fails please contact me on Patreon or through
e-mail at support@pixeldrain.com.
<p/>
<p>
When contacting support please provide the following information:<br/>
Server response: {patreon_message}<br/>
Server error code: {patreon_error}
</p>
{:else if patreon_result === "pledge_not_found"}
<div class="highlight_yellow">
<p>

3
svelte/src/user_home/Subscription.svelte
View File

@@ -128,9 +128,10 @@ onMount(() => {
</p>
<ul>
<li>€4 per month</li>
<li>2 TB storage limit (higher plans available)</li>
<li>No storage limit for file sharing</li>
<li>4 TB transfer limit (higher plans available)</li>
<li>Access to the <a href="/filesystem">filesystem</a></li>
<li>2 TB filesytem storage limit (higher plans available)</li>
<li>File expire after 240 days for Pro, and never on the other plans</li>
</ul>
</div>