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

Add new sharing dialog to filesystem

Browse Source
This commit is contained in:
Wim Brand
2025-06-05 21:29:07 +02:00
parent 9c8c9bb5f5
commit dd1a038bca
7 changed files with 232 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
svelte/src/filesystem/Menu.svelte
View File

@@ -4,9 +4,10 @@ import Button from "layout/Button.svelte";
import Euro from "util/Euro.svelte";
import { formatDataVolume } from "util/Formatting";
import { user } from "lib/UserStore";
import Dialog from "layout/Dialog.svelte";
let button: HTMLButtonElement
let dialog: HTMLDialogElement
let dialog: Dialog
export let no_login_label = "Pixeldrain"
@@ -17,35 +18,7 @@ export let style = ""
export let embedded = false
$: target = embedded ? "_blank" : "_self"
const open = () => {
// Show the window so we can get the location
dialog.showModal()
const edge_offset = 5
// Get the egdes of the screen, so the window does not spawn off-screen
const window_rect = dialog.getBoundingClientRect()
const max_left = window.innerWidth - window_rect.width - edge_offset
const max_top = window.innerHeight - window_rect.height - edge_offset
// Get the location of the button
const button_rect = button.getBoundingClientRect()
// Prevent the window from being glued to the edges
const min_left = Math.max(button_rect.left, edge_offset)
const min_top = Math.max(button_rect.bottom, edge_offset)
// Place the window
dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
}
// Close the dialog when the user clicks the background
const click = (e: MouseEvent) => {
if (e.target === dialog) {
dialog.close()
}
}
const open = () => dialog.open(button.getBoundingClientRect())
</script>
<div class="wrapper">
@@ -59,9 +32,7 @@ const click = (e: MouseEvent) => {
</button>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog bind:this={dialog} on:click={click}>
<Dialog bind:this={dialog}>
<div class="menu">
{#if $user.username !== undefined && $user.username !== ""}
@@ -114,7 +85,7 @@ const click = (e: MouseEvent) => {
<Button link_href="/register" link_target={target} icon="person" label="Register"/>
{/if}
</div>
</dialog>
</Dialog>
<style>
.wrapper {
@@ -130,16 +101,6 @@ const click = (e: MouseEvent) => {
.button_username {
margin: 0 4px;
}
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;