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

Compare commits

base: pixeldrain:5ce6b0c417d4cdde4e9659926664b9739245a2df
Branches Tags
pixeldrain:master
...
compare: pixeldrain:master
Branches Tags
pixeldrain:master

6 Commits
5ce6b0c417 ... master

Author SHA1 Message Date
Wim Brand
38566389db Remove thick borders on admin panel 2026-02-12 20:03:23 +01:00
Wim Brand
cc417535fa Add some borders. Fix style override when switching pages 2026-02-12 20:00:43 +01:00
Wim Brand
ec1c8b0f5b Create comonent for collapsing menu entries 2026-02-12 19:42:23 +01:00
Wim Brand
6a19b5bc18 Remove username margin 2026-01-30 17:21:46 +01:00
Wim Brand
f487b8cd03 Reduce icon size in menu 2026-01-30 17:17:03 +01:00
Wim Brand
d3d26c6ae1 Rebounce navigation events 2026-01-30 12:26:36 +01:00
18 changed files with 249 additions and 154 deletions
Expand all files Collapse all files

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

@@ -393,10 +393,6 @@ table:not(.form) {
min-width: 100%; min-width: 100%;
} }
tr {
border-bottom: 1px var(--separator) solid;
}
tr>td { tr>td {
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
} }
@@ -459,8 +455,8 @@ input[type="color"] {
border-radius: 6px; border-radius: 6px;
margin: 2px; margin: 2px;
background: var(--input_background); background: var(--input_background);
gap: 3px; gap: 2px;
padding: 3px; padding: 2px;
overflow: hidden; overflow: hidden;
color: var(--input_text); color: var(--input_text);
cursor: pointer; cursor: pointer;
@@ -501,7 +497,7 @@ input[type="color"]:focus {
color: var(--input_text); color: var(--input_text);
text-decoration: none; text-decoration: none;
background: var(--input_hover_background); background: var(--input_hover_background);
box-shadow: 0px 0px 0px 1px var(--highlight_color); box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
} }
button:active, button:active,
@@ -510,13 +506,12 @@ input[type="submit"]:active,
input[type="button"]:active, input[type="button"]:active,
input[type="color"]:active { input[type="color"]:active {
box-shadow: inset 4px 4px 6px var(--shadow_color); box-shadow: inset 4px 4px 6px var(--shadow_color);
/* Exactly 3px offset compared to the inactive padding to give a depth effect */ /* Exactly 2px offset compared to the inactive padding to give a depth effect */
padding: 6px 0px 0px 6px; padding: 4px 0px 0px 4px;
} }
.button_highlight { .button_highlight {
background: var(--highlight_background) !important; box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
color: var(--highlight_text_color) !important;
} }
.button_red { .button_red {

7
svelte/src/admin_panel/Home.svelte
View File

@@ -162,7 +162,8 @@ onMount(() => {
<section> <section>
<h3>Bandwidth usage and file views</h3> <h3>Bandwidth usage and file views</h3>
</section> </section>
<div class="highlight_border" style="margin-bottom: 6px;">
<div>
<button onclick={() => loadGraph(1440, 1, true)}>Day 1m</button> <button onclick={() => loadGraph(1440, 1, true)}>Day 1m</button>
<button onclick={() => loadGraph(10080, 10, true)}>Week 10m</button> <button onclick={() => loadGraph(10080, 10, true)}>Week 10m</button>
<button onclick={() => loadGraph(43200, 60, true)}>Month 1h</button> <button onclick={() => loadGraph(43200, 60, true)}>Month 1h</button>
@@ -172,9 +173,11 @@ onMount(() => {
<button onclick={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button> <button onclick={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
<button onclick={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button> <button onclick={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button>
</div> </div>
<Chart bind:this={graphEgress} data_type="bytes" /> <Chart bind:this={graphEgress} data_type="bytes" />
<Chart bind:this={graphDownloads} data_type="number" /> <Chart bind:this={graphDownloads} data_type="number" />
<div class="highlight_border">
<div>
Total usage from {start_time} to {end_time}<br/> Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_egress, 3)} egress, {formatDataVolume(total_egress, 3)} egress,
{formatThousands(total_downloads)} downloads {formatThousands(total_downloads)} downloads

9
svelte/src/filesystem/FSNavigator.ts
View File

@@ -53,12 +53,19 @@ export class FSNavigator {
} }
} }
last_requested_path: string = ""
navigate = async (path: string, push_history: boolean) => { navigate = async (path: string, push_history: boolean) => {
if (path === this.last_requested_path) {
console.debug("FSNavigator: Requested path is equal to current path. Debouncing")
return
}
this.last_requested_path = path
if (path[0] !== "/") { if (path[0] !== "/") {
path = "/" + path path = "/" + path
} }
console.debug("Navigating to path", path, push_history) console.debug("FSNavigator: Navigating to path", path, push_history)
try { try {
loading_start() loading_start()

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

@@ -47,13 +47,16 @@ onMount(() => {
return return
} }
// Custom CSS rules for the whole viewer // Custom CSS rules for the whole viewer. The MainMenu applies its
document.documentElement.style = css_from_path(nav.path) // styles to the <html> element. So we apply to the <body> element, our
// styles take precedence since they're lower level, and we can clean it
// up afterwards without overwriting global style
document.body.style = css_from_path(nav.path)
}) })
return () => { return () => {
page_sub() page_sub()
nav_sub() nav_sub()
document.documentElement.style = "" document.body.style = ""
} }
}) })

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

@@ -69,7 +69,7 @@ const file_event: FileActionHandler = (action: FileAction, index: number, orig:
if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) { if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
select_node(index) select_node(index)
} else { } else {
file_menu.open(nav.children[index], orig.target) file_menu.open(nav.children[index], orig.target, orig)
} }
break break
case FileAction.Edit: case FileAction.Edit:
@@ -86,7 +86,7 @@ const file_event: FileActionHandler = (action: FileAction, index: number, orig:
select_node(index) select_node(index)
break break
case FileAction.Menu: case FileAction.Menu:
file_menu.open(nav.children[index], orig.target) file_menu.open(nav.children[index], orig.target, orig)
break break
} }
} }

