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

Add content policy and add abuse categories

Browse Source
This commit is contained in:
Wim Brand
2021-01-05 00:00:46 +01:00
parent 96ca0ed90f
commit e074be4e19
15 changed files with 198 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -182,7 +182,9 @@ const toggle_select = () => {
{child.name}
</td>
<td class="node_size">
{formatDataVolume(child.file_size, 3)}
{#if child.type === "file"}
{formatDataVolume(child.file_size, 3)}
{/if}
</td>
</a>
{/each}

88
svelte/src/user_buckets/Bucket.svelte Normal file
View File

@@ -0,0 +1,88 @@
<script>
export let bucket
let details_hidden = true
const expand_bucket = () => {
details_hidden = !details_hidden
}
</script>
<div class="bucket">
<div class="bucket_header">
<a href={'/d/' + bucket.id} class="bucket_title">
<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>
{bucket.name}
</a>
<button class="bucket_expand" on:click={expand_bucket}>
{#if details_hidden}
<i class="icon">expand_more</i>
{:else}
<i class="icon">expand_less</i>
{/if}
</button>
</div>
<div class="bucket_details" class:hidden={details_hidden}>
<form>
<table class="form">
<tr class="form">
<td>Name</td>
<td><input type="text" value={bucket.name} /></td>
</tr>
<tr class="form">
<td colspan="2">
<button class="button_red">
<i class="icon">delete</i> Delete
</button>
<button class="button_highlight" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<style>
.bucket {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
}
.bucket_header {
display: flex;
flex-direction: row;
color: var(--text_color);
}
.bucket_header:hover {
background-color: var(--input_color_dark)
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
display: block;
text-decoration: none;
}
.bucket_icon {
height: 32px;
width: 32px;
margin: 4px;
vertical-align: middle;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
padding: 0.4em;
flex-direction: column;
text-decoration: none;
border-top: 1px solid var(--layer_3_color_border);
color: var(--text_color);
}
.hidden {
display: none;
}
</style>

57
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount } from "svelte";
import Bucket from "./Bucket.svelte";
import Spinner from "../util/Spinner.svelte";
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
@@ -17,10 +18,6 @@ const get_buckets = async () => {
}
};
const expand_bucket = () => {
}
onMount(get_buckets);
</script>
@@ -32,15 +29,23 @@ onMount(get_buckets);
{/if}
<div class="limit_width">
<button style="float: right;">
<i class="icon">create_new_folder</i> New bucket
</button>
<br/>
<h2>Persistent buckets</h2>
<p>
These buckets don't expire, but have limited storage space and
bandwidth. Their limits can be raised by buying a subscription.
</p>
{#each buckets as bucket}
<a class="bucket_header" href={'/d/' + bucket.id}>
<div class="bucket_title">{bucket.name}</div>
<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
</a>
<div class="bucket_details">
Hello!
</div>
<Bucket bucket={bucket}></Bucket>
{/each}
<br/>
<h2>Temporary buckets</h2>
<p>
</p>
</div>
</div>
@@ -50,34 +55,4 @@ onMount(get_buckets);
height: 100px;
width: 100px;
}
.bucket_header {
display: flex;
flex-direction: row;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
}
.bucket_header:hover {
box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
color: var(--highlight_color);
text-decoration: none;
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
padding: 0.4em;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
}
</style>