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

UI overhaul, import fixes, fix user store

Browse Source
This commit is contained in:
Wim Brand
2026-07-30 17:07:46 +02:00
parent 773149169b
commit 4b8bd11a4c
75 changed files with 1106 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI"
import TextBlock from "layout/TextBlock.svelte"
import type { FSNavigator } from 'filesystem/FSNavigator';
@@ -64,7 +64,7 @@ onMount(() => {
{@render children?.()}
<div bind:this={background_div} class="background_div">
<TextBlock width="auto">
<TextBlock>
<audio
bind:this={player}
class="player"
@@ -111,6 +111,7 @@ onMount(() => {
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
border-radius: 8px;
}
.player {
width: 100%;

2
svelte/src/filesystem/viewers/CustomBanner.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { FSNode } from 'lib/FilesystemAPI.svelte';
import type { FSNode } from 'lib/FilesystemAPI';
import { run } from 'svelte/legacy';
let { path = [] }: {path: FSNode[]} = $props();

33
svelte/src/filesystem/viewers/File.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import IconBlock from "layout/IconBlock.svelte";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI";
import TextBlock from "layout/TextBlock.svelte"
import { formatDataVolume, formatDate } from "util/Formatting";
@@ -17,12 +17,24 @@ let {
{@render children?.()}
<h1>{node.name}</h1>
<IconBlock icon_href={fs_thumbnail_url(node.path, 256, 256)}>
Type: {node.file_type}<br/>
Size: {formatDataVolume(node.file_size, 3)}<br/>
Upload date: {formatDate(node.created, true, true, false)}
{node.name}<br/>
<table>
<tbody>
<tr>
<td>Type</td>
<td>{node.file_type}</td>
</tr>
<tr>
<td>Size</td>
<td>{formatDataVolume(node.file_size, 3)}</td>
</tr>
<tr>
<td>Upload date</td>
<td>{formatDate(node.created, true, true, false)}</td>
</tr>
</tbody>
</table>
<hr/>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
@@ -79,9 +91,12 @@ let {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
table {
width: auto;
}
td {
padding: 0;
padding-right: 1em;
}
.icon {
display: inline-block;

5
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import Spinner from "util/Spinner.svelte";
import { fs_node_type } from "lib/FilesystemAPI.svelte";
import { fs_node_type } from "lib/FilesystemAPI";
import FileManager from "filesystem/filemanager/FileManager.svelte";
import TrashBin from "filesystem/filemanager/TrashBin.svelte";
import Audio from "./Audio.svelte";
import File from "./File.svelte";
import Image from "./Image.svelte";
@@ -88,6 +89,8 @@ export const seek = (delta: number) => {
<div class="center">
<Spinner/>
</div>
{:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
{:else if viewer_type === "dir"}
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
<CustomBanner path={$nav.path}/>

2
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { swipe_nav } from "lib/SwipeNavigate";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import { fs_path_url } from "lib/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";

2
svelte/src/filesystem/viewers/PDF.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_path_url, FSNode } from "lib/FilesystemAPI";
let { node }: { node: FSNode } = $props();
</script>

2
svelte/src/filesystem/viewers/Text.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { tick } from "svelte";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI.svelte";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI";
let {
node,

2
svelte/src/filesystem/viewers/Torrent.svelte
View File

@@ -18,7 +18,7 @@ import { formatDate } from "util/Formatting"
import TorrentItem from "./TorrentItem.svelte"
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI";
import CopyButton from "layout/CopyButton.svelte";
import { loading_finish, loading_start } from "lib/Loading";

2
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import { video_position } from "lib/VideoPosition";
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_path_url, FSNode } from "lib/FilesystemAPI";
let {
node,

41
svelte/src/filesystem/viewers/Zip.svelte
View File

@@ -12,7 +12,7 @@ import { formatDataVolume, formatDate } from "util/Formatting"
import ZipItem from "filesystem/viewers/ZipItem.svelte";
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI";
import { loading_finish, loading_start } from "lib/Loading";
let {
@@ -26,7 +26,7 @@ let {
let status = $state("loading")
let zip: ZipEntry = $state({size: 0} as ZipEntry)
let uncomp_size = 0
let uncomp_size = $state(0)
let comp_ratio = $state(0)
let archive_type = $state("")
let truncated = $state(false)
@@ -97,8 +97,6 @@ const recursive_size = (file: ZipEntry) => {
{@render children?.()}
<h1>{node.name}</h1>
<IconBlock icon_href={fs_node_icon(node, 256, 256)}>
{#if archive_type === "7z"}
This is a 7-zip archive. You will need
@@ -106,12 +104,26 @@ const recursive_size = (file: ZipEntry) => {
extract it<br/>
{/if}
Compressed size: {formatDataVolume(node.file_size, 3)}<br/>
{#if !truncated}
Uncompressed size: {formatDataVolume(zip.size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
{/if}
Uploaded on: {formatDate(node.created, true, true, true)}
<br/>
{node.name}<br/>
<table>
<tbody>
<tr>
<td>Compressed size</td>
<td>{formatDataVolume(node.file_size, 3)}</td>
</tr>
{#if !truncated}
<tr>
<td>Uncompressed size</td>
<td>{formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)</td>
</tr>
{/if}
<tr>
<td>Upload date</td>
<td>{formatDate(node.created, true, true, true)}</td>
</tr>
</tbody>
</table>
<hr/>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
<span>Download</span>
@@ -140,8 +152,11 @@ const recursive_size = (file: ZipEntry) => {
{/if}
<style>
h1 {
text-shadow: 1px 1px 3px var(--shadow_color);
line-break: anywhere;
table {
width: auto;
}
td {
padding: 0;
padding-right: 1em;
}
</style>