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

Add filesystem card to dashboard

Browse Source
This commit is contained in:
Wim Brand
2024-07-11 13:30:46 +02:00
parent ff38a54ae4
commit 94cc04b746
9 changed files with 116 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/static/style/layout.css
View File

@@ -336,7 +336,7 @@ h1 {
}
h2 {
font-size: 2em;
font-size: 1.8em;
border-bottom: 1px var(--separator) solid;
}

47
res/template/apps.html
View File

@@ -17,11 +17,10 @@
<h1>Apps</h1>
</header>
<div id="page_content" class="page_content">
<section>
<section class="highlight_border" style="text-align: initial">
<h2>ShareX</h2>
<div class="specs">
Platform: Windows 7, 8.1 and 10 |
License: GPL-3.0 |
Platform: Windows | License: GPL-3.0 |
<a href="https://getsharex.com">Website</a> |
<a href="https://github.com/ShareX/ShareX">GitHub</a>
</div>
@@ -35,25 +34,11 @@
here</a>.
</p>
<p>
Here you can download our custom ShareX uploader which uses
pixeldrain to upload your files.
You can download a custom ShareX uploader profile which uses
your pixeldrain account for uploading files on the <a
href="/user/connect_app?app=sharex">account apps page</a>.
</p>
<div class="highlight_shaded" style="clear: right;">
<a href="/misc/sharex/pixeldrain.com.sxcu" class="button button_highlight">
<i class="icon small">save</i>
Download ShareX Uploader
</a><br/>
{{if .Authenticated}}
This uploader is configured to upload files to your personal
pixeldrain account. Do not share the configuration file with
anyone, it contains your account credentials.
{{else}}
<a href="/login">Log in</a> to use ShareX with your own
pixeldrain account. {{end}}
</div>
<h3>Setting pixeldrain as default uploader</h3>
<p>
Download the uploader config and choose 'Open file'<br/>
@@ -61,7 +46,9 @@
Set pixeldrain.com as active uploader. Choose Yes<br/>
<img src="/res/img/sharex_default.png" style="max-width: 100%;" /><br/>
</p>
</section>
<br/>
<section class="highlight_border" style="text-align: initial">
<h2>Drainy</h2>
<div class="specs">
Platform: Windows, Linux, Android |
@@ -74,7 +61,9 @@
pixeldrain. Supports uploading to accounts, copying download
links to the clipboard and has an upload history screen.
</p>
</section>
<br/>
<section class="highlight_border" style="text-align: initial">
<h2 style="clear: both;">Pixeldrain Android</h2>
<div class="specs">
Platform: Android |
@@ -87,7 +76,9 @@
href="https://github.com/wimvdputten/Pixeldrain_android/releases">
GitHub releases page</a>.
</p>
</section>
<br/>
<section class="highlight_border" style="text-align: initial">
<h2>go-pd</h2>
<div class="specs">
Platform: Linux, Mac OS, Windows (CLI) |
@@ -104,7 +95,9 @@
href="https://github.com/ManuelReschke/go-pd/releases">
GitHub releases page</a>.
</p>
</section>
<br/>
<section class="highlight_border" style="text-align: initial">
<h2>go-pixeldrain</h2>
<div class="specs">
Platform: Linux, Mac OS, Windows (CLI) |
@@ -120,7 +113,9 @@
href="https://github.com/jkawamoto/go-pixeldrain/releases">
GitHub releases page</a>.
</p>
</section>
<br/>
<section class="highlight_border" style="text-align: initial">
<h2>pdup</h2>
<div class="specs">
Platform: Linux, BSD, Mac OS (CLI) |
@@ -133,7 +128,9 @@
href="https://github.com/Fornax96/pdup">from
GitHub</a>.
</p>
</section>
<section>
<h2>More apps</h2>
<p>
If you know more open source apps which work with pixeldrain