19
svelte/src/filesystem/filemanager/FileMenu.svelte
View File

@@ -19,16 +19,23 @@ let {
let dialog: Dialog = $state() let dialog: Dialog = $state()
let node: FSNode = $state(null) let node: FSNode = $state(null)
export const open = async (n: FSNode, target: EventTarget) => { export const open = async (n: FSNode, target: EventTarget, event: Event) => {
node = n node = n
let el: HTMLElement = (target as Element).closest("button")
if (el === null) {
el = (target as Element).closest("a")
}
// Wait for the view to update, so the dialog gets the proper measurements // Wait for the view to update, so the dialog gets the proper measurements
await tick() await tick()
let el: HTMLElement = (target as Element).closest("button")
if (el !== null) {
dialog.open(el.getBoundingClientRect()) dialog.open(el.getBoundingClientRect())
return
}
if (event instanceof MouseEvent) {
dialog.open(event)
return
}
console.error("Cannot find suitable target for spawning dialog window")
} }
const delete_node = async () => { const delete_node = async () => {

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

@@ -40,7 +40,8 @@ export const update = async () => {
siblings = await nav.get_siblings() siblings = await nav.get_siblings()
for(const sib of siblings) { for(const sib of siblings) {
if (sib.name === "cover.jpg") { const lower = sib.name.toLowerCase()
if (lower === "cover.jpg" || lower === "cover.png" || lower === "cover.webp") {
console.debug("Found album cover image", sib) console.debug("Found album cover image", sib)
background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")` background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
break break

17
svelte/src/layout/Dialog.svelte
View File

@@ -4,7 +4,7 @@ let { children }: {
} = $props(); } = $props();
let dialog: HTMLDialogElement = $state() let dialog: HTMLDialogElement = $state()
export const open = (button_rect: DOMRect) => { export const open = (origin: DOMRect|MouseEvent) => {
// Show the window so we can get the location // Show the window so we can get the location
dialog.showModal() dialog.showModal()
@@ -15,10 +15,18 @@ export const open = (button_rect: DOMRect) => {
const max_left = window.innerWidth - dialog_rect.width - edge_offset const max_left = window.innerWidth - dialog_rect.width - edge_offset
const max_top = window.innerHeight - dialog_rect.height - edge_offset const max_top = window.innerHeight - dialog_rect.height - edge_offset
let min_left: number, min_top: number
if (origin instanceof DOMRect) {
// Position the dialog in horizontally in the center of the button and // Position the dialog in horizontally in the center of the button and
// verticially below it // verticially below it
const min_left = Math.max((button_rect.left + (button_rect.width/2)) - (dialog_rect.width/2), edge_offset) min_left = Math.max((origin.left + (origin.width/2)) - (dialog_rect.width/2), edge_offset)
const min_top = Math.max(button_rect.bottom, edge_offset) min_top = Math.max(origin.bottom, edge_offset)
} else if (origin instanceof MouseEvent) {
// Place the dialog at the bottom right of the mouse pointer, like
// regular context menus
min_left = Math.max(origin.clientX, edge_offset)
min_top = Math.max(origin.clientY, edge_offset)
}
// Place the window // Place the window
dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px" dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
@@ -35,6 +43,7 @@ export const close = () => {
// the dialog itself then the click was on the dialog background // the dialog itself then the click was on the dialog background
const click = (e: MouseEvent) => { const click = (e: MouseEvent) => {
if (e.target === dialog) { if (e.target === dialog) {
e.preventDefault()
dialog.close() dialog.close()
} }
} }
@@ -42,7 +51,7 @@ const click = (e: MouseEvent) => {
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<dialog bind:this={dialog} onclick={click}> <dialog bind:this={dialog} onclick={click} oncontextmenu={click}>
{@render children?.()} {@render children?.()}
</dialog> </dialog>

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

@@ -6,6 +6,7 @@ let {
group_first = false, group_first = false,
group_middle = false, group_middle = false,
group_last = false, group_last = false,
highlight = true,
action, action,
children, children,
}: { }: {
@@ -15,6 +16,7 @@ let {
group_first?: boolean; group_first?: boolean;
group_middle?: boolean; group_middle?: boolean;
group_last?: boolean; group_last?: boolean;
highlight?: boolean;
action?: (e: MouseEvent) => void; action?: (e: MouseEvent) => void;
children?: import('svelte').Snippet; children?: import('svelte').Snippet;
} = $props(); } = $props();
@@ -31,7 +33,7 @@ const click = (e: MouseEvent) => {
onclick={click} onclick={click}
type="button" type="button"
class="button" class="button"
class:button_highlight={on} class:button_highlight={on && highlight}
class:group_first class:group_first
class:group_middle class:group_middle
class:group_last class:group_last

4
svelte/src/lib/HighlightCurrentPage.ts
View File

@@ -1,5 +1,5 @@
import { global_navigator } from "filesystem/FSNavigator" import { global_navigator } from "filesystem/FSNavigator"
import { current_page_store, type Tab } from "wrap/RouterStore" import { current_page_store } from "wrap/RouterStore"
export const highlight_current_page = (node: HTMLAnchorElement) => { export const highlight_current_page = (node: HTMLAnchorElement) => {
const set_highlight = () => { const set_highlight = () => {
@@ -19,7 +19,7 @@ export const highlight_current_page = (node: HTMLAnchorElement) => {
set_highlight() set_highlight()
// Set up a listener with the page router to catch navigation events // Set up a listener with the page router to catch navigation events
const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() }) const unsub = current_page_store.subscribe(() => { set_highlight() })
const unsub2 = global_navigator.subscribe(() => { set_highlight() }) const unsub2 = global_navigator.subscribe(() => { set_highlight() })
return { return {
destroy() { destroy() {

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

@@ -185,7 +185,7 @@ onMount(() => {
max-width: 100%; max-width: 100%;
background: var(--body_background); background: var(--body_background);
border-radius: 8px; border-radius: 8px;
padding: 2px; border: 1px solid var(--separator);
text-align: initial; text-align: initial;
} }
.card_component { .card_component {

1
svelte/src/util/Modal.svelte
View File

@@ -135,6 +135,7 @@ these padding divs to move it 25% up */
border-radius: 18px 18px 8px 8px; border-radius: 18px 18px 8px 8px;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
border: 1px solid var(--separator);
} }
.header { .header {
flex-grow: 0; flex-grow: 0;

22
svelte/src/wrap/Bookmarks.svelte
View File

@@ -2,6 +2,7 @@
import { bookmark_del, bookmarks_store } from "lib/Bookmarks"; import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte"; import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage"; import { highlight_current_page } from "lib/HighlightCurrentPage";
import MenuEntry from "./MenuEntry.svelte";
let { menu_collapsed }: { menu_collapsed: boolean } = $props(); let { menu_collapsed }: { menu_collapsed: boolean } = $props();
@@ -13,13 +14,15 @@ const toggle_edit = () => {
</script> </script>
{#if $bookmarks_store.length !== 0} {#if $bookmarks_store.length !== 0}
<div class="title"> <MenuEntry id="bookmarks" collapsed={menu_collapsed}>
<div class:hide={menu_collapsed}>Bookmarks</div> {#snippet title()}
<div class="title">Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}> <button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i> <i class="icon">edit</i>
</button> </button>
</div> {/snippet}
{#snippet body()}
{#each $bookmarks_store as bookmark} {#each $bookmarks_store as bookmark}
<div class="row"> <div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page> <a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
@@ -33,24 +36,15 @@ const toggle_edit = () => {
{/if} {/if}
</div> </div>
{/each} {/each}
{/snippet}
<div class="title"></div> </MenuEntry>
{/if} {/if}
<style> <style>
.title { .title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
} }
.title > button {
flex: 0 0 auto;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

36
svelte/src/wrap/MainMenu.svelte
View File

@@ -12,17 +12,18 @@ import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte"; import Spinner from "util/Spinner.svelte";
import { get_user } from "lib/PixeldrainAPI"; import { get_user } from "lib/PixeldrainAPI";
import Tree from "./Tree.svelte"; import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte";
let menu_collapsed = false let menu_collapsed: boolean = $state(false)
const toggle_menu = (e: MouseEvent) => { const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed menu_collapsed = !menu_collapsed
} }
onMount(async () => { onMount(() => {
menu_collapsed = document.documentElement.clientWidth < 1000 menu_collapsed = document.documentElement.clientWidth < 1000
await loading_run(async () => { loading_run(async () => {
const user = await get_user() const user = await get_user()
if (user.username === undefined || user.username === "") { if (user.username === undefined || user.username === "") {
return return
@@ -49,12 +50,12 @@ onMount(async () => {
{#if $user.username !== undefined && $user.username !== ""} {#if $user.username !== undefined && $user.username !== ""}
<div class="separator" class:hide={menu_collapsed}></div> <div class="separator" class:hide={menu_collapsed}></div>
<div class="username" class:hide={menu_collapsed}> <MenuEntry id="subscription_info" collapsed={menu_collapsed}>
{$user.username} {#snippet title()}
</div> <div class="username">{$user.username}</div>
{/snippet}
<div class="separator"></div>
{#snippet body()}
<div class="stats_table" class:hide={menu_collapsed}> <div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div> <div>Subscription</div>
<div>{$user.subscription.name}</div> <div>{$user.subscription.name}</div>
@@ -69,8 +70,8 @@ onMount(async () => {
<div>Transfer used</div> <div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div> <div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div> </div>
{/snippet}
<div class="separator" class:hide={menu_collapsed}></div> </MenuEntry>
<a class="button" href="/d/me" use:highlight_current_page> <a class="button" href="/d/me" use:highlight_current_page>
<i class="icon">folder</i> <i class="icon">folder</i>
@@ -111,10 +112,7 @@ onMount(async () => {
<div class="separator"></div> <div class="separator"></div>
<Bookmarks menu_collapsed={menu_collapsed}/> <Bookmarks menu_collapsed={menu_collapsed}/>
<Tree menu_collapsed={menu_collapsed}/>
{#if !menu_collapsed}
<Tree/>
{/if}
</nav> </nav>
</div> </div>
</div> </div>
@@ -176,17 +174,17 @@ onMount(async () => {
overflow-x: hidden; overflow-x: hidden;
max-width: 100%; max-width: 100%;
} }
.username {
flex: 1 1 auto;
text-align: center;
margin: 3px;
}
.separator { .separator {
height: 1px; height: 1px;
margin: 2px 0;
width: 100%; width: 100%;
background-color: var(--separator); background-color: var(--separator);
} }
.username {
text-align: center;
margin: 3px;
}
.stats_table { .stats_table {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;

73
svelte/src/wrap/MenuEntry.svelte Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts">
import ToggleButton from "layout/ToggleButton.svelte";
import { onMount } from "svelte";
type Expandable = {[key: string]: boolean}
let {
id,
collapsed = false,
title,
body,
}: {
id: string
collapsed: boolean
title: import('svelte').Snippet
body: import('svelte').Snippet
} = $props();
let expanded: boolean = $state(true)
const get_status = (): Expandable => {
let exp = localStorage.getItem("menu_expanded")
if (exp === null) {
exp = "{}"
}
return JSON.parse(exp) as Expandable
}
onMount(() => {
let exp = get_status()
if (exp[id] !== undefined) {
expanded = exp[id]
}
})
const toggle = (e: MouseEvent) => {
let exp = get_status()
exp[id] = expanded
localStorage.setItem("menu_expanded", JSON.stringify(exp))
}
</script>
<div class="title">
<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
{#if !collapsed}
{@render title()}
{/if}
</div>
{#if expanded}
{@render body()}
<div class="separator"></div>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.separator {
height: 1px;
width: 100%;
background-color: var(--separator);
}
</style>

6
svelte/src/wrap/Router.svelte
View File

@@ -63,7 +63,11 @@ onMount(async () => {
let current_page: Tab = $state(null) let current_page: Tab = $state(null)
const load_page = (pathname: string, history: boolean): boolean => { const load_page = (pathname: string, history: boolean): boolean => {
console.debug("Navigating to page", pathname, "log history:", history) console.debug(
"Page router: Navigating to page", pathname,
"current path", window.location.pathname,
"log history:", history,
)
const path_decoded = decodeURIComponent(pathname) const path_decoded = decodeURIComponent(pathname)
let page_by_path: Tab = null let page_by_path: Tab = null

71
svelte/src/wrap/Tree.svelte
View File

@@ -1,8 +1,11 @@
<script lang="ts"> <script lang="ts">
import { global_navigator } from "filesystem/FSNavigator"; import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte"; import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { onMount } from "svelte"; import { onMount } from "svelte";
import MenuEntry from "./MenuEntry.svelte";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
let siblings: FSNode[] = $state([]) let siblings: FSNode[] = $state([])
onMount(() => { onMount(() => {
@@ -12,69 +15,55 @@ onMount(() => {
}) })
</script> </script>
{#if $global_navigator.path.length > 1} <MenuEntry id="tree_parents" collapsed={menu_collapsed}>
<div class="title"> {#snippet title()}
<div>Parent directories</div> <div class="title">Parent directories</div>
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}> <button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
<i class="icon">north</i> <i class="icon">north</i>
</button> </button>
</div> {/snippet}
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node} {#snippet body()}
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
{#if node.type === "dir"} {#if node.type === "dir"}
<div class="row"> <div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}"> <a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
{#if node.is_shared()} <img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<i class="icon">folder_shared</i> <span class:hide={menu_collapsed}>{node.name}</span>
{:else}
<i class="icon">folder</i>
{/if}
<span>{node.name}</span>
</a> </a>
</div> </div>
{/if} {/if}
{/each} {/each}
{/snippet}
</MenuEntry>
<div class="title"></div> <MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
{/if} {#snippet title()}
<div class="title">Siblings</div>
{#if siblings.length !== 0}
<div class="title">
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}> <button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
<i class="icon">west</i> <i class="icon">west</i>
</button> </button>
<div>Siblings</div>
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}> <button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
<i class="icon">east</i> <i class="icon">east</i>
</button> </button>
</div> {/snippet}
{#each siblings as node} {#snippet body()}
{#each siblings as node (node.id)}
{#if !node.is_hidden()} {#if !node.is_hidden()}
<div class="row"> <div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}"> <a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
{#if node.type === "dir"} <img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<i class="icon">folder</i> <span class:hide={menu_collapsed}>{node.name}</span>
{:else}
<i class="icon">image</i>
{/if}
<span>{node.name}</span>
</a> </a>
</div> </div>
{/if} {/if}
{/each} {/each}
{/snippet}
<div class="title"></div> </MenuEntry>
{/if}
<style> <style>
.title { .title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto; flex: 1 1 auto;
text-align: center; text-align: center;
margin: 3px; margin: 3px;
@@ -95,4 +84,12 @@ onMount(() => {
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
.thumbnail {
height: 1.5em;
width: 1.5em;
border-radius: 2px;
}
.hide {
display: none;
}
</style> </style>

1
svelte/vite.config.ts
View File

@@ -21,6 +21,7 @@ export default defineConfig({
outDir: builddir, outDir: builddir,
emptyOutDir: true, emptyOutDir: true,
minify: production, minify: production,
sourcemap: !production,
lib: { lib: {
entry: "src/wrap.js", entry: "src/wrap.js",
name: "fnx_web", name: "fnx_web",