10
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -8,6 +8,8 @@ let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
export let large_icons = false
export let hide_edit = false
export let hide_branding = false
</script>
<div class="directory">
@@ -20,8 +22,8 @@ export let large_icons = false
{#each state.children as child, index (child.path)}
<a
href={"/d"+fs_encode_path(child.path)}
on:click|preventDefault={() => {dispatch("node_click", index)}}
on:contextmenu={e => {dispatch("node_context", {event: e, index: index})}}
on:click|preventDefault={() => dispatch("node_click", index)}
on:contextmenu={e => dispatch("node_context", {event: e, index: index})}
class="node"
class:node_selected={child.fm_selected}
class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -50,12 +52,12 @@ export let large_icons = false
<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
</a>
{/if}
{#if child.properties && child.properties.branding_enabled}
{#if child.properties && child.properties.branding_enabled && !hide_branding}
<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_branding", index)}>
<i class="icon">palette</i>
</button>
{/if}
{#if state.permissions.update}
{#if state.permissions.update && !hide_edit}
<button class="action_button" on:click|preventDefault|stopPropagation={() => dispatch("node_settings", index)}>
<i class="icon">edit</i>
</button>

5
svelte/src/home_page/AddressReputation.svelte
View File

@@ -4,7 +4,6 @@ import Expandable from "../util/Expandable.svelte";
import { formatDate } from "../util/Formatting.svelte";
let result = null;
let offences = 0
onMount(async () => {
try {
@@ -19,7 +18,6 @@ onMount(async () => {
})
</script>
{#if result !== null && result.user_banned}
<section>
<Expandable click_expand>
@@ -149,10 +147,7 @@ onMount(async () => {
</section>
{/if}
<style>
.header {
display: flex;
align-items: center;

32
svelte/src/user_home/dashboard/CardFSHome.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script>
import { onMount } from "svelte";
import Navigator from "../../filesystem/Navigator.svelte";
import ListView from "../../filesystem/filemanager/ListView.svelte";
import { fs_encode_path } from "../../filesystem/FilesystemUtil";
let nav;
let state = {
children: [],
};
const node_click = e => {
window.location.href = "/d" + fs_encode_path(state.children[e.detail].path)
}
const node_share_click = e => {
window.location.href = "/d/" + state.children[e.detail].id
}
onMount(() => {
nav.navigate("/me", false)
})
</script>
<Navigator bind:this={nav} bind:state={state} history_enabled={false}/>
<ListView
state={state}
on:node_click={node_click}
on:node_share_click={node_share_click}
hide_edit
hide_branding
/>

3
svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
View File

@@ -126,6 +126,9 @@ onMount(() => {
</ul>
<style>
ul {
margin: 0;
}
.toolbar {
display: flex;
flex-direction: row;

54
svelte/src/user_home/dashboard/CardStatistics.svelte
View File

@@ -4,6 +4,8 @@ import Chart from "../../util/Chart.svelte";
import { color_by_name } from "../../util/Util.svelte";
import { formatDataVolume, formatThousands } from "../../util/Formatting.svelte";
export let expanded = false
$: chart_height = expanded ? "250px" : "150px"
let graph_views_downloads = null
let graph_bandwidth = null
@@ -123,51 +125,52 @@ onMount(() => {
})
</script>
<div style="text-align: center">
<div class="time_buttons">
<button
on:click={() => update_graphs(1440, 1)}
class:button_highlight={graph_timespan == 1440}>
Day (1m)
class:button_highlight={graph_timespan == 1440}
class="group_first">
Day
</button>
<button
on:click={() => update_graphs(10080, 60)}
class:button_highlight={graph_timespan == 10080}>
Week (1h)
</button>
<button
on:click={() => update_graphs(20160, 60)}
class:button_highlight={graph_timespan == 20160}>
Two Weeks (1h)
class:button_highlight={graph_timespan == 10080}
class="group_middle">
Week
</button>
<button
on:click={() => update_graphs(43200, 1440)}
class:button_highlight={graph_timespan == 43200}>
Month (1d)
class:button_highlight={graph_timespan == 43200}
class="group_middle">
Month
</button>
<button
on:click={() => update_graphs(131400, 1440)}
class:button_highlight={graph_timespan == 131400}>
Quarter (1d)
class:button_highlight={graph_timespan == 131400}
class="group_middle">
Quarter
</button>
<button
on:click={() => update_graphs(525600, 1440)}
class:button_highlight={graph_timespan == 525600}>
Year (1d)
class:button_highlight={graph_timespan == 525600}
class="group_middle">
Year
</button>
<button
on:click={() => update_graphs(1051200, 1440)}
class:button_highlight={graph_timespan == 1051200}>
Two Years (1d)
class:button_highlight={graph_timespan == 1051200}
class="group_last">
Two Years
</button>
</div>
<Chart bind:this={graph_bandwidth} data_type="bytes" height="200px" ticks={false}/>
<Chart bind:this={graph_bandwidth} data_type="bytes" height={chart_height} ticks={false}/>
<div class="center">
{formatDataVolume(total_bandwidth, 3)} free downloads and
{formatDataVolume(total_transfer_paid, 3)} paid downloads
</div>
<Chart bind:this={graph_views_downloads} data_type="number" height="200px" ticks={false}/>
<Chart bind:this={graph_views_downloads} data_type="number" height={chart_height} ticks={false}/>
<div class="center">
{formatThousands(total_views)} views and
{formatThousands(total_downloads)} downloads
@@ -177,4 +180,15 @@ onMount(() => {
.center {
text-align: center;
}
.time_buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
}
.time_buttons > button {
min-width: 3em;
justify-content: center;
}
</style>

4
svelte/src/user_home/dashboard/CardUpload.svelte
View File

@@ -1,10 +1,12 @@
<script>
import UploadLib from "./UploadLib.svelte";
import AddressReputation from "../../home_page/AddressReputation.svelte";
let upload_widget
</script>
<AddressReputation/>
<div class="upload_buttons">
<button on:click={() => upload_widget.pick_files() } class="big_button button_highlight">
<i class="icon small">cloud_upload</i>

23
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -8,13 +8,20 @@ import CardUsage from "./CardUsage.svelte";
import CardActivity from "./CardActivity.svelte";
import CardUpload from "./CardUpload.svelte";
import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
import CardFsHome from "./CardFSHome.svelte";
let cards = [
{
id: "upload",
elem: CardUpload,
title: "Quick upload",
},{
}, {
id: "filesystem_home",
elem: CardFsHome,
title: "Filesystem home",
link: "/d/me",
hidden: window.user.subscription.filesystem_access === false,
}, {
id: "account",
elem: CardAccount,
title: "Account",
@@ -34,15 +41,15 @@ let cards = [
id: "usage",
elem: CardUsage,
title: "Usage",
}, {
id: "statistics",
elem: CardStatistics,
title: "Statistics",
}, {
id: "activiy",
elem: CardActivity,
title: "Activity",
link: "/user/activity",
}, {
id: "statistics",
elem: CardStatistics,
title: "Statistics",
},
]
const save = () => {
@@ -110,7 +117,7 @@ onMount(() => {
/>
</div>
<div class="card_component">
<svelte:component this={card.elem}/>
<svelte:component this={card.elem} expanded={card.expanded}/>
</div>
</div>
{/if}{/each}
@@ -129,13 +136,13 @@ onMount(() => {
flex: 1 0 auto;
display: flex;
flex-direction: column;
width: 25em;
width: 26em;
max-width: 100%;
background: var(--body_background);
border-radius: 8px;
padding: 8px;
text-align: initial;
max-height: 600px;
max-height: 500px;
}
.card_component {
flex: 1 1 auto;